第一个项目（1）---目录

一、项目目录

这是一个web移动端项目，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目录下为一些环境配置，如webpack运行、打包配置等

node_modules目录下为一些依赖包，通过npm install命令下载package.json里的依赖包

src目录下是我们写的页面，具体的下面分析

test目录下为前端自动化测试，与项目功能无关，可忽略

.babelrc文件：使用Babel的第一步，就是配置这个文件。Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

.gitignore文件：每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。

index.html文件为项目主入口文件，该页面实现了浏览器窗口宽度自适应

karma.conf.js文件为前端测试配置文件，与项目功能无关，可忽略

package.json文件：每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

二、src目录详解

--api

--assets

--filters

--pages

--router

--utils

--vuex

App.vue

main.js

api目录下前端页面调用接口的api设置，es6引入axios，axios 是一个基于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参数

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目录下为一些包含时间转换方法的文件

pages目录下为我们写的页面，我主要负责其中的UserCenter（个人中心）模块

router目录下为路由配置文件，页面所有的跳转路由配置都在该文件中

utils目录下有两个文件，一个为时间转换成标准格式的函数文件，一个以网页形式查看pdf格式文件

vuex目录下是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。包括以下3个文件：store，驱动应用的数据源；getters，以声明方式将state映射到视图；actions，响应在view上的用户输入导致的状态变化。简单点说就是全局的状态管理，用户在页面触发actions里面的方法从而调用store里的转换特定状态的方法，最后页面通过getters里面的方法获取已经改变的状态。

App.vue文件为页面组件总入口

main.js文件写了一些配置，引入了Vue、App、router、store、commonFilters、Vuex等，引入后可以页面中直接使用，不需重复引入，此外还定义了axios.interceptors拦截器