摘要：入口文件，影響全局，作用是引入全局使用的庫(kù)公共的樣式和方法設(shè)置路由等。項(xiàng)目里總會(huì)有一些復(fù)用的組件，例如彈出框發(fā)送手機(jī)驗(yàn)證碼圖片上傳等，將它們作為通用組件，避免重復(fù)工作結(jié)構(gòu)如下可以根據(jù)功能模塊建立文件夾，放置本功能會(huì)用到的通用組件。

上一篇文章 https://segmentfault.com/a/11... 介紹了項(xiàng)目里文件夾的分類和作用，這次主要說(shuō)明 src 文件夾里具體的文件分類和內(nèi)容。

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

文件及文件夾作用 App.vue

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

根組件里面是這樣子的：

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

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

main.js

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ù)（注意注冊(cè)使用方式的區(qū)別）

// 引入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)用     

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)短的不需要多帶帶引入的全局修改

 // 在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: "" ,

    router,

    store,

    components: { App }

})

assets 文件夾

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

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

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

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

components 文件夾

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

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

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

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

http 文件夾

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

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

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ì)象的文件。例子如下：

mixins 文件夾

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

個(gè)人認(rèn)為，相當(dāng)于是沒(méi)有