上一篇文章?http://www.itdecent.cn/p/674e75b41642?介紹了項(xiàng)目里文件夾的作用分類和作用，這次主要說(shuō)明 src 文件夾里具體的文件分類和內(nèi)容。

先上 src 文件夾的結(jié)構(gòu)圖：

src

App.vue: 根組件，pages 里的組件會(huì)被插入此組件中，此組件再插入 index.html 文件里，形成單頁(yè)面應(yīng)用

根組件里面是這樣子的：

App.vue

其中，<router-view>?組件是一個(gè) functional 組件，渲染路徑匹配到的視圖組件。渲染的組件還可以內(nèi)嵌自己的，根據(jù)嵌套路徑，渲染嵌套組件。這樣，就實(shí)現(xiàn)了單頁(yè)面下，根據(jù)不同路由，渲染不同組件的目的。

基本上根組件沒(méi)什么交互要做，底部的樣式其實(shí)也可以放在全局的樣式表里。

main.js: 入口 js 文件，影響全局，作用是引入全局使用的庫(kù)、公共的樣式和方法、設(shè)置路由等。

這個(gè)是負(fù)責(zé)配置影響全局的內(nèi)容的文件，具體會(huì)有以下幾種作用：

????1、引入vue 以及相關(guān)的庫(kù)

? ??import Vue from 'vue'? //引入 vue

????import store from './store'? //引入 vuex

????import router from './router';? //引入路由配置文件

????import App from './App'? //引入根組件

? ??2、引入需要用到的第三方庫(kù)

????// 引入element-ui

????import ElementUI from 'element-ui';

????import 'element-ui/lib/theme-default/index.css';

????Vue.use(ElementUI);

????// 引入字體圖標(biāo)樣式，這里使用了阿里媽媽的 iconfont 字體庫(kù)

????import '@assets/iconfont/iconfont.css';

????import '@assets/iconfont/iconfont.js';

????// 引入copy 信息組件

????import VueClipboards from 'vue-clipboards';

????Vue.use(VueClipboards);

????// 引入 axios 庫(kù)

????import axios from 'axios'

????// 引入 d3 圖形庫(kù)

????import * as d3 from 'd3'

????// 引入國(guó)際化的庫(kù)

????import VueI18n from 'vue-i18n';

????Vue.use(VueI18n);

????//引入自定義的 json 格式中英文對(duì)照文件

????import zh from '@assets/lang/zh-CN'

????import en from '@assets/lang/en-US'

????Vue.config.lang = 'zh-cn'? //設(shè)置默認(rèn)中文

????Vue.locale('zh-cn', zh)

????Vue.locale('en', en)

????// 引入時(shí)間轉(zhuǎn)換模塊

????import moment from 'moment';

????moment.locale('zh-cn');

????Vue.prototype.$moment = moment;? //將 moment 模塊轉(zhuǎn)換成 Vue 的原型方法，在組件里可以直接使用 this.$moment(time)

????// 引入圖表

????import ECharts from 'vue-echarts';

????Vue.component('chart', ECharts);? //注冊(cè) Echarts 成為全局組件，在組件里可以直接調(diào)用 <chart></chart>

? ??3、引入自定義的庫(kù)

????// 引入銀行卡圖標(biāo)樣式

????import '@assets/icon-bank/iconfont.js';? // iconfont 上收集的銀行卡圖標(biāo)

????// 引入自定義的http模塊

????import { AjaxApi } from '@http/AjaxApi.js';? //http 文件夾里自定義的處理 api 接口的文件，導(dǎo)出一個(gè)包含所有與后臺(tái)接口交流的函數(shù)的對(duì)象

????Vue.prototype.$axios = AjaxApi;? //加入 Vue 原型方法，組件里通過(guò) this.$axios.xxx() 調(diào)用

????// 引入公共方法

????import commonMixins from '@mixins/common-mixins.js';? //mixins 文件夾里自定義的通用函數(shù)的集合

????Vue.mixin(commonMixins);? //全局注冊(cè)混合

? ??4、引入自定義的公共樣式，使得組件內(nèi)可以用scoped定義自身的樣式

????// 引入公共樣式以及修改過(guò)的 element 樣式

????import '@assets/css/common.less'

????import '@assets/css/theme.less'

? ??5、定義一些簡(jiǎn)短的不需要單獨(dú)引入的修改

????// 在html5 history 模式下，在form表單的組件(input輸入框等)里點(diǎn)擊enter，會(huì)自動(dòng)將表單數(shù)據(jù)以get的方式發(fā)送到后臺(tái)，需要阻止默認(rèn)事件

????document.onkeydown = function(e) {

????????var e = e || event;

????????if(e.keyCode == 13) {

????????????????e.preventDefault ? e.preventDefault() : (e.returnValue = false);

????????}

? ? }；

????// 格式化金額，每三位加逗號(hào)，可選保留幾位小數(shù)

????Number.prototype.format = function(n, x) {

????????var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';

????????return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');

????};

????6、設(shè)置vue的全局配置，在啟動(dòng)應(yīng)用前應(yīng)用

????Vue.config.productionTip = false;? // 阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示

????7、指定渲染的文件

????new Vue({

????????el: '#app',

????????template: '<App/>' ,

????????router,

????????store,

????????components: { App }

????})

