在使用vue-cli之前，请确认你的电脑已经安装了 node，建议版本在 8.0.0 以上
安装淘宝镜像(强烈推荐安装，不然真的好慢，等到最后还是失败)
安装cnpm的原因：npm的服务器是外国的，所以有时候我们安装“模块”会很很慢很慢超级慢。
安装方法:
#-g 全局配置(有可能失败,假如失败后尝试下面代码就会成功) npm install cnpm -g #解决npm速度慢 npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm的作用：淘宝镜像将npm上面的模块同步到国内服务器，提高我们安装模块的时间。 安装完淘宝镜像之后，cnpm和npm命令行皆可使用，二者并不冲突 。
安装完Cnpm可以使用cnpm -v查看版本。
安装vue-cli脚手架
全局安装，输入命令行：
cnpm install vue-cli -g安装完成之后，输入命令行vue -V查看版本号，出现相应得到版本号即为成功。
查看可以基于那些模板创建vue应用
vue list创建vue-cli项目：
接下来初始化vue项目(哪个文件位置都行)
vue init webpack myvue(项目名) #注：项目名不能大写，不能使用中文此命令表示基于webpack初始化一个项目此文件生成你当前文件目录
初始化vue项目时会出现几个提示，分别是输入项目名称、描述、作者等，按实际情况选择即可。
？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可； ？Project description ---- 项目描述，按需填写。无需填写可以直接回车； ？Author ---- 作者 ？Vue build ---- 构建模式，一般默认第一个；我选no ？Install vue-router? ---- 是否安装vue-router。选no。 ？Use ESLint to lint yout code? ---- 格式校验，按需；no ？Set up unit tests ---- 测试相关，按需；no ？Setup e2e tests with Nightwatch? ---- 测试相关，按需； no ？Should we run ‘npm install’ for you after the project has been created? ---- 按需，这里选yes, use NPM,我选No，之后自己在目标 目录下执行npm install即可。进入你安装的项目
cd myvue安装项目依赖（类似maven依赖）
npm install在项目初始化的时候，已经存在了package.json文件，直接使用npm install 安装项目所需要的依赖，否则项目不能正确运行
运行项目
npm run dev浏览器访问：
http://localhost:8080/注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用，当有其他vue项目运行的时候，可以使用ctrl+c来中断运行 项目就搭建成功。创建vue-cli项目详细步骤详细代码步骤
使用Idea打开项目：
总体框架
一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。 文件结构细分
1.build——[webpack配置]
build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务
2.config——[vue项目配置]
config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等 3.node_modules——[依赖包]
node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。
在两种情况下我们会自己去安装依赖：
（1）项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等（安装方法示例：npm install css-loader）
（2）安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件
注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install vue-loader@11.1.4
4.src——[项目核心文件]
项目核心文件前面已经进行了简单的说明，接下来重点讲解main.js，App.vue,及router的index.js
4.1 index.html——[主页]
index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充 4.2 App.vue——[根组件]
一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style) 【template】
其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如上图，父节点为#app的div，其没有兄弟节点）
<router-view></router-view>是子路由视图，后面的路由页面都显示在此处
打一个比喻吧,<router-view>类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示 【script】
vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看vue.js文档，在后面我也会通过例子来说明。
【style】
样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>
如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader,回车。安装完成后，就可以在style标签下import所需的css文件，例如：
<style> import './assets/css/public.css' </style>这样，我们就可以把style下的样式封装起来，写到css文件夹，再引入到页面使用，整个vue页面也看上去更简洁。
4.3 main.js——[入口文件]
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下图中的
components:{App}就是引入的根组件App.vue
后期还可以引入插件，当然首先得安装插件。 4.4 router——[路由配置]
router文件夹下，有一个index.js，即为路由配置文件 这里定义了路径为’/'的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件
类似的，我们可以设置多个路由，‘/index’,’/list’之类的，当然首先得引入该组件，再为该组件设置路由。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
