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

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

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

文件及文件夾作用 App.vue

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

根組件里面是這樣子的：

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

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

main.js

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

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

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

import Vue from "vue"  //引入 vue

import store from "./store"  //引入 vuex

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

import App from "./App"  //引入根組件

2、 引入需要用到的第三方庫（注意注冊使用方式的區(qū)別）

// 引入element-ui

import ElementUI from "element-ui";

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

Vue.use(ElementUI);

// 引入字體圖標樣式，這里使用了阿里媽媽的 iconfont 字體庫

import "@assets/iconfont/iconfont.css";

import "@assets/iconfont/iconfont.js";

// 引入copy 信息組件

import VueClipboards from "vue-clipboards";

Vue.use(VueClipboards);

// 引入 axios 庫

import axios from "axios"

// 引入 d3 圖形庫

import * as d3 from "d3"

// 引入國際化的庫

import VueI18n from "vue-i18n";

Vue.use(VueI18n);

//引入自定義的 json 格式中英文對照文件

import zh from "@assets/lang/zh-CN"

import en from "@assets/lang/en-US"

Vue.config.lang = "zh-cn"  //設(shè)置默認中文

Vue.locale("zh-cn", zh)

Vue.locale("en", en)

// 引入時間轉(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);  //注冊 Echarts 成為全局組件，在組件里可以直接調(diào)用     

3、 引入自定義的庫

// 引入銀行卡圖標樣式

import "@assets/icon-bank/iconfont.js";  // iconfont 上收集的銀行卡圖標

// 引入自定義的http模塊

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

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

// 引入公共方法

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

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

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

// 引入公共樣式以及修改過的 element 樣式

import "@assets/css/common.less"

import "@assets/css/theme.less"

5、 定義一些簡短的不需要多帶帶引入的全局修改

 // 在html5 history 模式下，在form表單的組件(input輸入框等)里點擊enter，會自動將表單數(shù)據(jù)以get的方式發(fā)送到后臺，需要阻止默認事件

document.onkeydown = function(e) {

    var e = e || event;

    if(e.keyCode == 13) {

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

    }

}；

// 格式化金額，每三位加逗號，可選保留幾位小數(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的全局配置，在啟動應(yīng)用前應(yīng)用

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

7、 指定渲染的文件

 new Vue({

    el: "#app",

    template: "" ,

    router,

    store,

    components: { App }

})

assets 文件夾

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

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

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

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

components 文件夾

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

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

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

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

http 文件夾

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

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

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

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

mixins 文件夾

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

個人認為，相當(dāng)于是沒有