Vue2.0 构建 Vue 脚手架（vue-cli）

（1）全局安装 vue-cli ，在命令提示窗口执行：npm install -g vue-cli

出现以上提示表示vue-cli正常安装成功，可以正式创建vue-cli工程项目了。

（2）安装vue-cli成功后，进入你想放置项目的文件夹的位置，在命令提示窗口执行创建vue-cli工程项目的命令：再执行 vue init webpack project-name 就能初始化好一个自己的项目

需要注意的是项目的名称不能大写，不然会报错。

Project name (my-project) # 项目名称（我的项目）

Project description (A Vue.js project) # 项目描述一个Vue.js 项目

Author 作者（你的名字）

Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）

Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）

Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）

当然这些都看你自己个人的情况，我这里是全选了是。

确认创建项目后，后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等，详见上图。安装顺利执行后会，生成如下文件目录：

（3）生成文件目录后，使用 npm 安装依赖：npm install（为了节省时间我用了cnpm insatll）

（4）最后需要执行命令： npm run dev 来启动项目，启动完成后会自动弹出默认网页：

到这一步，就算成功利用vue-cli搭建一个vue项目了~~~

3.目录结构及其对应作用 通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：