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

目錄

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

首發(fā)日期：2019-01-28
修改：

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

上節(jié)內(nèi)容回顧：

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

npm

介紹

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

安裝

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

常用命令：

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

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

補充：

• npm下載模塊的時候需要從服務器上下載，如果你嫌慢，可以考慮更換源，使用國內(nèi)的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能夠快速構(gòu)建一個vue的基礎項目出來】
2.使用腳手架來創(chuàng)建一個vue項目：vue init webpack my-project 【webpack是創(chuàng)建vue項目的方式，my-project是vue項目的名稱】

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

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

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

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

項目結(jié)構(gòu)分析

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

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

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

用法遷移

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

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

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

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

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

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

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

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

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

小提醒

ES6語法

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

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

知識補充

• 在import的時候，如果不寫后綴，會自動查找符合后綴的。順序是：.vue->.js->.json。import Hello from @/components/Hello
• 在上面使用了@,這是一個預定義的路徑，代表src目錄。這個預定義路徑是webpack給我們的。
• export,import,export default
• index.html中的id=app與App.vue中的id=app的區(qū)別：首先index.html里的app給vue找到了管理區(qū)域，然后在使用template的時候，會把index.html中的
  渲染成,然后再渲染成對應的組件的內(nèi)容。也就是說index.html里面的app提供了裝載點，App.vue提供了裝載的內(nèi)容?！救绻薷牧薃pp.vue里面的id，你會發(fā)現(xiàn)渲染成功后頁面的id會變?！俊径鵀榱耸褂煤胊pp這個實例，不要修改App.vue的id，不然裝載完內(nèi)容后，對應的管理區(qū)域會指向不明，而導致渲染失敗?！?/li>

單文件組件

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


2.定義組件的內(nèi)容

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

使用注意：

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

路由

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

開啟路由

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

定義路由

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

使用路由

數(shù)據(jù)顯示

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

路由跳轉(zhuǎn)

可以實現(xiàn)點擊后跳轉(zhuǎn)到指定路由的功能。
hello點擊后可以跳轉(zhuǎn)到/hello路由。

帶參路由

動態(tài)路徑參數(shù)

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

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

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

查詢參數(shù)

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

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

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

監(jiān)聽路由參數(shù)變化

如果想要監(jiān)聽路由參數(shù)變化，那么可以使用watch來監(jiān)聽。

嵌套路由

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

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

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

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

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

命名視圖

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

編程式路由

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

404路由

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

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

補充：

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

vuex

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

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

開啟vuex并創(chuàng)建store

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

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

3.在根實例中使用store:

使用vuex

上面創(chuàng)建store的時候存儲了一個數(shù)據(jù)進去，下面講一下怎么操作這個數(shù)據(jù)。

獲取數(shù)據(jù)

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

改變數(shù)據(jù)

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

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

定義mutation修改哪個數(shù)據(jù)，利用賦值表達式賦值：

上面的修改數(shù)據(jù)的操作遵循了下圖的順序：

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

項目結(jié)構(gòu)

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

補充：

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