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

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

先上 src 文件夾的結構圖：

文件及文件夾作用 App.vue

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

根組件里面是這樣子的：

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

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

main.js

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

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

1、引入vue 以及相關的庫

import Vue from "vue"  //引入 vue

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

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

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

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

// 引入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"  //設置默認中文

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

Vue.locale("en", en)

// 引入時間轉換模塊

import moment from "moment";

moment.locale("zh-cn");

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

// 引入圖表

import ECharts from "vue-echarts";

Vue.component("chart", ECharts);  //注冊 Echarts 成為全局組件，在組件里可以直接調用     

3、 引入自定義的庫

// 引入銀行卡圖標樣式

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

// 引入自定義的http模塊

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

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

// 引入公共方法

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

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

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

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

import "@assets/css/common.less"

import "@assets/css/theme.less"

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

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

document.onkeydown = function(e) {

    var e = e || event;

    if(e.keyCode == 13) {

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

    }

}；

// 格式化金額，每三位加逗號，可選保留幾位小數

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、 設置vue的全局配置，在啟動應用前應用

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

7、 指定渲染的文件

 new Vue({

    el: "#app",

    template: "" ,

    router,

    store,

    components: { App }

})

assets 文件夾

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

結構如下：

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

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

components 文件夾

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

結構如下：

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

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

http 文件夾

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

結構如下：

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

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

mixins 文件夾

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

個人認為，相當于是沒有