页面效果：

 

1.用vue脚手架：vue-cli，新建一个vue项目。

2.npm run dev后，给小颖了一句提示：Your application is running here:http://localhost:8080/   ，小颖比较懒，觉得还是喜欢以前那种执行完npm run dev后，会在你默认的浏览器中自动打开http://localhost:8080/ ，所以小颖将提示语删了：

再给package.json中加入：

我不想用8080端口号，所以在package.json中将端口号修改为：8086

3.项目运行后发现，老是加一个  “/#/”  的后缀，解决方法：

4.引入element-ui：npm install  element-ui  --save

main.js

import Vue from 'vue'import App from './App'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import router from './router'Vue.use(ElementUI)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  template: '
     ',  components: { App }})

 接下来根据所需，新增、修改相应文件。

项目目录：

修改：index.js，还是因为懒，所以后面几个路由都配置成一样的。嘻嘻

import Vue from 'vue'import Router from 'vue-router'import helloWorld from '@/components/HelloWorld'import index from '@/pages/index'Vue.use(Router)export default new Router({  mode: 'history',  routes: [{    path: '/',    name: 'index',    component: index  }, {    path: '/helloWorld',    name: 'helloWorld',    component: helloWorld  },{    path: '/a',    name: 'helloWorld',    component: helloWorld  },{    path: '/b',    name: 'helloWorld',    component: helloWorld  },{    path: '/c',    name: 'helloWorld',    component: helloWorld  },{    path: '/d',    name: 'helloWorld',    component: helloWorld  }]})

修改：App.vue

新增：index.vue

 git地址：