目錄結構

├── build                      // 構建相關  
├── config                     // 配置相關
├── src                        // 原始碼
│   ├── api                    // 所有請求
│   ├── assets                 // 主題 字型等靜態資源
│   ├── components             // 全域性公用元件
│   ├── directive              // 全域性指令
│   ├── filtres                // 全域性 filter
│   ├── icons                  // 專案所有 svg icons
│   ├── lang                   // 國際化 language
│   ├── mock                   // 專案mock 模擬資料
│   ├── router                 // 路由
│   ├── store                  // 全域性 store管理
│   ├── styles                 // 全域性樣式
│   ├── utils                  // 全域性公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口 載入元件 初始化等
│   └── permission.js          // 許可權管理
├── static                     // 第三方不打包資源
│   └── Tinymce                // 富文字
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項
├── .gitignore                 // git 忽略項
├── favicon.ico                // favicon圖示
├── index.html                 // html模板
└── package.json               // package.json
 

簡單介紹src目錄

api 和 views

建議根據業務模組來劃分 views，並且 將views 和 api 兩個模組一一對應，從而方便維護。當然也有一些全區公用的api模組，如七牛upload，remoteSearch等等，這些單獨放置就行。

components

這裡的 components 放置的都是全域性公用的一些元件，如上傳元件，富文字等等。一些頁面級的元件建議還是放在各自views檔案下，方便管理。

store

vuex是用來儲存資料和事件使用的，中大型專案使用比較多。有些資料還是需要用 vuex 來統一管理的，如登入token,使用者資訊，或者是一些全域性個人偏好設定等，還是用vuex管理更加的方便，具體當然還是要結合自己的業務場景的。總之還是那句話，不要為了用vuex而用vuex！

webpack

這裡是用 vue-cli 的 webpack-template 為基礎模板構建的，如果你對這個有什麼疑惑請自行google，相關的配置紹其它的文章已經介詳細了，這裡就不再展開了。簡單說一些需要注意到地方。

jquery (本專案已移除)

管理後臺不同於前臺專案，會經常用到一些第三方外掛，但有些外掛是不得不依賴 jquery 的，如市面很多富文字基都是依賴 jquery 的，所以乾脆就直接引入到專案中省事(gzip之後只有34kb，而且常年from cache,不要考慮那些吹毛求疵的大小問題，這幾kb和提高的開發效率根本不能比)。但是如果第三方庫的程式碼中出現

new webpack.ProvidePlugin({
  $: 'jquery' ,
  'jQuery': 'jquery'
})

這樣當 webpack 碰到 require 的第三方庫中出現全域性的$、jQeury和window.jQuery 時，就會使用 node_module 下 jquery 包 export 出來的東西了。

alias

當專案逐漸變大之後，檔案與檔案直接的引用關係會很複雜，這時候就需要使用alias 了。 有的人喜歡alias 指向src目錄下，再使用相對路徑找檔案

resolve: {
  alias: {
    '~': resolve(__dirname, 'src')
  }
}

//使用
import stickTop from '~/components/stickTop'

或者也可以

alias: {
  'src': path.resolve(__dirname, '../src'),
  'components': path.resolve(__dirname, '../src/components'),
  'api': path.resolve(__dirname, '../src/api'),
  'utils': path.resolve(__dirname, '../src/utils'),
  'store': path.resolve(__dirname, '../src/store'),
  'router': path.resolve(__dirname, '../src/router')
}

//使用
import stickTop from 'components/stickTop'
import getArticle from 'api/article'