vue-cli脚手架之搭建环境全过程

大家有没有苦苦为搭建vue的脚手架vue-cli而烦恼过呢？作者本着总结经验，分享经验，让迷弟迷妹们少走弯路错路的态度为大家总结一下，大家按照我的步骤一步一步的走下去，最后一定会安装成功的，我的办法一定是最简单，傻瓜式的，一看就会。

第一步，安装node环境

流程：

1、安装：这个我就不一一给大家说了，傻瓜式操作，去node.js官网下载node，你想往那个里面安装就往哪个里面安装，傻瓜式操作，一键安装到底！

2、检测到底有木有安装成功呢？很简单，一共两条准则：

（1）直接输入node -v（注意中间有空格），按“回车键（Enter）”，此时显示node版本

（2）输入npm -v（注意中间有空格），按“回车键（Enter）”，此时显示npm版本

（！）下面是截图，如果出现版本号，则证明node安装成功了！嗨森

第二步，安装淘宝镜像

流程：

安装淘宝镜像 ：这里是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。

第三步：安装webpack

流程：

打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。结果如下图

第四步：安装vue-cli脚手架构建工具

流程：

打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

二、通过以上四步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目

1、在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径  ②如果以安装git的，在相关目录右键选择Git Bash Here/

2、安装vue脚手架输入：vue init webpack exprice ，注意这里的“exprice” 是项目的名称可以说是随便的起名，但是需要主要的是“不能用中文”。

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令 This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目 For Vue 1.x use: vue init webpack#1.0 exprice ? Project name (exprice) ---------------------项目名称 ? Project name exprice ? Project description (A Vue.js project) ---------------------项目描述 ? Project description A Vue.js project ? Author Datura --------------------- 项目创建者 ? Author Datura ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块） ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? (Y/n) ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? (Y/n) ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "exprice". To get started: --------------------- 这里说明如何启动这个服务 cd exprice npm install npm run dev

安装好之后，进入你新建的文件中（exprice），然后安装npm依赖包（npm install），安装成功后，运行npm，即执行指令 npm run dev

如果出现下图所示，则说明脚手架环境就搭建成功了，

现在你就可以访问doc中的链接http://localhost:8080了，执行结果如下图
 
到了此处，那么恭喜你，脚手架终于大功告成了，mmp太不容易了有木有？练了三遍，才变得很熟练了哈哈

参考文章：https://www.jianshu.com/p/1626b8643676