1、構(gòu)建路由頁面組件

在src/components/下 創(chuàng)建 項目所需的頁面 暫時不寫什么內(nèi)容
比如 home.vue

<template>
  <div class="home">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      msg: 'Home'
    }
  }
}
</script>

2、建立Vue-Router路由配置

在src/router/index.js 中

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import NotFound from '@/views/NotFound'
Vue.use(VueRouter)
const routes = [{
  path: '/home',
  name: 'Home',
  component: Home
},
{
  path: '/',
  redirect: '/home'
},
{
  path: '*',
  component: NotFound
}]
export default routes

在src/main.js 中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import FastClick from 'fastclick'
import App from './App'
import VueRouter from 'vue-router'
import routes from './router'
Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

3、配置入口（默認生成，已配置好）

根目錄 app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</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>

npm run dev

4、遇到的問題

錯誤信息：

 ?  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  
Mixed spaces and tabs                             
  /Users/derek/Documents/myProject/vue/firstVue/src/App.vue:13:2
          message: 'Hello Vue!'
       ^
  ?  http://eslint.org/docs/rules/no-tabs                   
Unexpected tab character                          
  /Users/derek/Documents/myProject/vue/firstVue/src/App.vue:14:2
        }

錯誤原因：因為你設(shè)置了eslint，安裝時Use ESLint to lint your code? (Y/n)
如果你想有良好的規(guī)范，其實錯誤已經(jīng)很清晰，大多數(shù)就是縮進不規(guī)范，分號不需要等原因，很容易解決的。寫多了就成習慣了。

解決方案：找到build/webpack.base.conf.js

刪掉下面代碼:

{
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
      formatter: require('eslint-friendly-formatter')
    }
  },