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

给大家介绍下用 Vue2.0 搭建Vue脚手架（vue-cli）,在搭建脚手架之前，先做好环境配置。

详细如下：

1.先下载node.js(官网地址：https://nodejs.org/en/)下载安装后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，查看版本号，出现类似下图的版本号说明安装成功：

image.png

2.输入npm -v 查看 npm 的版本号

image.png

3.有的朋友下载的时候比较慢，也可以通过安装淘宝镜像，打开命令行工具，把这个命令（npm install -g cnpm --registry= https://registry.npm.taobao.org）复制到命令行工具，记住要手动的右键粘贴，因为ctr + v 的在命令行没法粘贴。

4.现在有很多的项目模版（项目模版）
simple
webpack
webpack-simple
browserify
browserify-simple 等等
今天主要说下webpack 跟 webpack-simple

基本使用流程

(1) npm install vue-cli -g 安装vue命令环境 如下图（下载中）：

image.png

那么安装完成之后，如何查看是否安装成功了呢？输入 vue --version(注意：前面是两个杠) 如果出现版本号说明安装成功，如下图：

image.png

（2）生成项目模版
命令： vue init <项目模版名> 本地自己想要创建的文件名字 如下图:

image.png

这个时候出现？Project name 就是项目名称的意思，直接enter，然后还会跳出来另外的提示，一路enter下去，出现下图，说明项目模版创建完毕，这时候还没有完。

image.png

注意： 此处自己创建的项目名字不能含有大些字母，不然报错提示

图片.png

（3）用cd <自己创建的项目名字> 进入到刚刚生成的项目目录里面

image.png

注意：这个地方看你在那个文件夹里面，如果你是在刚刚创建的文件夹同一层打开的命令工具，那么直接cd <自己创建的项目名字>是可以进入的，这里简单说下
CD 目录名 进入到目录名文件夹
CD \ 退回到根目录
CD .. 退回到上一根目录
CD 或者 CD . 显示当前路径

（4）进入到刚刚生成的项目目录里面 运行命令 npm install 生成node_modules文件

image.png

(5)这个时候 运行 npm run dev

image.png

然后浏览器自动打开localhost:8080显示如下图页面，这个时候说明脚手架搭建成功了。有没有看明白的朋友，欢迎留言，共同进步。

image.png