在我們開發代碼的時候，一般都喜歡進行一定程度的重構，以達到簡化代碼、關注點分離、提高代碼可讀性等等方面的考慮，本篇隨筆介紹在VUE+Element 前端應用開發過程中，實現簡化main.js處理代碼，抽取過濾器、全局界面函數、組件注冊等處理邏輯到不同的文件中做法。
1、main.js處理邏輯
我們知道Vue的前端應用，main.js函數里面承載的邏輯內容很多，往往涉及到一些常用過濾器函數、全局界面函數、組件注冊等常規的處理過程，在我們應用越來愈大，引入的控件越來越多的時候，往往需要很多代碼來實現這些功能，但是單個文件代碼行數到達一定程度的時候，可讀性就降低了，而且可維護性就復雜了，於是我們往往需要對代碼進行重構處理，本篇介紹的處理就是實現關注點分離，把不同的邏輯抽離到不同的文件里面，這樣大大減少了main.js的代碼行數，並提高main.js的可維護性。
main.js處理邏輯的內容大概可以分為幾個重要的部分，如下圖所示，同時這個也是我們分離邏輯代碼的思路。
2、全局函數掛載
使用vue 時，有時需要設置公共的函數，便於在所有組件中調用或者在組件的生命周期中都可調用，這便需要自定義全局函數。
在main.js中寫入函數
Vue.prototype.getToken = function (){ ... }
那么，在所有組件里都可調用函數
this.getToken();
里面我們把常規經常用到的一些JS處理函數，以及一些界面信息處理函數，通過全局掛載的方式，使得它們在任何模塊頁面都可以使用。
我們把這些處理放在一個單獨的文件，如prototype.js里面，如下所示。
然后在main.js函數里面，使用如下代碼加入即可。
// 導入一些全局函數 import prototype from './prototype' Vue.use(prototype)
這樣我們就可以在任何頁面、模塊里面使用我們全局的函數了。
或者
3、全局過濾器掛載
和全局函數做法類似，也可以用相同的方法掛載全局過濾器，過濾器處理一般用於對界面部分的內容進行格式化或者轉義的操作。
我們可以自定義一些常用的過濾器放在filter/index.js文件里面，如下所示。
里面放置一些常見的js函數處理，如下所示。
export function uppercaseFirst(string) { return string.charAt(0).toUpperCase() + string.slice(1) }
然后我們在main.js里面引入這個全局過濾器即可。
// 導入自定義全局過濾器 import * as filters from './filters' // 注冊全局過濾器 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })
除了一些自己自定義過濾器外，建議可以使用一些第三方的常用過濾器，如下所示
// 導入第三方常見過濾器，介紹參考https://github.com/freearhey/vue2-filters import Vue2Filters from 'vue2-filters' Vue.use(Vue2Filters)
這個里面的過濾器很多比較常見，介紹參考https://github.com/freearhey/vue2-filters
引入后，直接在界面中使用即可，如下使用代碼。
或者
是不是覺得很方便。
4、常見組件注冊
組件的注冊，分為全局main.js函數中注冊，和頁面組件中注冊，一般我們可以把常見的組件放置到全局中注冊，這樣避免每個頁面都重復填寫注冊組件的代碼，省卻很多功夫。
例如，我們可以創建一個plugin.js的文件，用來分離全局注冊注冊的處理過程，在其中引入我們常用的一些組件，並進行注冊處理。
有了這些文件的定義處理，我們在main.js里面，進行簡單的導入使用即可。
// 導入常見的組件，進行注冊 import common from './components/Common/plugin' Vue.use(common)
最后這些就是實現了我們常規的幾個過程的處理，包括抽取過濾器、全局界面函數、組件注冊等處理邏輯到不同的文件中，並簡化全局掛載的操作。
截取幾個VUE+Element 前端應用系統模塊的界面參考下。
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進VUE+Element 前端應用開發(1）--- 開發環境的准備工作
循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用
循序漸進VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理
循序漸進VUE+Element 前端應用開發(4）--- 獲取后端數據及產品信息頁面的處理
循序漸進VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展示和字段轉義處理
循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用
循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函數
循序漸進VUE+Element 前端應用開發(8）--- 樹列表組件的使用
循序漸進VUE+Element 前端應用開發(9）--- 界面語言國際化的處理
循序漸進VUE+Element 前端應用開發(10）--- 基於vue-echarts處理各種圖表展示
循序漸進VUE+Element 前端應用開發(11）--- 圖標的維護和使用
循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理
循序漸進VUE+Element 前端應用開發(13）--- 前端API接口的封裝處理
循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端接口實現前端界面展示
循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理
循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理
循序漸進VUE+Element 前端應用開發(17）--- 菜單管理
循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制
循序漸進VUE+Element 前端應用開發(19）--- 后端查詢接口和Vue前端的整合
使用代碼生成工具快速生成基於ABP框架的Vue+Element的前端界面
循序漸進VUE+Element 前端應用開發(20）--- 使用組件封裝簡化界面代碼
循序漸進VUE+Element 前端應用開發(21）--- 省市區縣聯動處理的組件使用
循序漸進VUE+Element 前端應用開發(22）--- 簡化main.js處理代碼，抽取過濾器、全局界面函數、組件注冊等處理邏輯到不同的文件中
循序漸進VUE+Element 前端應用開發(23）--- 基於ABP實現前后端的附件上傳，圖片或者附件展示管理
循序漸進VUE+Element 前端應用開發(24）--- 修改密碼的前端界面和ABP后端設置處理
循序漸進VUE+Element 前端應用開發(25）--- 各種界面組件的使用（1）
循序漸進VUE+Element 前端應用開發(26）--- 各種界面組件的使用（2）
循序漸進VUE+Element 前端應用開發(27）--- 數據表的動態表單設計和數據存儲
循序漸進VUE+Element 前端應用開發(28）--- 附件內容的管理
循序漸進VUE+Element 前端應用開發(29）--- 高級查詢條件的界面設計
部署基於.netcore5.0的ABP框架后台Api服務端，以及使用Nginx部署Vue+Element前端應用
循序漸進VUE+Element 前端應用開發(30）--- ABP后端和Vue+Element前端結合的分頁排序處理
循序漸進VUE+Element 前端應用開發(31）--- 系統的日志管理，包括登錄日志、接口訪問日志、實體變化歷史日志
循序漸進VUE+Element 前端應用開發(32）--- 手機短信動態碼登陸處理
循序漸進VUE+Element 前端應用開發(33）--- 郵件參數配置和模板郵件發送處理
使用Vue-TreeSelect組件實現公司-部門-人員級聯下拉列表的處理
使用Vue-TreeSelect組件的時候，用watch變量方式解決彈出編輯對話框界面無法觸發更新的問題