vue項目實戰(zhàn)總結(jié)篇
這篇文章把小編前段時間做的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)文章
詳解vue中使用express+fetch獲取本地json文件
本篇文章主要介紹了詳解vue中使用express+fetch獲取本地json文件,非常具有實用價值,需要的朋友可以參考下2017-10-10Vue異步請求導(dǎo)致頁面數(shù)據(jù)渲染錯誤問題解決方法示例
這篇文章主要為大家介紹了Vue中異步請求導(dǎo)致頁面數(shù)據(jù)渲染錯誤問題解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09詳解vue的數(shù)據(jù)劫持以及操作數(shù)組的坑
這篇文章主要介紹了vue的數(shù)據(jù)劫持以及操作數(shù)組的坑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue3?+?async-validator實現(xiàn)表單驗證的示例代碼
表單驗證可以有效的過濾不合格的數(shù)據(jù),減少服務(wù)器的開銷,并提升用戶的使用體驗,今天我們使用?vue3?來做一個表單驗證的例子,需要的朋友跟隨小編一起學(xué)習(xí)下吧2022-06-06el-checkbox-group?的v-model無法綁定對象數(shù)組的問題解決
elementUI官方文檔中el-checkbox-group組件綁定的都為一維數(shù)組,本文主要介紹了解決el-checkbox-group?的v-model無法綁定對象數(shù)組,感興趣的可以了解一下2023-05-05