1、安装vue-router插件
npm install vue-router --save
其中'--save'是为了保存在package.json配置中，写在配置文件中下次install的时候，依赖包就会按照json文件中的配置项进行安装
2、在src中新建一个配置动态路由的js文件，js文件主要配置对应的路径跳转到对应的组件页面，所以要先导入对应的组件，然后将path和component一一对应
router.js .png
3、在main.js中引入router包和router文件
调用路由 .png
4、编写入口文件，调用路由
vue项目入口文件是index.html，在script中引入app.vue文件跳转到app.vue中，所以入口文件其实是app.vue，页面的编写就从app.vue开始
app.vue .png
在app.vue中用
<router-view></router-view>语法进行路由调用
微信截图_20180828185117.png
所以根据router.js的配置，当进入url的跟路径的时候，就会调用layout组件，layout里写的页面，就是此项目的首页
5、在main.js中引入element-ui（前端框架），引入方式有两种，一种是整体引入，另一种是按需引入http://element.eleme.io/#/zh-CN/component/quickstart
引入之后使用组件可能会报这样的错误：
ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/element-ui/lib/theme-chalk/base.css 7:3991-4027
@ ./node_modules/element-ui/lib/theme-chalk/base.css
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js
ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.woff
Module parse failed: Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/element-ui/lib/theme-chalk/base.css 7:3915-3952
@ ./node_modules/element-ui/lib/theme-chalk/base.css
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js
这是程序没有找到组件对应的css文件，要在webpack.config.js文件中加一个配置：
{
test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
loader: 'file-loader?name=./assets/fonts/[name].[ext]'
},
加完重启一下程序就OK了
