安装vue官方命令行工具
全局安装:
1npm install -g vue-cli
查看版本
1vue --version
创建一个基于"webpack"模板的新项目
1. 在当前目录初始化一个名为my-project的项目
1vue init webpack my-project
(1) 然后自动downloading template;
(2) 然后会问你项目的名称，可以手动输入，也可以按enter直接适应上面命令行里的名称(我这里是my-project);
(3) 接着会问你项目的描述，可以按自己的想法写，也可以按enter直接忽略；
(4) 然后问你作者，可修改，也可以按enter直接用你原来已经设置的GitHub的账号；
(5) 还会问你是否用ESLint，这是一个代码检查工具；
(6) 是否使用单元测试，可以不用。
2. 解读项目的结构
初始化完成后在当前目录生成一个my-project的文件夹，如下图所示：
目录解析：
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
3. 启动项目
但是这时项目还不能启动，因为前端项目也是需要很多依赖的，所以我们要先在my-project目录下载依赖：
1npm install
这时候会自动下载依赖。但是这里有个问题，为什么在这个目录下能自动下载依赖呢？答案可想而知，肯定是这个目录下有相应的关于依赖信息的配置文件，这个文件就是package.json文件：
我们通过：
1vi package.json
看一下package.json文件：
我们可以看到这个文件里有项目的名称、版本、描述、作者，最关键的是还指定了它的dependencies，也就是依赖，还有开发的依赖devDependencies, devDependencies里指定的就是这套目标使用到的依赖，如file-loader是webpack读取CSS模块的一些工具，vue-loader是如何把.vue文件解析成浏览器能识别的HTML、JS的这些东西。
执行npm install下载完成后，我们看到my-project目录下多了一个node_modules文件：
这就是刚刚通过npm install下载的依赖。
然后我们就可以把这个项目跑起来了：
1npm run dev
运行完成后，通过浏览器打开http://localhost:8080（这里我的8080端口不好使，故启动了8081）
P.S. 如果你通过npm run dev启动了工程，又在终端新开窗口启动的话，它会自动改成其它端口，依次是8080、8081、8082等：
一般启动一个用来调试就行了，除非你的8080端口被占用了，你又懒得处理。
这里又有一个问题：这个端口是在哪里设置的呢？这就是my-project下的config文件夹里的index.js文件了。如下图所示：
解释：如上图所示，文件中设置了host为localhost，端口为8080，自动打开浏览器。我们注意到文件中端口设置后面有一句解释：“// can be overwritten by process.env.PORT, if port is in use, a free one will be determined”这句话的意思就是说端口是可以被程序修改的，如果端口占用了，会自动定义一个可用的端口号。
从*.vue到页面
一个后缀为vue的文件是怎么编译生成页面的呢？
就是通过webpack打包工具可以把一个.vue文件打成.html、.js和*.CSS文件。js就是一个新的vue对象，重点的数据侧，就是Model层都在这个vue的数据对象了，展现层都在html里。
vue的热更新
假如你运行了工程，打开了页面，然后了修改了代码，你想看到修改后的效果，这时需不需要重新运行代码呢？答案是否定的，因为有vue的热更新。
如下图所示，原来代码里是Welcome to Your Vue.js APP：
（我这里用的编辑器是Visual Studio Code）
我在本地代码改成Welcome to My Vue.js APP
然后保存（当然如果设置了自动保存的话就不需要操这步了）一下代码，刷新页面(甚至不需要刷新)就能看到改变了：
也就是说，你只要保存了代码，不需要重新运行，就会更新到页面上。
vue的入口文件及文件调用关系
main.js是程序入口文件，然后加载各种公共组件；
解释：
1// 这个Vue是来自由这套模板提供的，这个vue在打包的时候，会从node-modules里面取vue框架的东西。
2import Vue from 'vue'
3// 第一个App是指下面的components里的组件，第二个App是App.vue的略写，也就是说第一个App是(来自)App.vue文件。
4import App from './App'
5import router from './router'
6
7Vue.config.productionTip = false
8
9/* eslint-disable no-new */
10new Vue({
11 el: '#app',
12 router,
13 // 这里注册了App组件，注册完可以当标签<app></app>在HTML中使用(大写会转成小写)。
14 components: { App },
15 template: '<App/>'
16})
其实这里的import App from './App'相当于var App = required('./App')，就是将App.vue作为App(变量)引入到当前文件下。第一句加载的vue在node-module里
2.在main.js中，加载的是App.vue文件，所以App.vue是vue渲染的入口。App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实也可以理解为所有的路由也是App.vue的组件。这里将router标识为App.vue的子组件。
3. router->index.js把准备好路由组件注册到路由里。
文件的调用顺序：main.js-->App.vue-->router下的index.js。
开始写最简单的代码!
1. 直接在App.vue里写
写完就能出现这个页面：
2. App.vue只是调用，将页面的内容写在子组件中。
解释：第二行id="lxn"表示调用名为lxn.vue的子组件。
