├── v-proj  |	├── node_modules  	// 當前項目所有依賴，一般不可以移植給其他電腦環境  |	├── public  |	|	├── favicon.ico	// 標籤圖標  |	|	└── index.html	// 當前項目唯一的頁面  |	├── src  |	|	├── assets		// 靜態資源img、css、js  |	|	├── components	// 小組件  |	|	├── views		// 頁面組件  |	|	├── App.vue		// 根組件  |	|	├── main.js		// 全局腳本文件（項目的入口）  |	|	├── router.js	// 路由腳本文件（配置路由 url鏈接 與 頁面組件的映射關係）  |	|	└── store.js	// 倉庫腳本文件（vuex插件的配置文件，數據倉庫）  |	├── README.md  └	└── **配置文件  

<template>   // template裡面有且只能有一個標籤      <div></div>  </template>    <script>      export default {          name: "text"      }  </script>    <style scoped>   // scoped是樣式的組件化    </style>      1) template：有且只有一個根標籤  2) script：必須將組件對象導出 export default {}  3) style: style標籤明確scoped屬性，代表該樣式只在組件內部起作用(樣式的組件化)  

在node_moduls library root 模組中導入以下模組    import Vue from 'vue'  import App from './App.vue'  import router from './router'  import store from './store'    Vue.config.productionTip = false  // 項目的一些新手提示    new Vue({    router,    store,    render: h => h(App)  }).$mount('#app')   // 相當於掛載點      上面可改為:  import Vue from 'vue'  // 載入vue環境  import App from './App.vue'  // 載入根組件  import router from './router'  // 載入路由環境  import store from './store'  // 載入數據倉庫環境    Vue.config.productionTip = false  new Vue({      el: '#app',      router,      store,      render: function (readFn) {          return readFn(App);  // 將組件文件讀成字元串形式,渲染掛載點      },  });  

請求過程      1) 載入mian.js啟動項目  	i) import Vue from 'vue' 為項目載入vue環境  	ii) import App from './App.vue' 載入根組件用於渲染替換掛載點  	iii) import router from './router' 載入路由腳本文件，進入路由相關配置    2) 載入router.js文件，為項目提供路由服務，並載入已配置的路由(鏈接與頁面組件的映射關係)  	註：不管當前渲染的是什麼路由，頁面渲染的一定是根組件，鏈接匹配到的頁面組件只是替換根組件中的  	<router-view></router-view>  這個標籤有vue.router進行提供,     比如我們走red這個路由, 自然而然的會拿出RegPage這個組件,他就會把PegPage這個組件替換成<router-view></router-view>, 如果走blue這個路由, 他就會拿出BluePage這個組件來進行替換RedPage這個組件, 進而實現頁面的跳轉    3) 如果請求鏈接改變(路由改變)，就會匹配新鏈接對應的頁面組件，新頁面組件會替換渲染router-view標籤，替換掉之前的頁面標籤(就是完成了頁面跳轉)  

<template>      <div id="app">          <!-- url路徑會載入不同的頁面組件              eg：/red => RegPage  | /blue => BluePage           來替換router-view標籤，完成頁面的切換           -->          <router-view></router-view>      </div>  </template>  

