摘要：文件是當前項目的首頁文件。以后可能還會有全局注冊組件等操作。在上面使用了這是一個預定義的路徑，代表目錄。而為了使用好這個實例，不要修改的，不然裝載完內容后，對應的管理區域會指向不明，而導致渲染失敗。

目錄

• 上節內容回顧：
• npm
  • 介紹
  • 安裝
  • 常用命令：
  • 補充：
• 基于npm的Hello World
• 項目結構分析
• 用法遷移
• 小提醒
  • ES6語法
  • 知識補充
• 單文件組件
  • 使用注意：
• 路由
  • 開啟路由
  • 定義路由
  • 使用路由
    • 數據顯示
    • 路由跳轉
  • 帶參路由
    • 動態路徑參數
    • 查詢參數
    • 監聽路由參數變化
  • 嵌套路由
  • 命名視圖
  • 編程式路由
  • 404路由
  • 補充：
• vuex
  • 開啟vuex并創建store
  • 使用vuex
    • 獲取數據
    • 改變數據
  • 項目結構
  • 補充：

首發日期：2019-01-28
修改：

1. 2019-01-29：增加404路由

上節內容回顧：

• 組件的注冊（全局，局部）
• 組件的數據傳輸（父子組件，非父子組件）
• props（數據校驗）
• 給組件綁定原生事件
• template
• 插槽（插槽的作用，命名插槽，插槽的默認內容，作用域插槽）
• 動態組件
• $refs

npm

介紹

npm是什么?
npm 是 JavaScript 世界的包管理工具。js也是可以建成一個項目的，很多時候前端的功能不可能是純粹的自己寫的，我們會去用別人造好的輪子（日歷插件，圖表插件之類的），如果我們自己去找輪子，那么首先要去那個輪子的官網下載（有時候這個步驟會很麻煩）。而npm的服務器上會收集了很多常用的js相關的文件（不僅僅是js，更準確的說是代碼模塊，通常都是集成一個包），我們可以利用npm來下載項目的依賴模塊（包）。
除了依賴，npm還允許用戶從服務器下載并安裝別人編寫的命令行程序到本地使用。【比如vue-cli,安裝了vue-cli,就可以使用這個程序來快速建立一個基礎的vue項目】

安裝

• 首先，你需要到node.js 官網下載適合版本的node
• 安裝node 【省略安裝過程，實在不懂的，可以自行百度】
• 測試node是否正常，在命令行輸入下面兩條命令：node -v和npm -v，如果輸出了各自的版本號，那么就是安裝成功了。

常用命令：

這些命令可以先暫時不記，后面用到的時候還會提一下。

• 安裝指定模塊：npm install 包名 【如果要全局安裝，那么要加上參數-g】【一些第三方的包也是程序，安裝的時候也是使用npm install 程序名】
• 安裝項目中package.json所包含的模塊：npm install
• 卸載模塊：npm uninstall 包名 【如果還想從package.json中刪除模塊，那么還需要加上參數--save,即npm uninstall --save 包名】
• 啟動項目：npm start
• 查看已經安裝的模塊：npm ls
• 升級npm版本:npm install -g npm

補充：

• npm下載模塊的時候需要從服務器上下載，如果你嫌慢，可以考慮更換源，使用國內的cnpm：npm install -g cnpm --registry=http://registry.npm.taobao.org

基于npm的Hello World

1.進入命令行，鍵入命令npm install -g vue-cli【這一步是安裝vue腳手架vue-cli，vue-cli能夠快速構建一個vue的基礎項目出來】
2.使用腳手架來創建一個vue項目：vue init webpack my-project 【webpack是創建vue項目的方式，my-project是vue項目的名稱】

3.等待下載完模塊后，使用cd命令進入項目文件夾后，輸入npm run dev來運行項目。

4.訪問控制臺提示的url，就可以看到基于npm的hello world了。

5.訪問localhost:8080,可以看到如下的界面，說明一個基礎的vue項目已經初始化完成了：

為什么不使用靜態導入來演示后面的例子了？
在后面，我們將講到多個組件之間的復合使用，在有多個組件的時候，使用單文件來注冊組件是一個比較好的處理，而且在項目擴大的時候會涉及到方方面面的問題（路由啊，數據管理啊等等），這時候靜態導入就不太適合了，開發效率太低了。

項目結構分析

