題前話:之前接手了我們公司的半成品Vue項(xiàng)目，由于自己不是做網(wǎng)頁前端的，自己初步看了下Vue相關(guān)東西，今天才算是把基本項(xiàng)目功能都完成了。這里記錄下初步學(xué)習(xí)Vue過程。

相關(guān)學(xué)習(xí)

Vue.js 基礎(chǔ)學(xué)習(xí)

Vue 官網(wǎng)，我們第一步就需要在官網(wǎng)了解和學(xué)習(xí)Vue基本知識(shí)面，并可以按照官網(wǎng)新建我們第一個(gè)Vue文件。

這里我簡單記錄了下我初步學(xué)習(xí)vue中用到比較多的屬性：

v-bind

縮寫：：

動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，或一個(gè)組件 prop 到表達(dá)式。
在綁定 class 或 style 特性時(shí)，支持其它類型的值，如數(shù)組或?qū)ο蟆？梢酝ㄟ^下面的教程鏈接查看詳情。
在綁定 prop 時(shí)，prop 必須在子組件中聲明?？梢杂眯揎椃付ú煌慕壎愋汀?br> 沒有參數(shù)時(shí)，可以綁定到一個(gè)包含鍵值對(duì)的對(duì)象。注意此時(shí) class 和 style 綁定不支持?jǐn)?shù)組和對(duì)象。

v-on

縮寫： @

綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。
用在普通元素上時(shí)，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時(shí)，也可以監(jiān)聽子組件觸發(fā)的自定義事件。
在監(jiān)聽原生 DOM 事件時(shí)，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語句，語句可以訪問一個(gè) event)"。
從 2.4.0 開始，v-on 同樣支持不帶參數(shù)綁定一個(gè)事件/監(jiān)聽器鍵值對(duì)的對(duì)象。注意當(dāng)使用對(duì)象語法時(shí)，是不支持任何修飾器的。

v-model

限制：

• <input>
• <select>
• <textarea>
• components

在表單控件或者組件上創(chuàng)建雙向綁定

slot-scope

用于將元素或組件表示為作用域插槽。特性的值應(yīng)該是可以出現(xiàn)在函數(shù)簽名的參數(shù)位置的合法的 JavaScript 表達(dá)式。這意味著在支持的環(huán)境中，你還可以在表達(dá)式中使用 ES2015 解構(gòu)。它在 2.5.0+ 中替代了 scope?？蓞⒖?a target="_blank">作用域插槽。已經(jīng)被v-slot代替掉了

基礎(chǔ)的vue知識(shí)學(xué)完之后，因?yàn)槲覀冃枰_發(fā)一個(gè)Vue項(xiàng)目，這里我們就需要用到下面的一個(gè)插件：

Vue CLI

Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)。在這里我們可以按照指導(dǎo)來搭建一個(gè)我們自己的項(xiàng)目了。

• 我們使用 npm install -g @vue/cli 下載這個(gè)工具，
• 使用vue create hello-world 命令創(chuàng)建一個(gè)項(xiàng)目
  或者通過 vue ui命令以圖形化界面創(chuàng)建和管理項(xiàng)目。

為了更好構(gòu)建單頁面應(yīng)用，控制不同頁面，我們需要下面路由插件：

Vue Router

Vue Router 是 Vue.js 官方的路由管理器，可以讓我們方便快捷管理界面。

為了更好的進(jìn)行數(shù)據(jù)監(jiān)控，我們也需要下面狀態(tài)管理器插件：

Vuex 基礎(chǔ)學(xué)習(xí)

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式.Vuex 通過 store 選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件“注入”到每一個(gè)子組件中（需調(diào)用 Vue.use(Vuex)）

vue開發(fā)中，需要用到各種功能，比如地址選擇器，商品列表啊，我們可以自己寫，但有些功能我們可以用比較完善的第三方vue組件庫：

vue手機(jī)端界面我主要用到:Vant

Vant 是有贊開源的一套基于 Vue 2.0 的 Mobile 組件庫。通過 Vant，可以快速搭建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。目前已有近 50 個(gè)組件，這些組件被廣泛使用于有贊的各個(gè)移動(dòng)端業(yè)務(wù)中。 Vant 旨在更快、更簡單地開發(fā)基于 Vue 的美觀易用的移動(dòng)站點(diǎn)

vue 電腦端我主要用到:Element

Element，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫

調(diào)試相關(guān)用到：vue-devtools

允許你在一個(gè)更友好的界面中審查和調(diào)試 Vue 應(yīng)用。可以顯示vue的數(shù)據(jù)結(jié)構(gòu)。
這個(gè)很方便快捷：

就我公司項(xiàng)目進(jìn)行簡單說明：

頁面管理 router

使用Vue Router 管理所有界面。
把所有頁面放到一個(gè).js文件中：
其實(shí)更好的方式是this.$router.addRoutes方式動(dòng)態(tài)注冊

頁面路由

數(shù)據(jù)狀態(tài)響應(yīng)

使用Vuex中的Getter和Mutation來進(jìn)行數(shù)據(jù)狀態(tài)管理。類似下面這種：

getters

Mutation

state

注冊綁定

界面?zhèn)髦?/h6>

界面?zhèn)髦滴一旧鲜褂?a target="_blank">Vue Router 的params和query屬性操作的。具體可參考vue $router 路由傳參的4種方法詳解

網(wǎng)絡(luò)請求

網(wǎng)絡(luò)請求這塊用了axios
對(duì)axios進(jìn)行了簡單封裝：

axios

最后我們需要使用命令 npm run build打包生成一個(gè)dist文件夾，然后把這個(gè)打包好的文件部署到服務(wù)器上即可。

寫著寫著感覺寫的有點(diǎn)亂了唉。。，最后實(shí)現(xiàn)的公司vue項(xiàng)目手機(jī)端效果如下：

手機(jī)端效果圖

電腦端效果圖