手把手教你利用脚手架搭建一个Vue工程

一个简单Vue工程的搭建

#本篇文章将带你如何使用webpack-cli脚手架搭建一个vue小工程，其实熟悉了就变得简单了，此篇文章主要帮助新手入门。具体操作图文流程如下所示：

1.Node环境安装

（1）node.js环境安装，可以从node.js中文网站进行对应镜像的选择与安装（附镜像链接如下）http://nodejs.cn/download/，具体安装流程见下面链接：https://www.runoob.com/nodejs/nodejs-install-setup.html
（2）安装好node.js可在cmd命令下查看确定其是否安装成功，具体命令如下：node -v，若命行下出现其对应版本号，则安装成功，否则可能需要重新安装；

安装成功出现版本号；
（3）安装好node.js后，其中应自带npm管理工具，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响；查看npm版本号的命令：npm -v

（4）上述一切安装成功之后，则可进行webpack的安装，命令行如下：npm install webpack -g, 若考虑网速影响，可先进行国内淘宝镜像的安装：npm install -g cnpm --registry=https://registry.npm.taobao.org
安装好此镜像之后，在进行webpack的安装：cnpm install webpack -g，确认webpack是否安装成功，可通过命令行：webpack -v 来查看，安装成功后如下：

（5）确认webpack安装成功之后：进行vue脚手架工具的安装：npm install vue-cli -g 淘宝镜像下的命令:cnpm install vue-cli -g ，安装完成后可通过命令：vue -V 来查看是否安装成功（-V是大写，这里不是打错了）：

（6）.当上述安装工作都已完成，则证明准备工作已经完成，可再次进行命令确认：
node -v (成功命令行返回结果：8.X.X)或其它版本号
npm -v (成功命令行返回结果：6.X.X)或其它版本号
webpack -v (成功命令行返回结果：3.X.X)或其它版本号
vue -V (成功命令行返回结果：2.X.X)或其它版本号
（7）.至此基础环境已经搭建完成，接下来可进行vue项目创建： （1）选择项目所要放置的文件夹，如D盘nodeworkspace文件夹下： 在cmd下先运行： D:
再运行：cd D:\nodeworkspace 进入该文件夹,此时在此文件夹下输入创建vue项目的命令：vue init webpack vueDemo（这个是项目名，不能用中文，名称自定义）接下来会进入项目的配置命令：

? Project name vueDemo//项目名默认就是
? Project description A Vue.js project //
文档描述，会在README.md文件上生成输入的内容，默认 A Vue.js project
? Author _**** <**@.com> // 作者，如果有git，就是读取git的User信息
? Vue build standalone // 有两个选项，第一个选项写着recommended for most users果断选了（至于干什么用到并不知道）
? Use ESLint to lint your code? Yes// 是否使用ESlint 默认否
? Pick an ESLint preset Standard // 选这个一个ESlint类型
? Setup unit tests with Karma + Mocha? Yes //使用单元测试工具karma和mocha 默认是
? Setup e2e tests with Nightwatch? Yes // 使用e2e测试框架 NightWatch 默认是 配置可根据需要自定义

（8）配置完成之后，则vue项目基础搭建完成 ，
搭建完成后，进入所在工程文件夹下安装依赖，如，我的工程名叫vueDemo，并且在D:nodeworkspace目录下，则在命令行中输入：cd D:\nodeworkspace\vueDemo,再在命令行中输入：npm install （这个命令是为了安装项目所依赖的一些依赖包）最后输入：npm run dev （运行项目，默认命令，运行命令可以修改）
启动完成后在浏览器中输入：localhost:8080,出现一个类似如下图命令的界面，则表明你的vue项目搭建成功了：
利用编辑器打开该工程，可见该工程目录结构大概如下所示：
新手上路，此文档主要是为了帮助新手搭建一个vue小demo，如有不足，恳请批评指正。