如果你按我上面的檔案目錄修改的話，此刻你的專案應該是跑不起來的，那我們來改點東西。

1.修改App.vue

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

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

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

刪除原有的程式碼，將上面這段程式碼貼上進去。此處style中lang=“less”說明本專案是採用less寫樣式的，如果你用的 scss，此處就要改成lang=“scss”。所有的樣式都在src/style/style.less中，所以此處直接引用./style/style\

2.安裝less，在終端執行

npm install less-loader -d  --save-dev
npm install node-less -d  --save-dev
npm install less -d  --save-dev

1. -d是檢視詳情
2. –save-dev是指將包資訊新增到devDependencies，表示你開發時依賴的包裹。

3. –save是指將包資訊新增到dependencies，表示你釋出時依賴的包裹。

   這會你的專案是可以跑起來的。

3.配置路由

• 在index.vue頁面中

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

• 在content.vue頁面中

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

• 修改router中的index.js檔案

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

  專案跑起來以後，你會在頁面看到如下圖的樣子
  
  
  此刻，估計你的心裡是有疑問的，為啥content頁配置路由的時候要寫成/content/:id,這個id是幹嘛的？？？
  因為我們為了區分若干條內容資訊，就是根據id來進行區分的，所以，這裡使用了動態路由匹配