Vue2+VueRouter2+webpack 構建項目實戰（三）：配置路由，運行頁面

製作.vue模板文件

通過前面的兩篇博文的學習，我們已經建立好了一個項目。問題是，我們還沒有開始製作頁面。下麵，我們要來做頁面了。

我們還是利用 http://cnodejs.org/api 這裡公開的api來做項目。不過本章節不涉及調用介面等內容。這裡，我們假設我們的項目是做倆頁面，一個列表頁面，一個內容頁面。列表頁面有分頁等，內容頁面展示。

因此，我們需要兩個模板文件。

我們在src/page目錄下麵新建兩個文件，分別是index.vue和content.vue

index.vue代碼：

<template>
    <div>這是首頁</div>
</template>

content.vue代碼：

<template>
  <div>這是內容頁</div>
</template> 

配置路由routes.js

在src目錄下的config文件夾下新增routes.js文件代碼如下：

import Vue from 'vue'
import Router from 'vue-router'
// 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
         component: index
    },
    {
        path: '/content',
        component: content
      }
  ]
})

配置main.js

註意：變動部分為引入路由配置文件路徑：

import Vue from 'vue'
import App from './App'
import router from './router/routes.js'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

配置App.vue

<template>
  <div id="app">
       <div class="nav-list">
      <router-link class="nav-item" to="/">首頁</router-link>
      <router-link class="nav-item" to="/content">內容頁</router-link>
    </div>
    <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>

關閉格式檢查插件eslint

當我們npm run dev的時候頁面運行後出現如圖所示：

然後去查看錯誤發現大部分是語法問題引起的，所以打開根目錄下麵的/build/webpack.base.conf.js文件，註釋掉如下代碼：

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

再次運行npm run dev 就會在瀏覽器出現如圖所示的界面：

點擊內容直接進入內容頁界面。
到這兒頁面就運行起來了，也就可以其它的開發了。

擴展：使用sass寫樣式

如果我們在App.vue中導入了sass,如：
那麼App.vue代碼如下：

<template>
  <div id="app">
       <div class="nav-list">
      <router-link class="nav-item" to="/">首頁</router-link>
      <router-link class="nav-item" to="/content">內容頁</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
  @import "./style/style";
</style>

這樣以來頁面就會報錯，因為沒有安裝sass-loader,如下錯誤：

ERROR in ./src/App.vue
Module not found: Error: Can't resolve 'sass-loader' in 'D:\vue_test_project\vuedemo\src'
 @ ./src/App.vue 4:2-324
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

需要安裝安裝sass-loader以及node-sass插件才能正常運行。依次執行下麵的指令：

npm install sass-loader -D
npm install node-sass -D

這樣頁面就順利運行起來了。
結果如圖所示：

參考

Vue2+VueRouter2+webpack+vue-cil構建完整項目實例（附:詳細步驟截圖）
Vue2+VueRouter2+webpack 構建項目實戰（三）配置路由，整倆頁面先