項目構建完之后，讓我們來分析一下“該在哪個目錄寫下哪些代碼”

• node_modules目錄：node_modules是項目依賴模塊的目錄，里面的一個個文件夾都是項目依賴的模塊。一般不需要理會。我們使用npm install來安裝依賴模塊的時候就是把模塊下載到這里。
• build目錄：build目錄是關于項目構建信息的目錄，里面主要是webpack構建項目的一些配置。現在暫時不講，后面再講。
• config目錄：
  • config目錄是存放項目的配置文件的目錄。
  • 基礎配置信息在index.js
  • 開發環境下的配置信息：dev.env.js
  • 線上產品環境下的配置信息：prod.env.js
• static目錄：存放項目的靜態資源文件，這個目錄是開放訪問的。
• package.json和package-lock.json文件：
  • package.json文件包含了項目依賴模塊的列表，使用npm 來安裝項目依賴模塊的時候都是從package.json來判斷需要什么依賴的。
  • package-lock.json文件包含了項目依賴模塊的一些限制信息（限制版本號，限制下載地址，限制哈希值）
• .eslintrc.js和.eslintignore文件：
  • .eslintrc.js是關于eslint的語法規則的文件。
  • .eslintignore是指定哪些文件或文件夾忽略eslint語法檢測。
• index.html文件：是當前項目的首頁文件。
• .babelrc文件：是一個關于vue語法與js語法轉換的文件【一般不需要理會】
• src目錄：是項目的源代碼目錄
  • main.js：是項目的入口文件，包含了新建根實例等操作。（以后可能還會有全局注冊組件等操作。）
  • router目錄：用于設置vue路由信息的目錄
  • store目錄：用于設置vuex數據管理的目錄
  • App.vue文件：是項目的根組件。
  • components目錄：組件相關的目錄，單文件組件一般都存放在這里
  • assets目錄：靜態資源存放處【與static的區別是，static會原封不動地構建起來，而assets會被webpack進行處理，路徑什么的webpack會自動管理好的】

上面的文件具體不需要太理解，我們只需要關注src目錄。我們只需要在src目錄下寫代碼就好。下面將介紹怎么在src目錄下寫代碼。

用法遷移

項目換到了npm上后，先了解一下前面學習過的內容怎么在npm創建的vue項目中使用吧。

1.還需不需要手動創建根實例？
已經不需要了，在main.js文件會自動創建一個根實例。

2.根實例管理區域在哪里？
從main.js文件中，可以看到根實例所對應的區域的id還是app,而這個app在index.html中【你可以嘗試修改index.html，確定一下是這個區域，比如說可以修改一些頁面的title】

3.是如何渲染出上面的Hello World頁面的？
可以看到出來main.js是核心的入口文件，它創建了一個根實例來管理了index.html的app區域，并且聲明了內部使用的template,所以在渲染的時候，app區域里面會渲染成,而App是一個組件（這是單文件組件，App.vue），所以也就是把App組件中的內容顯示到app區域中。

4.怎么修改首頁？
從上面來看，首頁就是index.html,核心的顯示區域是app區域，而app區域顯示的是組件App的內容，如果我們修改App組件(App.vue)中的內容就可以修改首頁了。

5.怎么注冊組件？
使用npm來構建項目后，一個組件可以定義在一個多帶帶的vue中。
除了以往的那些全局注冊，局部注冊，你還可以使用單個vue文件來注冊一個組件（實質相當于局部注冊）。這個步驟這里可以簡單地說一下，首先定義一個vue文件，例如App.vue文件，然后在App.vue中定義組件的內容，并且要使用export來“導出”組件，在需要的地方使用import 來導入組件，然后就可以使用組件了。（上面的main.js使用App.vue組件的時候也有一行import App from ./App）

【上圖有個問題，如果你直接打，你會發現頁面的color都變了，如果你想要在當前組件生效，那么可以在style后加個scoped】

6.組件的常用屬性的定義：
基本還是按以前的規則，比如data要是一個函數。

7.router-view是什么？
如果你嘗試修改App.vue，你會發現里面有一個router-view，這是什么呢？這是一個用于路由顯示的元素。它會裝載當前路由所定義的內容。如果你學過iframe或者frame，你就明白這個東西的意義，router-view會根據當前所處的url來顯示對應的內容（這個路由對應的內容在router目錄下的index.js中）。

小提醒

ES6語法