<template>      <div class="red-page">          <Nav></Nav>      </div>  </template>  <script>      import Nav from '@/components/Nav'      export default {          name: "RedPage",          components: {              Nav          },      }  </script>  <style scoped>      .red-page {          width: 100vw;   // vw  相對於視窗的寬度: 視窗的寬度為100vw          height: 100vh;  //  vh  相對於視窗的高度,: 視窗的高度是100vh          background-color: red;      }  </style>      拓展: vm :  相對於視窗的寬度或高度, 取決於哪個更小  

<template>      <div class="blue-page">          <Nav></Nav>    // 導航欄      </div>  </template>  <script>      import Nav from '@/components/Nav'      export default {          name: "BluePage",          components: {              Nav          }      }  </script>  <style scoped>      .blue-page {          width: 100vw;          height: 100vh;          background-color: blue;      }  </style>  

import Vue from 'vue'  import Router from 'vue-router'  import Home from './views/Home.vue'  import RedPage from "./views/RedPage";  import BluePage from "./views/BluePage";    Vue.use(Router);    export default new Router({      mode: 'history',      base: process.env.BASE_URL,      routes: [          {              path: '/',              name: 'home',              component: Home          },          {              path: '/red',              name: 'red',              component: RedPage          },          {              path: '/blue',              name: 'blue',              component: BluePage          }      ]  })  

html, body, h1, h2, ul, p {      margin: 0;      padding: 0;  }  ul {      list-style: none;  }  a {      color: black;      text-decoration: none;  }      // list-style屬性是設置list-style-type, list-style-image 和 list-style-position的簡寫屬性  

// 配置全局樣式    import '@/assets/css/global.css'  

<template>      <div class="nav">          <!--採用vue-router完成頁面跳轉，不能採用a標籤（會發生頁面刷新，本質就是重新載入了一次項目介面）-->          <ul>              <li>                  <!--<a href="/">主頁</a>-->                  <router-link to="/">主頁</router-link>  // to就相當於href              </li>              <li>                  <router-link to="/red">紅頁</router-link>              </li>              <li>                  <router-link to="/blue">藍頁</router-link>              </li>          </ul>      </div>  </template>    <script>      export default {          name: "Nav",      }  </script>    <style scoped>      .nav {          width: 100%;          height: 60px;          background-color: orange;      }      .nav li {          float: left;          font: normal 20px/60px '微軟雅黑';    // 子重/字體大小/height/ 字體          padding: 0 30px;      }      .nav li:hover {          cursor: pointer;          background-color: aquamarine;      }      .nav li.active {  // 默認哪一個是選中的, 選中哪個渲染哪個          cursor: pointer;          background-color: aquamarine;      }  </style>  

<template>      <div class="home">          <!-- 3）使用Nav組件 -->          <Nav></Nav>      </div>  </template>    <script>      // 1）導入Nav組件      import Nav from '@/components/Nav'      export default {          // 2）註冊Nav組件          components: {              Nav,          }      }  </script>  

1. 在views文件夾中創建視圖組件  2. 在router.js文件中配置路由  3. 設置路由跳轉,在指定路由下渲染該組件(替換根組件中的router-view標籤)  

<template>      <div class="tan-page">          <Nav></Nav>      </div>  </template>    <script>      import Nav from '@/components/Nav'      export default {          name: "TanPage",          components: {              Nav          }      }  </script>    <style scoped>      .tan-page {          width: 100vw;          height: 100vh;          background-color: tan;      }  </style>  

import TanPage from "./views/TanPage";  export default new Router({      mode: 'history',      base: process.env.BASE_URL,      routes: [          // ...          {              path: '/tan',              name: 'tan',              component: TanPage          }      ]  })  

<li>      <router-link to="/tan">土頁</router-link>  </li>  

1）一個組件從創建到銷毀的整個過程，就稱之為組件的生命周期  2）在組件創建到銷毀的過程中，會出現眾多關鍵的時間節點，如 組件要創建了、組件創建完畢了、組件數據渲染完畢了、組件要被銷毀了、組件銷毀完畢了 等等時間節點，每一個時間節點，vue都為其提供了一個回調函數(在該組件到達該時間節點時，就會觸發對應的回調函數，在函數中就可以完成該節點需要完成的業務邏輯)  3）生命周期鉤子函數就是 vue實例 成員  

export default {      // ...      beforeCreate() {          console.log('組件創建了，但數據和方法還未提供');          // console.log(this.$data);          // console.log(this.$options.methods);          console.log(this.title);          console.log(this.alterTitle);      },      // 該鉤子需要掌握，一般該組件請求後台的數據，都是在該鉤子中完成      // 1）請求來的數據可以給頁面變數進行賦值      // 2）該節點還只停留在虛擬DOM範疇，如果數據還需要做二次修改再渲染到頁面，      //  可以在beforeMount、mounted鉤子中添加邏輯處理      created() {          console.log('組件創建了，數據和方法已提供');          // console.log(this.$data);          // console.log(this.$options.methods);          console.log(this.title);          console.log(this.alterTitle);          console.log(this.$options.name);      },      destroyed() {          console.log('組件銷毀完畢')      }  }  

1) router-link會被解析為a標籤，用to完成指定路徑跳轉，但是不能添加系統事件(因為是組件標籤)  2) 在js方法中可以用 this.$router.push('路徑') 完成邏輯跳轉  3) 在js方法中可以用 this.$route.path 拿到當前請求的頁面路由  

<template>      <div class="nav">          <!--採用vue-router完成頁面跳轉，不能採用a標籤（會發生頁面刷新，本質就是重新載入了一次項目介面）-->          <ul>              <li @click="changePage('/')" :class="{active: currentPage === '/'}">                  <!--<a href="/">主頁</a>-->                  <!--<router-link to="/">主頁</router-link>-->                  主頁              </li>              <li @click="changePage('/red')" :class="{active: currentPage === '/red'}">                  <!--<router-link to="/red">紅頁</router-link>-->                  紅頁              </li>              <li @click="changePage('/blue')" :class="{active: currentPage === '/blue'}">                  <!--<router-link to="/blue">藍頁</router-link>-->                  藍頁              </li>              <li @click="changePage('/tan')" :class="{active: currentPage === '/tan'}">                  <!--<router-link to="/tan">土頁</router-link>-->                  土頁              </li>          </ul>      </div>  </template>    <script>      export default {          name: "Nav",          data() {              return {                  // 沒渲染一個頁面，都會出現載入Nav組件，currentPage就會被重置，                  // 1）在點擊跳轉事件中，將跳轉的頁面用 資料庫 保存，在鉤子函數中對currentPage進行數據更新                  // currentPage: localStorage.currentPage ? localStorage.currentPage: ''                  // 2）直接在created鉤子函數中，獲取當前的url路徑，根據路徑更新currentPage                  currentPage: ''              }          },          methods: {              changePage(page) {                  // console.log(page);                  // 當Nav出現渲染，該語句就無意義，因為在data中將currentPage重置為空                  // this.currentPage = page;                    // 有bug，用戶不通過點擊，直接修改請求路徑完成頁面跳轉，資料庫就不會更新數據                  // localStorage.currentPage = page;                    // 任何一個標籤的事件中，都可以通過router完成邏輯條件                  // console.log(this.$route);  // 管理路由數據                  // console.log(this.$router);  // 管理路由跳轉                  this.$router.push(page);  // 路由的邏輯跳轉              }          },          // 當前組件載入成功，要根據當前實際所在的路徑，判斷單選激活標籤          created() {              // console.log(this.$route.path);              this.currentPage = this.$route.path;          }      }  </script>    <style scoped>      .nav {          width: 100%;          height: 60px;          background-color: orange;      }      .nav li {          float: left;          font: normal 20px/60px '微軟雅黑';          padding: 0 30px;      }      .nav li:hover {          cursor: pointer;          background-color: aquamarine;      }      .nav li.active {          cursor: pointer;          background-color: aquamarine;      }  </style>