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

標籤：實戰   segment   project   csdn   style   樣式   匯入   for   就會   

製作.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 = falsenew 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.vueModule 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 -Dnpm install node-sass -D

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

參考

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

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