注意：如果安装后，出现 cnpm 不是内部或外部命令，也不是可运行的程序。就需要检查cnpm 的路径是否正确。将 cnpm包的所有文件复制和 npm.cmd 文件在同一级目录下即可。
究其原因：是因为环境变量中仅仅配置了 npm.cmd 所在文件夹路径，我们也可以将 npm_modules 目录添加到环境变量中，这样也不会出现这个问题。推荐使用该方法
添加环境变量：
在 PATH 中添加：
cnpm install -g nrm
切换镜像查看已安装的镜像 ： nrm ls 切换镜像 nrm use XXX
最后，安装 vue-cli 客户端npm install --global vue-cli
创建新的Vue项目创建一个文件夹，用于存放和维护 Vue 项目，这里我创建的是 c:\develop\VueProjects
切换到该文件夹，打开cmd。然后输入： vue init webpack 项目名
配置按照下图设置
最后一行选项选择的是包/依赖安装方式
创建完成后，切换到项目路径。使用 npm run dev 命令启动项目
将项目导入IDEA这里因为我电脑上只有IDEA并且懒得安装前端编程IDE，所以就使用IDEA来编程
安装后会存在一个问题，IDEA 并不能正确识别 .vue 文件(我是2018.2版本，不知新版解决没有)，因此会将.vue文件识别成普通文本文件，给我们编码带来很大的不便，解决办法如图：
另外，IDEA也不能识别ES6语法，我们也需要进行一些配置：
通过上面的两个设置，就可以愉快的使用 IDEA 进行 Vue 项目编程啦！
Vue-Cli 中编辑的项目是支持热部署的，耶！
Vue项目结构项目根目录下有一个 index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0"> <title>todolist</title> </head> <body> <div></div> <!-- 这里定义了一个 app 的挂载点 --> <!-- built files will be auto injected --> </body> </html>src 目录下有 main.js 是 Vue 项目的入口js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, # 这里采用 ES6 的语法，如果某 key 和 value 是一样的，可以简写成 key template: '<App/>' })可以看出，入口文件引入了同目录下的 App.vue 文件，那么这个文件里面有什么内容呢？
<template> <div> <img src="http://www.likecs.com/assets/logo.png"> <HelloWorld/> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { name: 'App', components: { HelloWorld } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>由此可见，Vue 项目对各个模块进行了拆分，以达到解耦的目的。具体的好处且往下看
练习3使用 vue-cli 实现 TodoList
打开上面创建的 TodoList 项目，修改 App.vue 文件名称为 TodoList.vue ， 并修改其他文件中的引用名