assets: 放置靜態(tài)資源，包括公共的 css 文件、 js 文件、iconfont 字體文件、img 圖片文件以及其他資源類文件。

結(jié)構(gòu)如下：

assets

css 文件夾里會(huì)有重置 css 樣式的文件以及其他全局樣式文件。

js 文件夾里放置了包含銀行字典和全國(guó)省市的字典文件，在組件里引用之后遍歷獲取數(shù)據(jù)。

components: 放置通用模塊組件。項(xiàng)目里總會(huì)有一些復(fù)用的組件，例如彈出框、發(fā)送手機(jī)驗(yàn)證碼、圖片上傳等，將它們作為通用組件，避免重復(fù)工作；

結(jié)構(gòu)如下：

components

可以根據(jù)功能模塊建立文件夾，放置本功能會(huì)用到的通用組件。例如 login 文件夾里可以放置注冊(cè)、登錄、重置密碼這幾個(gè)功能會(huì)用的共同模塊文件（賬號(hào)、密碼、圖形驗(yàn)證碼、短信驗(yàn)證碼）； account-center 文件夾放置修改賬號(hào)相關(guān)的模塊。

全局通用的公共模塊可以不需要建立文件夾。

http: 放置與后臺(tái) api 相關(guān)的文件。這里面有 axios 庫(kù)的實(shí)例配置文件、使用配置的 axios 實(shí)例接入 api 獲取數(shù)據(jù)的函數(shù)的集合的文件；

結(jié)構(gòu)如下：

http

config.js 是根據(jù)項(xiàng)目需求配置的 axios 實(shí)例文件，通過(guò) axios.create([config]) 創(chuàng)建，可以配置諸如指定成功的狀態(tài)碼、序列化 params、設(shè)置 headers 、修改 token 、設(shè)置全局請(qǐng)求/響應(yīng)攔截器、設(shè)置 baseURL 等。

AjaxApi.js 是通過(guò)導(dǎo)入 config.js 實(shí)例，傳入 API 和其他參數(shù)，給每個(gè) API 配置一個(gè)專屬函數(shù)，再集合導(dǎo)出成對(duì)象的文件。例子如下：

AjaxApi

mixins: 放置混合選項(xiàng)的文件。具體來(lái)說(shuō)，相當(dāng)于是公用函數(shù)的集合，在組件中引用時(shí)，可以作用于組件而不必書(shū)寫(xiě)重復(fù)的方法

實(shí)際上相當(dāng)于是沒(méi)有 <template/> 和 <style/> 的組件，例子如下：

mixins

pages: 放置主要頁(yè)面的組件。例如登錄頁(yè)、用戶信息頁(yè)等。通常是這里的組件本身寫(xiě)入一些結(jié)構(gòu)，再引入通用模塊組件，形成完整的頁(yè)面

這里面就是會(huì)被插入根組件的 <router-view/> 節(jié)點(diǎn)里的文件，根據(jù)路由變化，根組件渲染不同的文件。

router: 放置路由設(shè)置文件，指定路由對(duì)應(yīng)的組件

結(jié)構(gòu)如下：

import Vue from 'vue';

import Router from 'vue-router';

import Tab from '@pages/tab';

import { MessageBox } from 'element-ui';

Vue.use(Router);

const router = new Router({? //新建路由

????routes: [

????????{

????????????path: '/',

????????????redirect: '/signin'? //重定向路由

????????},

????????{

????????????path: '/signin',

????????????name: 'signIn',? //命名路由

????????????component: (resolve) => {? //按需加載

????????????????require(['@pages/sign-in'], resolve);

? ? ? ? ? ? ? }

? ? ? ? ? },

????????{

? ? ? ? ? ? path: '/signup',

????????????name: 'signUp',

????????????component: (resolve) => {

????????????????require(['@pages/sign-up'], resolve);

????????????????}

????????????},

????????????{

????????????????path: '/tab',

????????????????component: Tab,

????????????????children: [? //嵌套路由

????????????????????{

????????????????????????path: 'index',

????????????????????????name: 'index',

????????????????????????component: (resolve) => {

????????????????????????require(['@pages/index'], resolve);

????????????????????????}

????????????????????}

????????????????]

????????????}

????????]

????});

router.beforeEach((to, from, next) => {? //檢測(cè) token ，跳轉(zhuǎn)登錄頁(yè)

? ? if (checkPathRequiredAuth(to.path) && !sessionStorage.token) {

????????sessionStorage.clear();

????????MessageBox({

????????????title: '跳轉(zhuǎn)提示',

????????????message: '用戶認(rèn)證已過(guò)期或不存在，確認(rèn)后跳轉(zhuǎn)到登錄頁(yè)',

????????????confirmButtonText: '確定',

????????????type: 'warning',

????????????callback: action => {

????????????????next({

????????????????????path: '/signin'

????????????????});

????????????}

????????});

????} else {

????????next();

????}

});

export default router;

store: 放置 vuex 需要的狀態(tài)關(guān)聯(lián)文件，設(shè)置公共的 state、mutations 等

結(jié)構(gòu)如下：

store

根據(jù)需要，可以加上 getter.js 或者將 store 分割成 modules ， 在每個(gè) modules 文件夾里創(chuàng)建對(duì)應(yīng)的 js 文件。

下次會(huì)總結(jié)項(xiàng)目里的到的經(jīng)驗(yàn)，怎樣解決問(wèn)題之類的。