一、用vue－cli構建初始專案

• step1：全域性安裝vue-cli

$ npm install --global vue-cli

• step2: 建立一個基於webpack模版的新專案

vue init webpack my-vueRouter-project1

• step3：建立專案過程中，根據提示填寫專案名稱，是否使用ESLint檢查專案等功能，具體填寫結果如下：
  

• step4： 安裝依賴檔案

// 進入到剛剛建立的專案目錄：
cd my-vueRouter-project1
//安裝package.json中的專案依賴
npm install

二、專案目錄下各個檔案的含義和作用

以上操作自動構建的專案目錄如下

一級目錄

• build資料夾和config資料夾都是和webpack配置相關

  

• node_modules資料夾：npm install 安裝的依賴程式碼庫

• src資料夾：存放專案原始碼，我們開發的所有程式碼都會放在這個目錄下

  

• static資料夾：存放第三方靜態資源，如reset.css等，這個資料夾中預設包含了.gitkeep檔案，這個檔案表示即使這個目錄為空也可以把這個目錄提交到程式碼倉庫裡

  

• .babelrc檔案： 我們使用的是es6，通常我們通過babel將es6編譯成es5瀏覽器才能識別，這個.babelrc檔案就是babel編譯的一些配置。
  “presets”: 表示預設，表示babel轉換預先需要安裝的一些外掛
  “plugins”: 除了一些預設外掛，這裡也可以配置一些外掛

  

• editorconfig : 編譯器的相關配置, charset表示編碼；indet_style表示縮排風格；indet_size表示縮排大小為2格；end_of_line表示換行符的風格；insert_final_newline = true表示新建立一個檔案時會在檔案末尾新增一個新行；trim_trailing_whitespace = true自動移除行尾多餘空格；

• eslintignore：忽略eslint語法檢查的目錄檔案，下面表示bulid和config目錄下，忽略語法檢查

  

• .eslintrc.js: eslint的配置檔案。
  extends: ‘standard’表示繼承一個標準javascript的規則，這些與語法規則可以在上面註釋的那個網站檢視
  

  https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  除了繼承標準規則，也可以對具體的一些規則作修改，在rules中對具體的規則進行修改，值為0值，表示忽略這些規則的檢查；

  

• gitignore: git提交時忽略這些檔案和目錄，不會提交上去

  

• index.html： 入口html 檔案，這個檔案很簡單，沒有引入各種css，js檔案，因為在webpack專案編譯過程中，會自動將這些css，js檔案插入進來；

• package.json： 整個專案的配置檔案，用來描述一個專案的基本資訊和依賴關係；”script”: 表示定義命令列的一些命令，比如 “dev”: “node build/dev-server.js”,表示在命令列輸入npm run dev的時候執行了node build/dev-server.js這個命令；
  dependencies: 表示生產環境下的一些依賴；devDependencies表示編譯過程中的一些依賴，這些依賴在打包後上線執行時是不存在的；

  

• readme：專案的一些描述檔案；

編寫vue元件

• App.vue

<template>
   <div id="tab">
   <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定連結. -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
     <router-link to="/home">Home</router-link>
     <router-link to="/about">About</router-link>
     <router-link to="/album">Album</router-link>
    <!-- 路由匹配的元件將渲染到這裡 -->
     <router-view></router-view>
    </div>
</template>
<script></script>
<style>
   a{text-decoration: none;font-size: 20px}
</style>

• about.vue

<template>
  <h1>I am a about</h1>
</template>

<script>
  export default{}//把整個模組輸出
</script>
<style></style>

• album.vue

<template>
  <h1>I am a Album</h1>
</template>

<script>
    export default{}
</script>

<style></style>

• home.vue

<template>
  <h1>I am a Home</h1>
</template>

<script>
   export default{}
</script>

<style></style>

編寫webpack編譯的入口檔案main.js

import Vue from 'vue'
import App from './App.vue'
import about from './components/about.vue'
import home from './components/home.vue'
import album from './components/album.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)//載入路由，vue在使用外掛時候，需要用Vue.use()方法載入外掛；
const routes = [{//定義路由路徑、路由元件等引數配置
  path: '/about', component: about
}, {
  path: '/home', component: home
}, {
  path: '/album', component: album
}]
//建立router例項，傳入路由配置
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})
// 建立和掛載根例項,並注入路由，讓整個專案都有路由功能
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

安裝路由，並執行專案

npm install vue-router --save-dev
npm run dev

進入8080埠，初始頁面

點選Alum，跳轉到/aubum頁面