第一步：搭建环境
安装vue-cli
cnpm install -g vue-cli
安装vue-router
cnpm install -g vue-router
使用vue-cli初始化项目
vue init webpack cppba-web
进入到目录
cd cppba-web
安装依赖
cnpm install
开始运行
npm run dev
（这里提个画外音：配置文件的时候会让你选择，这里推荐：
? Use ESLint to lint your code? 代码规范，推荐 N
? Setup unit tests with Karma + Mocha? 单元测试，推荐 N
? Setup e2e tests with Nightwatch? E2E测试，N
这三个很重要，起码对我来说是的）
第二步：在src文件下新建page目录
第三步：在components新建tabBar.vue文件夹，放置路由tab切换组件
安装vue-cli cnpm install -g vue-cli 安装vue-router cnpm install -g vue-router 使用vue-cli初始化项目 vue init webpack cppba-web 进入到目录 cd cppba-web 安装依赖 cnpm install 开始运行 npm run dev
第四步：在page目录下新建Home.vue和Me.vue文件，这是放置切换路由页面的显示
Home.vue代码
<template>
<div>
首页
</div>
</template>
<script>
</script>
<style>
</style>
Me.vue代码
<template>
<div>
我
</div>
</template>
<script>
</script>
<style>
</style>
第五步：渲染路由与页面，在App.vue中
<template>
<div id="app">
<router-view></router-view>
<tabBar></tabBar>
</div>
</template>
<script>
import tabBar from './components/tabBar'
export default {
name: 'App',
components:{
tabBar
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
第六步：在router目录下的index.js中配置路由
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../page/Home.vue'
import Me from '../page/Me.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Home
},
{
path:'/home',
component:Home
},
{
path:'/me',
component:Me
}
]
})
最后放上成果：
