vue-cli（vue脚手架）简单流程

　　在做vue的项⽬时，我们如果不⽤官⽅提供的脚⼿架，我们就必须⾃⼰去搭建项⽬所需要的⽬录结构等，同时每次做项⽬都需要⾃⼰搭建显得⿇烦。所以我

们只需要使⽤vue官⽅提供的vue-cli脚⼿架⼯具搭建项⽬即可。下⾯我将列出vue-cli简单搭建流程：

　　注意：在这⾥我会默认⼤家的电脑已经装好node环境，如若不熟悉请查看，按照流程安装即可。vue-cli项⽬操作步骤图在此就不具体展

⽰,按照我提供的步骤和注意事项具体操作即可完成对vue-cli项⽬的搭建。　　1、安装vue-cli

　 1）、使⽤npm（需要安装node环境）全局安装webpack，打开命令⾏⼯具输⼊npm install webpack -g或者（npm install -g webpack）,安装完成后输⼊ webpack -v，如果出现相应的版本号，则说明安装成功。

　　2）、利⽤npm对vue-cli进⾏全局安装，在cmd中输⼊命令: npm install -g vue-cli，安装完成之后输⼊ vue -V（注意这⾥是⼤写的“V”），如果出现相应的版本号，则说明安装成功。　　2、⽤vue-cli来构建项⽬

　　　1）、⾸先在你的磁盘中新建⼀个⽂件⽤于存放你的项⽬，⽐如我D:\\vuedemo1，然后使⽤命令⾏cd进⼊到此项⽬⽬录，然后输⼊命令vue init webpack test,，其test是你的项⽬名。输⼊命令后，会跳出⼏个选项让你回答：

Project name (test)： -----项⽬名称，直接回车，按照括号中默认名字.

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 functionsare required elsewhere 仅运⾏时，已经有推荐了就选择第⼀个了

Install vue-router? (Y/n) 是否安装vue-router，这是官⽅的路由，⼤多数情况下都使⽤，这⾥就输⼊“y”后回车即可。

Use ESLint to lint your code? (Y/n) 是否使⽤ESLint管理代码，ESLint是个代码风格管理⼯具，是⽤来统⼀代码风格的，⼀般项⽬中都会使⽤。

接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择⼀个ESLint预设，编写vue项⽬时的代码风格，直接y回车Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车回答完毕后就开始构建项⽬了。　　2）、安装依赖。

　　　　注意：上述操作完成之后你的项⽬中将会多出⼀个项⽬名称⽂件夹，再⽤cd命令进⼊到此⽂件夹如D:\\vuedemo1\est下输⼊命令npm install即可。( 如果安装速度太　　3）、启动项⽬

run dev后浏览器未⾃动打开，你只需找到项⽬⽂件中的config⽂件下⾯的index.js，将autoOpenBrowser的false改为true即可。重新输⼊npmrun dev即可打开你所的搭建的vue-cli项⽬。

　　　　注意：npm 开启了npm run dev以后怎么退出或关闭？使⽤ctrl+c快捷键退出　　4)、项⽬打包　　

　　 注意，⾃⼰的项⽬⽂件都需要放到 src ⽂件夹下。在项⽬开发完成之后，可以输⼊ npm run build 来进⾏打包⼯作。打包完成后，会⽣成dist ⽂件夹，如果已经修改了⽂件

路径，可以直接打开本地⽂件查看。项⽬上线时，只需要将 dist ⽂件夹放到服务器就⾏了。　　5)、所有项⽬搭建完毕后，各项⽬⽂件结构介绍如下图：