先來一組資料使用時長：2年團隊人數：4人專案數量：4個最大專案程式碼量: 33623行最大專案 SFC: 643個最大專案頁面: 121個累計編寫通用元件：24個通用元件程式碼量：21748行公開通用元件: 6個吐槽一下

兩年中，團隊人員更替，這是每個團隊都不想的事，可，無法避免。

我們公司小，團隊更小。每個人都有大量的前端開發以後的工作要做。

公司沒有嚴格的程式碼開發/審查流程，程式碼風格也是因人而異。

儘管我花時間編寫了開發規範，但現在也只是一紙空文，無人問津（宣告: 我不是團隊領導，我只是負責技術）。

只能儘量在 eslint/pre-commit 上下功夫，進行強制約束。

誰知，有人會將 eslint 給禁用掉。

遇到的問題

網上到處都在講 Vue 的優點，我就不說了。單純說說工作上遇到的各種問題。

元件管理

我們的業務系統很複雜，而開發人員能力參差不齊（最重要的是沒有程式碼審查），

導致程式碼混亂，比如命名不規範，隨意性強，濫用元件/混入功能混亂。

隨著業務範圍增大，混亂越來越嚴重，積重難返。(這個問題本身和 Vue 是沒有關係的)

專案上的真例項子：

我抽象出了一個業務元件，編寫了詳細的使用文件。可是，就有人根本不看這個文件，

關鍵是，新增的東西，是不能被抽象的，甚至不需要被共享。

直到有一天我需要向這個元件新增新功能才發現這個問題，可是，已經晚了。

我只能為了相容這們同學的東西，額外去做一些處理。慢慢地，這個元件，面目全非了。

所以，不要吝嗇時間給新人培訓，講解，磨刀不誤砍柴工。

效能

專案小的時候根本發現不了，甚至專案大了，在開發機器上都不容易發現的效能問題。

最開始，我們打包的輸出，使用了 Vue 的預設配置。

結果，打包後，專案上的程式碼有 4M（開發時的未壓縮程式碼有 40M 左右）。

當部署到客戶那去時，客戶一看，首屏要 4 秒才載入完成，這怎麼行。

甚至，有的客戶電腦使用了國產晶片，(Firefox) 首屏載入竟然要 30 秒甚至直接卡死。

此時才注意到，專案需要優化了。於是，利用 webpackChunkName 進行非同步載入，

同時將系統重構為多入口。終於，4 秒變 1 秒，30秒 變 10 秒了，這下客戶能接受了。

當然，並不是說這個載入速度就沒問題了，只是說最佳化後的效果，畢竟客戶能接受了，

我們做專案的，時間也是有限。

另外，小心使用第三方元件。

專案上的另一個故事：

有一個頁面，用表格展示了大量資料。表格中的大部分資料，都支援使用 ElementUI 的 el-input type="textarea" 進行內容編輯。就這麼個頁面，導致客戶的瀏覽器假死了。

原因找了很久，最後發現是這個元件執行了大量的計算，以修正輸入框的大小。

掌握以下技能，Vue 能用得更好mixins 混入extends 擴充套件render 渲染函式slots 插槽webpack 打包工具的配置import/webpackChunkName 非同步載入分享我們的元件@hyjiacan/vue-datepicker@hyjiacan/vue-slideout@hyjiacan/vue-echarts@hyjiacan/vue-ellipsis@hyjiacan/vue-timeline@hyjiacan/eltable-wrapper