Vue-admin工做整理（二）：項目結構我的配置

經過上一篇文章（Vue-admin工做整理（一）：項目搭建）操做完畢後，基礎項目已經搭建，下面就要對項目自己進行一下項目結構調整來符合本身的項目要求

一、首先要對package.json文件進行調整，使項目初始化後瀏覽器要自動彈出，在原有的配置下，增長 --open 

"serve": "vue-cli-service serve --open",

二、根目錄中增長一個.editorconfig配置文件，用來配置一些編譯器的使用習慣

root = true  // root權限生效
[*]  // 對全部文件都有效
charset = utf-8 // 文件編碼
indent_style = tabs // 縮進快捷鍵
indent_size = 2 // 縮進字符數

單單這麼建立配置文件是不生效的，須要在vscode編譯器中增長插件：EditorConfig for VS Code，安裝完插件後重啓編譯器，配置就會生效

三、根目錄繼續建立一個vue.config.js配置文件，用以解決平常工做中的文件路徑，項目默認的URL等，而且增長一個跨域配置，經過proxy告訴後端，全部沒有靜態資源的請求，所有代理到指定路由上

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const BASE_URL = process.env.NODE_ENV === 'procution' ? '/iTestWeb' : '/'
module.exports = {
  lintOnSave: true,
  baseUrl: BASE_URL,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))
  },
  // 打包時不生成.map文件，來減小打包生的文件大小
  // procutionSourceMap: false,
  // 增長跨域配置，經過proxy告訴後端，全部沒有靜態資源的請求，所有代理到localhost：8080上
  devServer: {
    proxy: 'http://localhost:8080'
  }
}

四、項目結構進行調整：

另：增長一個npm i mockjs -D , mock模擬服務端返回的工具 

文件夾說明：

• api：全部後端接口交互的ajax請求放在這裏
• assets：資源歸類，分爲了圖片和字體等
• config：項目的一些配置放在這裏
• directive：放置vue的自定義指令
• lib->utils.js：與業務結合的方法，放置在這裏
• lib->tool.js：與業務沒有耦合的，純粹的工具方法函數放置在這裏
• router：路由文件的剝離，index.js中建立路由實例和全局路由守衛，router.js中建立路由列表
• store(Vuex)：狀態管理放置在這裏，項目最基礎的狀態都獨立拆出文件放置：actions.js、mutations.js、state.js，隨着業務的複雜，能夠將模塊獨立出來，好比用戶相關的（用戶名、用戶信息等）狀態管理，咱們放置在user.js 
• components：組件管理
• views：視圖管理
• mock：模擬接口