vue2.0学习笔记（第八讲）（vue-cli的使用）

vue-cli相当于脚手架，可以帮助我们自动生成模板工程。其内部集成了很多的项目模板，如simple、webpack、webpack-simple等。其中webpack这个项目模板适用于大型项目的开发，因为它内部包含Eslint检查代码规范和单元测试。下面我们主要介绍webpack-simple这个项目模板的使用，因为它和webpack相比，在功能上仅少了Eslint检查代码和单元测试这两部分，没有代码检查，使用起来比较方便。

1、安装vue命令环境

我们可以在任意目录下，打开cmd，键入命令-> npm install vue-cli -g，即代表把vue-cli这个包安装在npm的全局目录下，由于npm的全局目录在之前已经完成环境变量的配置，故在此我们不再需要配置环境变量。在下载安装完成之后，我们可以在任意目录下，键入命令-> vue --version，若能显示正常的版本号，则说明vue的命令环境安装成功。

2、生成项目模板

我们在当前的项目文件目录下，打开cmd，键入命令-> vue init webpack-simple vue-demo，在完成之后，即可在我们的项目文件夹下生成一个名为vue-demo的文件夹。

若在运行的过程当中，出现如下的报错信息：

块级作用域下的声明（let, const, function, class）等在严格模式下是不被支持的。其实就是说ES6新语法在目前的环境下是不被支持的，可用一些工具对代码进行转化。这个其实是因为当前环境当中node的版本太低导致的，我们使用-> nvm install 8.7.0 32来下载8.7.0版本的node。在下载完成之后，然后再通过命令-> nvm use 8.7.0 32来把当前本机上的node版本切换至8.7.0。此时，npm的版本也自动升级更新至5.4.2了。

再完成node的版本升级之后，我们可以把之前npm全局目录里下载好的的vue-cli卸载了，然后重新通过命令-> npm install vue-cli -g重新下载一次，然后我们再重新进入项目文件夹下，打开cmd，键入命令-> vue init webpack-simple vue-demo，再几次选项回答之后（可以直接敲击回车使用默认的答案）即可在项目文件夹下生成一个名为vue-demo的文件夹，该文件夹里即为一个webpack-simple的项目模板框架，我们可以直接在里面进行我们的项目开发。

3、下载依赖项

我们进入刚生成的这个vue-demo文件夹下，打开cmd，然后再键入命令-> npm install即可以完成把该文件夹下的package.json的配置文件当中的依赖项全部下载至node_modules文件夹当中。

4、运行项目

最后再在vue-demo这个目录下，在cmd当中键入命令-> npm run dev。

若我们在运行项目的过程中，出现如下报错信息：

也是因为node或npm的版本过低导致的，采用上述介绍的方法进行升级即可解决。

运行项目时，则会默认监听8080端口，自动打开默认的chrome浏览器，相当于请求地址为http://localhost:8080。之后我们修改代码，只要ctrl+s保存之后，在浏览器端会实现自动刷新。显示如下页面：

默认监听8080端口，若本机上的8080端口被占用，我们也可以手动修改这个默认监听的端口号，我们在vue-demo目录下，打开package.json文件，将

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

修改为：

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 2016",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

然后关闭之前的cmd窗口，再重新键入命令-> npm run dev重新运行一下，则此时，默认监听的端口号就变成了2016。

我们在实际的开发过程中，只需关心vue-demo这个文件夹当中的index.html、src文件夹当中的App.vue和main.js文件。其中后缀名为.vue的文件（一般其文件名的首字母均要大写）将被输出成为组件，该文件一般由<template></template>、<script></script>和<style></style>这三部分组成。