這篇文章把小編前段時(shí)間做的vue項(xiàng)目，做個(gè)完整的總結(jié)，具體內(nèi)容請參考本文。

這次算是詳細(xì)總結(jié)，會從項(xiàng)目的搭建，一直到最后的服務(wù)器上部署。

廢話不多說了。干貨直接上。

一、 必須node環(huán)境, 這次就不寫node環(huán)境的安裝了。過兩天我會寫個(gè)node環(huán)境的安裝隨筆。

二、 node環(huán)境配好后。開整vue。

1. 安裝vue腳手架。

　npm install -g vue-cli

2. 用腳手架搭項(xiàng)目(只是一行命令)　

　vue init webpack-simple (項(xiàng)目名字)

　　或　

　vue init webpack (項(xiàng)目名字)

　　二者區(qū)別(個(gè)人理解)：

　　　　vue init webpack-simple :可以理解為輕巧的，沒有多余的配置和包，但能保證項(xiàng)目正常運(yùn)行。

　　　　vue init webpack : 可以理解為完整的，包含比較多配置和包。

3. 本次選用 vue init webpack 完整版的。

　　(1) 執(zhí)行完vue init webpack，會遇見以下選項(xiàng)。

　完成上述選(按需選擇)，等把所需依賴下載完后。

　(2) 進(jìn)入剛建的項(xiàng)目里，執(zhí)行npm install

　　eg: PS E:\vueTest\vueTest2> npm run dev

　　當(dāng) 出現(xiàn)下面的話，就證明你的vue項(xiàng)目已經(jīng)搭好了。

　(3) 打開瀏覽器，訪問http://localhost:8080，

　　　　當(dāng)出現(xiàn)下面這個(gè)頁面，說明vue項(xiàng)目正常運(yùn)行了?？蚣芤汛詈谩?/p>

　　(4) 骨架已搭好，現(xiàn)在給她血與肉，讓她不在骨感。

　　　　這次我們用 axios 進(jìn)行向服務(wù)器請求

　　　　　　　　　 vuex 來管理我們的前端數(shù)據(jù)。

　　我們需要首先安裝這兩個(gè)依賴包，按套路走 ： npm install axios vuex --save

　　　　在此我做個(gè)補(bǔ)充，安裝依賴包時(shí)，會使用到 --save-dev 或 --save

　　　　安裝的依賴包會在項(xiàng)目中這個(gè)文件package.json中展示

　　　　--save： 上線后，要用到的。（執(zhí)行后，會對應(yīng)下圖中dependencies）

　　　　--save-de： 開發(fā)時(shí)，要用到的包.（執(zhí)行后，會對應(yīng)下圖中devDependencies）　　　

　　此處，我也有個(gè)問題： 安裝的依賴包，是放到dependencies 中，還是devDependencies中？

　　在網(wǎng)上找了半天也沒有得到確切答案，只是籠統(tǒng)的說“開發(fā)環(huán)境用到的包放在devDependencies， 上線用到的依賴包放在dependencies”。所以，我就按自己的理解來放了，vue、vuex、axios、vue-router，放在dependencies，其他依賴包放在　　　　　　　　 　　devDependencies，　　我的依據(jù)就是默認(rèn)生成框架時(shí)，vue、vue-router 會放在dependencies中，所以，我覺得跟vue項(xiàng)目密切相關(guān)的vuex、axios也放在dependencies（只是個(gè)人見解）。

　　(5) 依賴包已經(jīng)安裝完，現(xiàn)在。我們來配置 路由(router) 和 數(shù)據(jù)管理倉庫(store)

　　　　為了開發(fā)的規(guī)范和整潔，我把這兩塊兒，分別放在兩個(gè)文件夾中

　 (6)　現(xiàn)在分別來講。先整 router(路由)。

　　(7) 數(shù)據(jù)管理 ————倉庫(store)

　　這個(gè)建議先看看官網(wǎng)： https://vuex.vuejs.org/zh-cn/

　　在這里我就給出細(xì)化的分類，以及大致流程圖。

　　在此store文件夾下的js截圖：actions.js、 moutations.js、 index.js、 types.js、 getters.js

　　　　index.js 負(fù)責(zé)管理 actions.js 和 moutations.js

　　actions.js 相當(dāng)于java，中的service層，相當(dāng)于是接口。 (如果不熟悉java，你就認(rèn)為，actions.js的目的是，可以認(rèn)為這是書的目錄。為了讓項(xiàng)目整潔，一目了然，清楚閱覽actions.js ,每個(gè)操存儲操作的目的 )

　　moutations.js 相當(dāng)于java，中的dao層，與存取數(shù)據(jù)有關(guān)。(如果不熟悉java，你就認(rèn)為，moutations.js的目的是，存數(shù)據(jù)，把數(shù)據(jù)存到變量里，保存起來)。

　　getters.js 就是獲取倉庫中數(shù)據(jù)的方法。 (目的是，把所有的獲取數(shù)據(jù)操作放在一起。方便管理與查找)。

　　types.js 清楚表明，存數(shù)據(jù)時(shí)，actions.js 的方法 和 moutations.js 中的方法， 一對一對應(yīng)。這樣條理清晰。

　　大致給出了actions.js 、 motations 、 getters 三者之間的關(guān)系。

　　(8) vue 中模擬數(shù)據(jù)。

　　vue中模擬數(shù)據(jù)的意義： 當(dāng)本地測試時(shí)，方法會訪問模擬數(shù)據(jù)，當(dāng)項(xiàng)目上線后，當(dāng)調(diào)用方法時(shí)，會直接訪‘“.do”請求，問服務(wù)器，回去數(shù)據(jù)庫返回的數(shù)據(jù)。

　　在vue項(xiàng)目中的創(chuàng)建mock數(shù)據(jù)： 在static中創(chuàng)建mock文件夾以及config.js如下圖

　　vue項(xiàng)目中如何配置mock數(shù)據(jù)，以及上線后的請求：

　　最近做vue項(xiàng)目時(shí)，遇到了一個(gè)問題，模擬數(shù)據(jù)時(shí)，如何配置mock中的json數(shù)據(jù)。

　　舊的vue腳手架中是通過 dev-server.js 來配置mock數(shù)據(jù)的。

但新的vue腳手架是下圖，沒有dev-server.js.這時(shí)mock數(shù)據(jù)怎么配置呢？ 答案是，mock配置放在 webpack.dev.conf.js中。

找到webpack.dev.conf,js，并進(jìn)行如下配置。

　(9). 項(xiàng)目完成后，打包命令是 npm run build.

　　會在項(xiàng)目中，生成包。如下圖：

(10). 把生成的項(xiàng)目打到服務(wù)器上，需要注意路徑問題

　　在項(xiàng)目中的config文件夾下的index.js 中assetsPublicPath，配置服務(wù)器路徑。(按需求配置，此處我就用默認(rèn)的了)

　　到目前為止，vue相關(guān)的問題，大致整完了。

最新評論