大家好，我是一叶，今天和大家分享的是vue-cli脚手架的安装，关于vue-cli的优点，我就不赘述了。
一、检查安装node
安装vue-cli之前，先检查node是否安装。win+R，输入cmd打开命令面板，输入node-v进行查看，如图1所示。
图1
如果还没安装node的小伙伴，可以访问node安装地址：http://nodejs.cn/download/，如果不会安装，百度便可，因为他不是本文的重点。
二、vue-cli全局安装
命令行执行 :
npm install -g vue-cli
加-g是安装到全局
安装之后效果如图2所示。
图2
是不是发现使用npm下载东西很慢，“诶~慢那就对了”。接下来引入cnpm，也就是淘宝镜像，国内使用的话会很快。
（1）、官方网址：http://npm.taobao.org
（2）、命令行执行：
npm install cnpm -g --registry=https://registry.npm.taobao.org
（3）、cnpm和npm用法一致，不要嫌弃它是淘宝团队做的就不用（我身边就有这样的例子）。
三、创建项目
命令行执行:
vue init webpack blog-8-6
其中demo是自己起的项目名称，不必拘泥于blog-8-6这个名称，也可以不写，因为接下来需要确认，如图3所示。
图3
如图3所示，出现命令行时，就一直回车，因为里面安装的东西都用得上。
接下来进入到blog-8-6这个文件夹下，如图4所示，执行命令行：
cd blog-8-6
图4
随即安装依赖，执行命令行:
cnpm install
这是安装项目运行的依赖，是必须的一步。
运行项目，执行命令行：
cnpm run dev
复制一下到浏览器运行看一下，如图5所示。
图5
运行结果如图6所示。
图6
有的小伙伴可能会运行出错，按f12后报错全是×，此时打开blog-8-6文件夹，找到build文件夹下的webpack.base.conf.js，再用常用的编辑器打开他，注释如下代码就好了。
const createLintingRule = () => ({
// test: /.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter'),
// emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
代码如图7所示。
图7
再刷新一下浏览器，发现就能正常访问了，如图6一样。至此，脚手架搭建完毕。后续便能展开项目的编写了，在项目编写前，我们看一下脚手架的项目结构。
接下来进入到blog-8-6这个文件夹，能看到项目结构，如图8所示。
图8
四、目录结构及其作用
目录结构及其作用如图9所示。至此脚手架的安装及其作用就全部结束了。
图9
千里之行，始于足下。第一步已经踏下，后面的路，我们砥砺前行。