摘要：目前專注前端圖片優(yōu)化與新技術(shù)的探研。還有一點(diǎn)必須要知道的是，是國(guó)人寫(xiě)的，技術(shù)文檔也妥妥的是中文，想到這我就有學(xué)習(xí)的動(dòng)力。注意到，等都是頁(yè)面也可以是組件，接著注冊(cè)路由器，然后開(kāi)始配置路由。

歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

本文由蔡述雄發(fā)表于云+社區(qū)專欄
蔡述雄，現(xiàn)騰訊用戶體驗(yàn)設(shè)計(jì)部QQ空間高級(jí)UI工程師。智圖圖片優(yōu)化系統(tǒng)首席工程師，曾參與《眾妙之門(mén)》書(shū)籍的翻譯工作。目前專注前端圖片優(yōu)化與新技術(shù)的探研。

2016年，乃至接下來(lái)整個(gè)2017年，如果你要問(wèn)前端技術(shù)框架什么最火，那無(wú)疑就是前端三巨頭：React、Angular、Vue。沒(méi)錯(cuò)，什么jQuery，seaJs，gulp等都逐漸脫離了熱點(diǎn)。面試的時(shí)候不吹上一點(diǎn)新技術(shù)，好像自己就不是搞前端的似的。當(dāng)然，希望大家都是抱著好學(xué)的心來(lái)開(kāi)始一門(mén)學(xué)藝的，不管怎樣，求求你，請(qǐng)接著看下去吧~

本系列文將會(huì)通過(guò)很多一目了然的例子和一個(gè)實(shí)戰(zhàn)項(xiàng)目——組件庫(kù)，來(lái)幫助大家學(xué)習(xí)Vue，一步一步來(lái)，畢竟這篇文章還有接下來(lái)的【升學(xué)篇】和【結(jié)業(yè)篇】呢。

不管你想不想了解，你只需要大概知道，Vue就是和jQuery一樣是一個(gè)前端框架，它的中心思想就是數(shù)據(jù)驅(qū)動(dòng)，像遠(yuǎn)古時(shí)代的老前輩jQuery是結(jié)構(gòu)驅(qū)動(dòng)，什么意思呢，以前我們寫(xiě)代碼時(shí)常用$(".dom").text("我把值改變了")，這種寫(xiě)法先要獲得結(jié)構(gòu)，然后再修改數(shù)據(jù)更新結(jié)構(gòu)，而Vue的做法直接就是this.msg="我改變了"，然后msg就會(huì)同步到某個(gè)結(jié)構(gòu)上，視圖管理抽象為數(shù)據(jù)管理，而不是管理dom結(jié)構(gòu)了。不懂沒(méi)關(guān)系，慢慢來(lái)。

還有一點(diǎn)必須要知道的是，Vue是國(guó)人寫(xiě)的，技術(shù)文檔也妥妥的是中文，想到這我就有學(xué)習(xí)的動(dòng)力。

工欲善其事必先利其器，我們的學(xué)習(xí)計(jì)劃從學(xué)會(huì)搭建Vue所需要的環(huán)境開(kāi)始，node和npm的環(huán)境不用說(shuō)是必須的，現(xiàn)在前端流程化很熱門(mén)，基本上新的技術(shù)都會(huì)在這套流程的基礎(chǔ)上做開(kāi)發(fā)，我們只需要站在巨人的XX上裝*就可以了。我假設(shè)你的機(jī)子上已經(jīng)有了最新的node和npm了，那我們就只需要執(zhí)行以下命令：

$ npm install -g vue-cli

構(gòu)建完了之后，隨便進(jìn)入一個(gè)我們事先準(zhǔn)備好的目錄，比如demo目錄，然后在目錄中做初始化操作：

$ vue init webpack myProject

webpack參數(shù)是指myProject這個(gè)項(xiàng)目將會(huì)在開(kāi)發(fā)和完成階段幫你自動(dòng)打包代碼，比如將js文件統(tǒng)一合成一個(gè)文件，將CSS文件統(tǒng)一合并壓縮等。要是不知道webpack的話，建議先了解下為好，當(dāng)然不了解也不影響我們接著往下走。

init的過(guò)程中會(huì)問(wèn)你給項(xiàng)目定義一些描述，版本之類的信息，可以不管，一直輸入y確定跳過(guò)，完成之后出現(xiàn)以下界面，紅框部分會(huì)提示你接下來(lái)要做的操作，按照它的提示繼續(xù)敲代碼就對(duì)了。

cd myProject
npm install
npm run dev

npm install 是安裝項(xiàng)目所需要的依賴，簡(jiǎn)單理解就是安裝一些必要的插件，需要等一段時(shí)間；

npm run dev 是開(kāi)始執(zhí)行我們的項(xiàng)目了，一旦執(zhí)行這個(gè)命令之后，等一小會(huì)，瀏覽器應(yīng)該會(huì)自動(dòng)幫你打開(kāi)一個(gè)tab為http://localhost:8080/#/的鏈接，這個(gè)鏈接就是我們本地開(kāi)發(fā)的項(xiàng)目主頁(yè)了，如果沒(méi)有，說(shuō)明出錯(cuò)了。請(qǐng)移步到評(píng)論區(qū)回復(fù)吧。。。

