vue搭建项目前奏曲——vue-cli

　　　　vue-cli是快速构建这个单页应用的脚手架，这个可是官方的。官方给的建议，如果你是初次尝试Vue，哪就老老实实用普通的书写引入js文件，这里牵扯太多的东西，例如webpack、Node.js、npm等等，很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的。一下是构建过程。

　　

　　1、使用npm全局安装vue-cli（前提是你已经安装了nodejs，否则你连npm都用不了），在cmd中输入一下命令： npm install -g vue-cli

　　 2、安装完成后，创建自己的工作空间，在cmd切换至刚刚创建好的工作空间，如果已经有工作空间，直接切换到工作空间即可。使用命令创建项目： npm init webpack 项目名称

命令输入后，会进入安装阶段，需要用户输入一些信息：

　　Project name (vuetest) ——项目名称，可以自己指定，也可直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。

　　Project description (A Vue.js project) ——项目描述，也可直接点击回车，使用默认名字

　　Author (........) ——作者，不用说了，你想输什么就输什么吧

　　接下来会让用户选择

Runtime + Compiler: recommended for most users    运行加编译，既然已经说了推荐，就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   仅运行时，已经有推荐了就选择第一个了

　　Install vue-router? (Y/n)——是否安装vue-router，这是官方的路由vue-router官网，大多数情况下都使用，这里就输入“y”后回车即可。

　　Use ESLint to lint your code? (Y/n)——是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用。ESLint官网

　　接下来也是选择题Pick an ESLint preset (Use arrow keys)——选择一个ESLint预设，编写vue项目时的代码风格，因为我选择了使用ESLint

　　Setup unit tests with Karma + Mocha? (Y/n)——是否安装单元测试，我选择安装

　　Setup e2e tests with Nightwatch(Y/n)?——是否安装e2e测试 ，我选择安装

　　完成！（一般情况，一路回车下来就好）

简单说一下这个目录：

　　bulid   里面是一些操作文件，使用npm run *    时其实执行的就是这里的文件 

　　config 配置文件，执行文件需要的配置信息 

　　src   资源文件，所有的组件以及所用的图片都是在这个放着的简单看一下这个文件夹下都放了那些东西

　　assets  资源文件夹，放图片之类的资源

　　components  组件文件夹，写的所有组件都放在这个文件夹下，现在有一个写好的组件已经放到里面了

　　router  路由文件夹，这个决定了也面的跳转规则

　　App.vue  应用组件，所有自己写的组件，都是在这个组件之上运行了

　　main.js   webpack入口文件，webpack四大特性entry入口、output输出，loader加载器，plugins插件，可以再项目中build\webpack.base.conf.js中可以看到这个入口文件是哪个

 

　　安装一下模块： npm install   这里只用了install是安装所有的模块，如果是安装具体的那个模块install 后面输入模块的名字即可，只输入install就按照项目的根目录下的package.json文件中依赖的模块安装，这个文件里面是不允许有任何注释的，每个使用npm管理的项目都有这个文件，是npm操作的入口文件。因为是初始项目，还没有任何模块，需要安装所有的模块，这就是为什么我们刚下载下来别人的项目时都需要先运行 npm install 命令，因为模块较多，文件比较大，所以没有上传模块，这个不需要上传那些文件的配置是在根目录下.gitignore配置的，这是git操作的配置文件，涉及到的git操作都要操作这个文件，可以没有，也可以什么都不写。

　　安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。

 

       

       运行项目： npm run dev  自动打开默认浏览器并运行默认的index.html

 

    

       至此，一个完整的vue项目框架正式搭建完成。在此基础上，我们就可以在相应的目录下修改或新建我们需要的项目了。

 

　　

   　参考：Vue2.0 新手入门 — 从环境搭建到发布

                 基于vue-cli快速构建