vue学习【番外篇】vue-cli脚手架的安装

　　大家好，我是一叶，今天和大家分享的是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

　　千里之行，始于足下。第一步已经踏下，后面的路，我们砥砺前行。