(PS：開(kāi)發(fā)完成后執(zhí)行npm run build會(huì)編譯我們的源代碼生成最終的發(fā)布代碼，在dist目錄下)

看看Vue都給我們生成一些什么文件，這其中我們需要關(guān)注的是以下文件

package.json保存一些依賴信息，config保存一些項(xiàng)目初始化配置，build里面保存一些webpack的初始化配置，index.html是我們的首頁(yè)，除了這些，最關(guān)鍵的代碼都在src目錄中，index在很多服務(wù)器語(yǔ)言中都是預(yù)設(shè)為首頁(yè)，像index.htm，index.php等；打開(kāi)build目錄中的webpack.base.conf.js，會(huì)看到這樣的代碼

說(shuō)明我們的入口js文件在src目錄中的main.js，接下來(lái)我們就分析下這些初始化代碼先；

Vue的核心架構(gòu)，按照官方解釋和個(gè)人理解，主要在于組件和路由兩大模塊，只要理解了這兩大模塊的思想內(nèi)容，剩下API使用就只是分分鐘的事情了。所以在我的系列文中，會(huì)圍繞組件和路由教大家開(kāi)發(fā)一個(gè)前端組件庫(kù)，這個(gè)過(guò)程也是我個(gè)人學(xué)習(xí)的練手項(xiàng)目，個(gè)人覺(jué)得一步步做下來(lái)之后，對(duì)Vue的理解就可以算是出師了，勝過(guò)讀10遍書(shū)籍文檔，那是后話了，先讓我們看看最基本的Vue生成的默認(rèn)代碼吧！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue"
import App from "./App"
import router from "./router"

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  template: "",
  components: { App }
})

先是第一句

import Vue from "vue"

這句很好理解，就像你要引入jQuery一樣，vue就是jquery-min.js，然后Vue就是$；然后又引入了./App文件，也就是目錄中和main.js同級(jí)的App.vue文件；在Vue中引入文件可以直接用import，文件后綴名可以是.vue，這是Vue自己的文件類型，之前說(shuō)的webpack會(huì)將js和css文件打包，同樣的道理，在webpack中配置vue插件后（項(xiàng)目默認(rèn)配置），webpack就可以將.vue類型的文件整合打包，這和nodeJs中require差不多的道理。

說(shuō)回App.vue這個(gè)文件，這是一個(gè)視圖（或者說(shuō)組件和頁(yè)面），想象一下我們的index.html中什么也沒(méi)有，只有一個(gè)視圖，這個(gè)視圖相當(dāng)于一個(gè)容器，然后我們往這個(gè)容器中放各種各樣的積木（其他組件或者其他頁(yè)面），App.vue中的內(nèi)容我們后面說(shuō)；

import router from "./router"

這句代碼引入一段路由配置，同樣的后邊說(shuō)（很快就說(shuō)到的不用急）

接下來(lái)的 new Vue實(shí)例化，其實(shí)就相當(dāng)于平時(shí)我們寫(xiě)js時(shí)候常用的init啦，然后聲明el："#app"，意思是將所有視圖放在id值為app這個(gè)dom元素中，components表明引入的文件，即上述的App.vue文件，這個(gè)文件的內(nèi)容將以這樣的標(biāo)簽寫(xiě)進(jìn)去#app中，總的來(lái)說(shuō)，這段代碼意思就是將App.vue放到#app中，然后以來(lái)指代我們的#app。

import Vue from "vue"
import App from "./App"/*引入App這個(gè)組件*/
import router from "./router"/*引入路由配置*/

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",/*最后效果將會(huì)替換頁(yè)面中id為app的div元素*/
  router,/*使用路由*/
  template: "",/*告知頁(yè)面這個(gè)組件用這樣的標(biāo)簽來(lái)包裹著,并且使用它*/
  components: { App }/*告知當(dāng)前頁(yè)面想使用App這個(gè)組件*/
})

好了，現(xiàn)在打開(kāi)我們的App.vue文件，在Vue中，官網(wǎng)叫它做組件，單頁(yè)面的意思是結(jié)構(gòu)，樣式，邏輯代碼都寫(xiě)在同一個(gè)文件中，當(dāng)我們引入這個(gè)文件后，就相當(dāng)于引入對(duì)應(yīng)的結(jié)構(gòu)、樣式和JS代碼，這不就是我們做前端組件化最想看到的嗎，從前的asp、php也有這樣的文件思想。

node端之所以能識(shí)別.vue文件，是因?yàn)榍懊嬲f(shuō)的webpack在編譯時(shí)將.vue文件中的html，js，css都抽出來(lái)合成新的多帶帶的文件。

單頁(yè)面組件會(huì)在后面的實(shí)戰(zhàn)中完整體現(xiàn)，這里先不做過(guò)多描述；

看到我們文件內(nèi)分為三大部分，分別是