vue項目實戰總結

立刻過年了，最近工做不太忙，再加上本人最近比較懶，毫無鬥志，不肯學習新東西，或許是要過年的緣故(感受像是在找接口)。

就把前一段時間作過的vue項目，進行一次完整的總結。

此次算是詳細總結，會從項目的搭建，一直到最後的服務器上部署。

廢話很少說了。乾貨直接上。

1、   必須node環境,   此次就不寫node環境的安裝了。過兩天我會寫個node環境的安裝隨筆。

2、  node環境配好後。開整vue。

1. 安裝vue腳手架。

　　npm install -g vue-cli

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

　　vue init webpack-simple (項目名字)

　　或

　　vue init webpack (項目名字)

　　兩者區別(我的理解)：

　　　　vue init webpack-simple  :能夠理解爲輕巧的，沒有多餘的配置和包，但能保證項目正常運行。

　　　　vue init webpack :  能夠理解爲完整的，包含比較多配置和包。

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

　　(1)  執行完vue init webpack，會碰見如下選項。

 

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

　(2)  進入剛建的項目裏，執行npm install 

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

　　當 出現下面的話，就證實你的vue項目已經搭好了。

　

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

　　　　當出現下面這個頁面，說明vue項目正常運行了。框架已搭好。

　　

　　(4) 骨架已搭好，如今給她血與肉，讓她不在骨感。

　　　　此次咱們用 axios 進行向服務器請求

　　　　　　　　　 vuex 來管理咱們的前端數據。

　　咱們須要首先安裝這兩個依賴包，按套路走 ： npm install  axios vuex --save

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

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

 　　　　--save： 上線後，要用到的。（執行後，會對應下圖中dependencies）

　　　　--save-de： 開發時，要用到的包.（執行後，會對應下圖中devDependencies）

　　 　 

　　

　　此處，我也有個問題： 安裝的依賴包，是放到 dependencies 中，仍是 devDependencies中？

　　在網上找了半天也沒有獲得確切答案，只是籠統的說「開發環境用到的包放在devDependencies， 上線用到的依賴包放在dependencies」。因此，我就按本身的理解來放了，vue、vuex、axios、vue-router，放在dependencies，其餘依賴包放在　　　　　　　　     　　devDependencies，　　個人依據就是默認生成框架時，vue、vue-router 會放在dependencies中，因此，我以爲跟vue項目密切相關的vuex、axios也放在dependencies（只是我的看法）。

 

　　(5) 依賴包已經安裝完，如今。咱們來配置 路由(router) 和 數據管理倉庫(store)

　　　　 爲了開發的規範和整潔，我把這兩塊兒，分別放在兩個文件夾中

　　　　

　  (6)　如今分別來說。先整 router(路由)。

　　

 

　　(7) 數據管理 ————倉庫(store)

　　這個建議先看看官網：https://vuex.vuejs.org/zh-cn/

　　在這裏我就給出細化的分類，以及大體流程圖。

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

　　                  

 

　　

　　index.js   負責管理 actions.js 和 moutations.js 

　　actions.js   至關於java，中的service層，至關因而接口。 (若是不熟悉java，你就認爲，actions.js的目的是，能夠認爲這是書的目錄。爲了讓項目整潔，一目瞭然，清楚閱覽actions.js ,每一個操存儲操做的目的 )

　　moutations.js   至關於java，中的dao層，與存取數據有關。(若是不熟悉java，你就認爲，moutations.js的目的是，存數據，把數據存到變量裏，保存起來)。

　　getters.js   就是獲取倉庫中數據的方法。 (目的是，把全部的獲取數據操做放在一塊兒。方便管理與查找)。

　　types.js  清楚代表，存數據時，actions.js 的方法 和 moutations.js 中的方法， 一對一對應。這樣條理清晰。 

　　大體給出了 actions.js 、 motations 、 getters 三者之間的關係。

　　

 

　　(8)  vue 中模擬數據。

　　vue中模擬數據的意義： 當本地測試時，方法會訪問模擬數據，當項目上線後，當調用方法時，會直接訪‘「.do」請求，問服務器，回去數據庫返回的數據。

　　在vue項目中的建立mock數據： 在static中建立mock文件夾以及config.js以下圖

　　

　　vue項目中如何配置mock數據，以及上線後的請求： 

　　最近作vue項目時，遇到了一個問題，模擬數據時，如何配置mock中的json數據。

　　舊的vue腳手架中是經過 dev-server.js 來配置mock數據的。         

 

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

 

找到webpack.dev.conf,js，並進行以下配置。

 

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

　　會在項目中，生成包。以下圖：

 

 (10). 把生成的項目打到服務器上，須要注意路徑問題

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

 

　　

 

　　到目前爲止，vue相關的問題，大體整完了。

　　若是看到的朋友，有何疑問，咱們能夠一塊兒探討。

　　此刻已經是20180209   17:47，今天放假。我也準備關閉電腦。

　　看到同事們已經下班。有的拎着行李趕火車，回家過年了。你們都是滿臉喜悅，不管咱們是少年、仍是中年、暮年，團聚與回家的喜悅，都是發自心裏，臉上是遮不住的............