這里提一下一些在Vue中常用的ES6語法：

• 如果鍵名和值一樣，可以單寫鍵名。
  • 所以在使用components的時候，如果組件名和組件別名一致，那么可以單寫一個。
  • 其他情況如果key和value是一樣的時候也可以單寫key：
    
• 如果是一個函數，可以單寫一個括號
  

知識補充

• 在import的時候，如果不寫后綴，會自動查找符合后綴的。順序是：.vue->.js->.json。import Hello from @/components/Hello
• 在上面使用了@,這是一個預定義的路徑，代表src目錄。這個預定義路徑是webpack給我們的。
• export,import,export default
• index.html中的id=app與App.vue中的id=app的區別：首先index.html里的app給vue找到了管理區域，然后在使用template的時候，會把index.html中的
  渲染成,然后再渲染成對應的組件的內容。也就是說index.html里面的app提供了裝載點，App.vue提供了裝載的內容。【如果修改了App.vue里面的id，你會發現渲染成功后頁面的id會變。】【而為了使用好app這個實例，不要修改App.vue的id，不然裝載完內容后，對應的管理區域會指向不明，而導致渲染失敗。】

單文件組件

1.新建vue文件
我選擇在src/components下新建一個Hello.vue


2.定義組件的內容

3.在其他文件中使用組件（這個所謂的其他文件，也可以是其他組件）:首先使用import來導入組件，然后使用components來聲明使用組件，最后在組件的template中使用組件

使用注意：

• 組件的內容必須有一個根元素包裹，除了template以外，template里面還得有一個根元素。
• 要進行export default導出，不然這個組件無法在其他地方使用。
• 定義組件的其他屬性要遵循以往的格式，如data要是一個函數。

路由

• 在以往，都是通過a元素來進行頁面跳轉的，跳轉的過程可以稱為“路由跳轉”，在這里是一個頁面到另外一個頁面的過程。
• 而在vue中，由于是單頁面應用，所以這里的路由本質上是進行了頁面重渲染（同時修改了頁面的地址）。

開啟路由

如果要使用路由，那么首先要開啟功能：

定義路由

路由與內容的對應信息定義在router目錄下的index.js文件中。

使用路由

數據顯示

• 首先，路由的數據是使用來顯示的，會渲染出當前路由對應的內容。
• 我們可以嘗試修改一下路由對應信息來顯示其他組件信息：
  

路由跳轉

可以實現點擊后跳轉到指定路由的功能。
hello點擊后可以跳轉到/hello路由。

帶參路由

動態路徑參數

所謂路徑參數，就是形似https://xxxx.xxx.com/info/1011337448中的1011337448這個參數。這個參數告訴了這個頁面該怎么渲染。
在路由中，我們可以使用形如/path/:id的方式來匹配參數，:后面跟的是參數名；

然后在組件中使用this.$route.params.參數名來獲取參數。

路徑參數是可以有多個的，如/hello/:id/:name，這是分別利用this.$route.params.參數名來獲取參數。

查詢參數

所謂查詢參數，就是形如https://xxxx.xxx.com/info?name=lilei中name=lilei的這個參數。
給下一個路由帶查詢參數可以使用如下的方法：
1.hello,點擊這個得到的url是/hello?id=001。【這里使用路由的path來標識路由】

2.User【這里使用路由的name來標識路由】

然后在組件中我們可以使用$route.query.參數名來獲取參數

監聽路由參數變化

如果想要監聽路由參數變化，那么可以使用watch來監聽。

嵌套路由

• 假如已經有了一個路由/admin,然后再有一個路由/admin/sys的話就是路由進行了嵌套。【這是一種非常常見的情況】
• 我們上面知道了路由的信息是由router-view來顯示的，那么嵌套的路由里的信息要用什么顯示呢？其實還是用，也是可以嵌套的。
• 如果我們在路由的index.js中使用了children來定義嵌套路由，并且在子組件中也創建了一個router-view，那么嵌套路由的數據會顯示在子組件的中，而不是父組件的router-view中（具體看下圖）

步驟：
1.首先，在路由中使用children來定義嵌套路由

2.先訪問/hello,確認App.vue中的router-view渲染了路由/hello的數據

3.在Hello.vue中寫一些文字，用來確定路由切換時，第一級的router-view的數據沒有被清除。同時新建一個router-view。

4.隨便定義一點Child.vue的內容。
5.先訪問/hello,再訪問/hello/child:

命名視圖

• 上面講了router-view的嵌套，如果想要在同一組件內使用多個router-view呢？（為什么會需要多個router-view呢？有可能想要發生某些路由變化的時候，頁面某一部分不發生變化，只在某些情況發生變化，比如側邊欄這樣的東西。通常都想要側邊欄不變化，只有中間的顯示區域發生變化，但如果退出登錄了，那么兩個部分應該都發生變化。）
• 可以給router-view添加一個屬性name,從而讓router-view有名字。
• 當一個組件中有多個命名router-view的時候，路由該怎么定義呢？
  
• 如果想要切換路由的時候，希望某些命名路由不變，那么可以這樣做：
  
• 嵌套路由也可以與命名路由結合使用：
  

編程式路由

上面的使用router-link的方式可以稱為聲明式路由，下面講的這種叫做編程式路由。
我們可以使用this.$router.push(路由的path)來進行路由跳轉

404路由

在上面的路由匹配中，如果我們訪問了一個沒有進行定義的路由，那么頁面會顯示空白。
我們可以在路由的最下面定義一個如下的路由：

這樣就可以把匹配不到的路由都渲染成指定的頁面。

補充：

• 路由的復用問題：當路由跳轉時，會復用沒有發生變化的組件。
• 沒有說的內容：通配路由、匹配優先級、路由組件傳參、重定向和別名。
• 一些路由的進階知識也沒講，如果你覺得上面的路由知識不夠用，也可以上官網看一下。vue-router

vuex

• [官網的話:]Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
• [小菜鳥的話:]vuex可以用來存儲多個組件之間需要共享的數據，并且能夠以一種方式來提醒其他組件某個數據發生了變化。有些數據獲取了之后應該是在所有組件里面都共享的。比如某些應用中的“城市”這個數據，當選定了城市后，后面的組件的渲染都應該知道選定的城市是什么。

• Vuex由Actions,Mutations,State組成。
  • Actions負責數據的處理，
  • Mutations負責數據修改，
  • State負責數據存儲。
• 組件想要提交數據到Actions,要使用dispatch;
• Action要提交數據到Mutations,要使用commit。

開啟vuex并創建store

1.首先進行安裝：npm install vuex --save
2.然后聲明使用vuex，并創建一個store:
【對于大型應用，我們會希望把 Vuex 相關代碼分割到模塊中。所以下面的代碼寫在src/store/index.js中（請手動新建）】

import Vue from 'vue'
import Vuex from 'vuex'
// 1. 在srcstoreindex.js中聲明使用vuex
Vue.use(Vuex)
// 2.新建一個store,用來存儲數據
export default new Vuex.Store({
  state: { // store里面的state用來存儲數據，數據以鍵值對形式存儲
    global_info: 'global_info_msg'
  }
})

3.在根實例中使用store:

使用vuex

上面創建store的時候存儲了一個數據進去，下面講一下怎么操作這個數據。

獲取數據

【由于在根實例中使用了store，所以所有的子實例都會有store，我們可以使用this.$store.state.數據名來獲取數據】

改變數據

改變store中的數據有兩種方法，一種是actions->mutations->state;一種是mutations->state。
1.通過actions來改變數據：
首先派發action給actions，使用this.$store.dispatch(action名,參數)來派發action【派發action給actions之后，actions會調用action來處理數據】

定義action如何處理數據，然后使用commit(mutation名, 參數)把數據提交給mutations：

定義mutation修改哪個數據，利用賦值表達式賦值：

上面的修改數據的操作遵循了下圖的順序：

2.除了一步步來修改數據，還可以直接通過mutations來改變數據：this.$store.commit(mutation名,參數)，這時候我們只需要定義一個mutations即可。

項目結構

• 對于大型應用，我們會希望把 Vuex 相關代碼分割到模塊中。
• 我們可能會有多次進行上面的store中的數據操作，那么這意味著我們需要寫多幾個action和mutation,如果把這些action和mutation都寫在index.js是很贅余的，我們通常把action的內容寫到actions.js中，把mutations的內容寫到mutations.js中。
  
  actions.js的內容可以類似這樣來寫：
  
  然后在index.js中導入：
  
  mutations.js的內容可以參考上面action.js的方式來寫。

補充：

• 想了解更多，可以查看官網的vuex的文檔：https://vuex.vuejs.org/zh/