本文的学习来自技术胖大神的教程：https://jspang.com/
Vue-cli是vue官方出品的快速构建单页应用的脚手架
开发一个项目，在开始的时候，会构建项目结构、webpack、怎么运行、编写一些node指令等，还有在项目生产中用的命令，都需要做一个提前的编程。Vue-cli就做了这些事情，只要把它安装上，并进行初始化和一些简单的设置，就自动做好了在开发时需要的环境和结构目录，开发人员只专心的编写代码就可以了。
Vue-cli牵扯的东西很多，有webpack，npm，nodejs，babel等。
1安装vue-cli
前提：安装好nodejs。
在电脑上新建一个目录vueCli，然后在目录中cmd，输入命令：
npm install vue-cli -g
查看版本：
vue -V，注意V要大写
2项目初始化
vue init webpack 项目名
安装完成，可以看到：
输入这两个命令：
就可以预览了：
目录结构：
3 vue-cli项目结构
4 Vue-cli的模板
就是src下的文件，是开发中需要编写的。
4.1 npm run build 命令
如何把写好的Vue网页放到服务器上，就是要用到npm run build 命令。
输入npm run build命令后，vue-cli会自动进行项目发布打包。
在package.json文件的scripts字段中可以看到，执行npm run build命令就相当于执行node build/build.js 。
执行完npm run build命令后，在项目根目录会生成dist文件夹，这个文件夹里边就是要传到服务器上的文件。
4.2 main.js文件
main.js是整个项目的入口文件,在src文件夹下：
可以看到通过 import App from‘./App’这句代码引入了App的组件和的模板，找到App.vue文件，打开查看：
4.3 App.vue文件
app.vue文件分成三部分：
1）<template></template>是模板的HTMLDom结构
2）<script></script>中是js内容：页面的动态效果和Vue的逻辑代码
3）<style></style>中是css内容：写的CSS样式，如果加上scoped：写成<style scoped></style>表示这些css样式只在本模板中起作用。不加scoped说明可以全局起作用。
4.4 router/index.js 路由文件
import Hello from ‘@/components/Hello’ 说明引入了/components/Hello.vue文件。这个文件里就配置了一个路由，就是当访问网站时显示Hello.vue的内容。
4.5 Hello.vue文件
这个文件就是上面当项目启动时展示的页面
也是分为<template><script><style>三个部分，可以试着改一些内容，然后预览一下：
4.6总结
拿到一个项目后，先找入口文件：
在Build/webpack.base.conf.js中：
说明入口文件是main.js
在main.js中引入了App.vue和router
在App.vue中没有什么重要的，
而在router/index.js中可以看到，引入了HelloWorld
打开Hello.vue，就会看到主要的页面内容了。
同样的，如果想添加其他components，也要像Hello.vue这样写。
开发项目中，大部分工作都是写这些.vue结尾的文件。