欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目實戰(zhàn)總結(jié)篇

 更新時間:2018年02月11日 11:15:46   作者:Smile磊磊  
離放假還有1天,今天小編抽空給大家分享前端時間小編做的vue項目,非常完整,需要的朋友參考下

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

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

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

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

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

1. 安裝vue腳手架。

 npm install -g vue-cli

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

 vue init webpack-simple (項目名字)

  或 

 vue init webpack (項目名字)

  二者區(qū)別(個人理解):

    vue init webpack-simple :可以理解為輕巧的,沒有多余的配置和包,但能保證項目正常運行。

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

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

  (1) 執(zhí)行完vue init webpack,會遇見以下選項。

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

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

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

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

 

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

    當(dāng)出現(xiàn)下面這個頁面,說明vue項目正常運行了??蚣芤汛詈?。

  

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

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

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

  我們需要首先安裝這兩個依賴包,按套路走 : npm install axios vuex --save

    在此我做個補充,安裝依賴包時,會使用到 --save-dev 或 --save

    安裝的依賴包會在項目中這個文件package.json中展示

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

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

  

  此處,我也有個問題: 安裝的依賴包,是放到dependencies 中,還是devDependencies中?

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

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

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

    

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

  

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

  這個建議先看看官網(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)為這是書的目錄。為了讓項目整潔,一目了然,清楚閱覽actions.js ,每個操存儲操作的目的 )

  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ù)時,actions.js 的方法 和 moutations.js 中的方法, 一對一對應(yīng)。這樣條理清晰。

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

  

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

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

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

  

  vue項目中如何配置mock數(shù)據(jù),以及上線后的請求:

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

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

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

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

 (9). 項目完成后,打包命令是 npm run build.

  會在項目中,生成包。如下圖:

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

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

  

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

相關(guān)文章

最新評論