vue--安装插件，写路由

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中用 语法进行路由调用

微信截图_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了