创建vue脚手架vue.cli

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

详细如下：

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

node安装

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

npm版本号

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命令环境 如下图（下载中）：

安装vue命令环境

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

安装好出现版本号

（2）生成项目模版

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

生成自己创建的项目文档

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

项目名称不能大写

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

大写报错

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

项目名字写入

注意：这个地方看你在那个文件夹里面，如果你是在刚刚创建的文件夹同一层打开的命令工具，那么直接cd <自己创建的项目名字>是可以进入的，这里简单说下

CD 目录名 进入到目录名文件夹

CD \ 退回到根目录

CD .. 退回到上一根目录

CD 或者 CD . 显示当前路径

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

安装node_modules

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

启动跑起来

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

完成over