说明前端 vue 框架不知不觉就这样火起来了，生态圈也是逐渐在完善，后台也是彻底分离了数据给前端，就类似ios 和安卓客户端一样，令人惊奇的是也拥有了前端路由这个概念，更令人兴奋的是用 webpack 打包解决了包和包依赖的问题。二话不说，先上个例子。
1.vue + webpack 初始化开发环境
初始化环境首先要全局安装nodejs，webpack环境，至于怎么安装node 环境相信网上有很多教程，webpack 的话可以通过npm安装（也可以通过淘宝镜像配置安装cnpm）。
安装初始化
vue init webpack vue-demo
vue-demo 是你要起的项目名字，它会新建一个vue-demo的文件夹来存放初始化的一些文件。下面会提示项目名字，如果不填直接回车，就是默认的名字。
项目描述：这里可以填写一些对于这个项目的基本关键描述，例如：饱了么 app
项目作者：
是否安装vue-router 路由：选择 yes
是否开启ESLint 代码检验：
解析：开启后可能多一个空格或少一个符号都会编译错误
建议：真正了解后再开启，第一次学的话可以选no，真正项目建议开启
是否用karma 测试：no
建议：了解后再开启，不然配置的第一个坑都爬不过去
Nightwatch 测试no
完成后提示：
通俗话解析：
1.切换到 vue-demo 目录下
2.通过npm 安装相关的配置
3.启动项目
执行安装后
运行官方的例子项目
npm run dev
会自动开启一个端口，自动打开浏览器预览。
2.文件结构的一些了解
导入的一些第三方工具配置，package.json
html入口文件文件——> index.html
main.js 引入相关模块
引入模版文件
入口路由 ./router/index.js
源码分析：
import Vue from 'vue' ---->引入vue模块
import Router from 'vue-router' ----->引入路由模块
import Hello from '@/components/Hello' ----->引入模版，前面别名，后面路径
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', ---->路由访问路径
name: 'Hello', ---->名字
component: Hello ---->模版路径配置的别名，看第三行代码
}
]
})
首页模版内容，试下修改里面的内容，再访问看是否有什么变化
3.vue 路由配置
1.新建页面模版
2.导入模版文件
3.设置访问路由，以及路由对应的页面模板
新建About.vue 页面模板文件
index.js 导入页面模板，设置访问路由
启动访问
访问你刚刚新添加的路由路径
Paste_Image.png
这里抛出一个疑问，为什么我的About.vue 里面只有一行About，而显示却多了个V图标呢？
详情看App.vue 里面的代码，欢迎评论讨论。
4 源码打包
激动人心的一刻来临了，通过打包后的文件，通过编译后把build 文件夹和index.html 拷贝到服务器即可。
然后把你的文件拷贝到你的服务器上
总结：
要有一颗不怕折腾的心。
