Vue2+VueRouter2+Webpack+Axios 構建專案實戰2017重製版（四）調整 App.vue 和 router 路由

前情回顧

如果你按照我的結構框架去調整了之後，那麼，現在你的專案應該是出錯，並且跑不起來了。所以，我們需要進行一些調整，讓專案重新跑起來。

調整 App.vue 檔案

我們先把預設專案裡面沒用的東西先刪除掉，把程式碼調整為下面的樣子。

<template>  <div id="app">    <router-view></router-view>  </div></template><script
 
>export default {  name: 'app'}</script><style lang="scss">  @import "./style/style";</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

入口，只有一個空的路由視窗，我們的專案的所有內容，都基於這個視窗來展現。

我們的樣式，都將從 src/style/style.scss 這個檔案中引用，因此，在 App.vue 這個檔案中，直接引用 ./style/style 即可。

 

scss 中，引用檔案，是可以省略 .scss 這個字尾名的。
  並且，我們某個不用編譯成 css 的檔案，我們給檔案命名為 _xxx.scss

其中，檔名字首的下劃線，也是可以省略的。
  更多內容可以參考我以前寫的博文《CSS預編譯技術之SASS學習經驗小結》

好，調整好了我們的 App.vue 檔案後，因為我們使用了 scss 檔案預編譯，所以我們需要安裝兩個支援 scss 的 npm 包。

我們在專案終端內輸入下面的兩句命令來進行安裝：

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

• 1
• 2

 

因宿舍翻牆效果不好，這裡用 cnpm 替代了 npm 進行安裝的。效果是一樣一樣的。

調整 index.vue 和 content.vue 檔案

昨天，我們在 page 資料夾下面建立了兩個空文字檔案 index.vue

這裡，我們先去填寫一點基礎內容在裡面。

index.vue

<template>  <div>index page</div></template>

• 1
• 2
• 3

content.vue

<template>  <div>content page</div></template>

• 1
• 2
• 3

好，寫上如上的程式碼就行，我們後面再豐富這些內容。

調整 router 路由檔案

現在，這個專案還跑不起來呢，如果你執行 npm run dev 還是會出錯的。因為我們還沒有配置路由。

import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'Hello',      component: Hello    }  ]})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

以上，是預設的路由檔案，引用了一個 Hello 的元件，這個元件被我們昨天的博文中整理檔案結構的時候刪除掉了。所以，這裡就報錯啦。

我們根據我們的需要，來調整這個路由檔案，如下：

import Vue from 'vue'import Router from 'vue-router'import Index from '@/page/index'import Content from '@/page/content'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      component: Index    }, {      path: '/content/:id',      component: Content    }  ]})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

預設，我們的首頁，就是我們的 Index 元件，這裡，你可能要問 :id 是什麼意思？

因為我們的內容頁面是要展示N條內容的，我們如何來區分這些內容呢，就是根據ID來進行區分。所以，這裡使用了動態路由匹配。

更多內容，可以參考官方文件《動態路由匹配》

好，我們現在，專案應該是沒有任何錯誤，可以跑起來了。忘記跑起來的命令了？如下：

npm run dev

• 1

如果你的專案沒有能夠順利的跑起來，則說明你哪裡寫錯了。在終端裡面或者瀏覽器裡面，是會告訴你出錯在哪裡的。

但很可能你的英文不是很好，看不懂那些提示。沒有關係，藉助搜尋引擎和翻譯引擎，應該能夠很快的排查出來，到底是哪裡出錯了。

即便你可能遇到一些問題。但是我希望你還是能夠順利的跑起來，得到如下的結果：

 

如果文章由於我學識淺薄，導致您發現有嚴重謬誤的地方，請一定在評論中指出，我會在第一時間修正我的博文，以避免誤人子弟。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發連結。