一肃叶、項(xiàng)目目錄
這是一個(gè)web移動(dòng)端項(xiàng)目鸵赖，node+webpack+vue+mint-ui洽胶，目錄如下：
--build
--config
--node_modules
--src
--static
--test
.babelrc
.gitignore
index.html
karma.conf.js
package.json
README.md
build屈梁、config目錄下為一些環(huán)境配置祈坠，如webpack運(yùn)行叨咖、打包配置等
node_modules目錄下為一些依賴包瘩例，通過npm install命令下載package.json里的依賴包
src目錄下是我們寫的頁面，具體的下面分析
test目錄下為前端自動(dòng)化測(cè)試甸各，與項(xiàng)目功能無關(guān)垛贤，可忽略
.babelrc文件：使用Babel的第一步，就是配置這個(gè)文件趣倾。Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器聘惦，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行儒恋。
.gitignore文件：每個(gè)Git項(xiàng)目中都需要一個(gè)“.gitignore”文件善绎，這個(gè)文件的作用就是告訴Git哪些文件不需要添加到版本管理中。
index.html文件為項(xiàng)目主入口文件诫尽，該頁面實(shí)現(xiàn)了瀏覽器窗口寬度自適應(yīng)
karma.conf.js文件為前端測(cè)試配置文件禀酱，與項(xiàng)目功能無關(guān)，可忽略
package.json文件：每個(gè)項(xiàng)目的根目錄下面牧嫉，一般都有一個(gè)package.json文件剂跟，定義了這個(gè)項(xiàng)目所需要的各種模塊减途，以及項(xiàng)目的配置信息（比如名稱、版本曹洽、許可證等元數(shù)據(jù)）鳍置。npm install命令根據(jù)這個(gè)配置文件，自動(dòng)下載所需的模塊送淆，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境税产。
二、src目錄詳解
--api
--assets
--filters
--pages
--router
--utils
--vuex
App.vue
main.js
api目錄下前端頁面調(diào)用接口的api設(shè)置偷崩，es6引入axios辟拷，axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，
importaxiosfrom'axios';
letbase=BASE_API;
//get post
exportconstajax=function(url,params,isPost) {
if(isPost) {
returnaxios.post(`${base}${url}`,params)
}
else{
returnaxios.post(`${base}${url}`+urlEncode1(params))
}
//處理get參數(shù)
functionurlEncode(param,key,encode) {
if(param==null)return'';
letparamStr='';
lett=typeof(param);
if(t=='string'||t=='number'||t=='boolean') {
paramStr+='&'+key+'='+((encode==null||encode)环凿？encodeURIComponent(param):param);
}
else{
for(variinparam) {
vark=key==null?i:key+(paraminstanceofArray?'['+i+']':'.'+i);
paramStr+=urlEncode(param[i],k,encode);
}
}
returnparamStr;
}
functionurlEncode1(param,key,encode) {
if(param==null)return'';
letparamStr='';
for(letiinparam){
paramStr+='/'+param[i]
}
returnparamStr;
}
exportconstTradeCenter=params=>{returnajax('/trade/center',params,true) }
assets目錄下為一些公共樣式梧兼、圖片
filters目錄下為一些包含時(shí)間轉(zhuǎn)換方法的文件
pages目錄下為我們寫的頁面，我主要負(fù)責(zé)其中的UserCenter（個(gè)人中心）模塊
router目錄下為路由配置文件智听，頁面所有的跳轉(zhuǎn)路由配置都在該文件中
utils目錄下有兩個(gè)文件羽杰，一個(gè)為時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的函數(shù)文件，一個(gè)以網(wǎng)頁形式查看pdf格式文件
vuex目錄下是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式到推。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)考赛，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。包括以下3個(gè)文件：store莉测，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源颜骤；getters，以聲明方式將state映射到視圖捣卤；actions忍抽，響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化。簡單點(diǎn)說就是全局的狀態(tài)管理董朝，用戶在頁面觸發(fā)actions里面的方法從而調(diào)用store里的轉(zhuǎn)換特定狀態(tài)的方法鸠项，最后頁面通過getters里面的方法獲取已經(jīng)改變的狀態(tài)。
App.vue文件為頁面組件總?cè)肟?br>
main.js文件寫了一些配置子姜，引入了Vue祟绊、App、router哥捕、store牧抽、commonFilters、Vuex等遥赚，引入后可以頁面中直接使用扬舒，不需重復(fù)引入，此外還定義了axios.interceptors攔截器
