vue專案開發的個人總結

最近公司新建乙個專案，用vue搭建前端，因為自己也是從0開始，所以記錄下開發覺得有用的事情，方便以後回顧：

新建乙個vue專案，由於有腳手架vue-cli的幫助，一切都變得很容易，有點發愁的就是為了追尋前端的腳步（順便吐槽下前端開發是真的很愛折騰）採用vue-cli 3.x版本，配置和之前2.x完全不一樣，無需再去考慮webpack的配置，全部放在vue.config.js。

關於vue.config.js的相關配置vue-cli3 官網都介紹得很清楚了，這裡就不多介紹。

由於業務的複雜程度，單頁模式是很有侷限性的，因此採用多頁模式，3.x的多頁模式配置比2.x來得輕鬆太多了，只要乙個pages就能解決所有事情，這裡主要記錄一些開發過程中遇到的一些問題：

template模板如果有同乙份會出現之後的頁面覆蓋前面的情況，之前在這裡花費了不少時間，因為三個頁面：about, index, home，pages配置順序：about -> index -> homd，想說方便公用乙份index.html，導致都是顯示都是home頁面。

由於後端開發習慣，ide使用的是intellij，這裡需要注意下，事先新建node_modules資料夾，設定資料夾git ignore，開啟專案再對專案做install，不然idea會針對git做index，這是非常費時間的事情。

框架搭建之後就是框架選型，前端的框架千變萬化，選擇性實在太多了，初步從elementui，iview和ant三者去做考慮。選擇這三者初步考慮：

elementui 之前有個專案使用的框架，而且使用頻率實在是太高。

iview公司ued人員主推框架規範。

ant乙個前端的同事著重推薦。

分析之後：

ant

公司目前也有專案正在嘗試

功能支援強大，iview支援的ant都支援，ant還支援很多有用的功能iview不支援

element

element 生態更好，使用頻率遠超過iview

api比較，側重於在template裡直接去渲染模板

iview

公司主推

api比較，iview 要比element 簡潔許多

結論畢竟是小白，element 公司目前沒有元件正在嘗試，沒有前人的經驗，所以不考慮

對比主要控制項：樹、表單、時間選擇器和**進行對比，iview的功能性不如ant，同時針對2.0的原型，ant能更好的支援實現，不需要額外的空間開發，節約開發成本，因此最終選型是ant。

由於本人是後端出生，對前端是抱有興趣，沒有深入小白乙個，但是又有強迫症，希望採用最好的解決方案，因此更換主題希望用less檔案引入來實現。

由於ant預設主題和原型有差異，希望實現更換主題，有兩個辦法：

2這個辦法真是看了半天也沒看懂，又沒人請教，網上也沒有資料，後來去檢視ant預設的主題antd.less，發現寫法：

@import "../lib/style/index.less";
@import "../lib/style/components.less";

才想明白，__at__import = @import，所以我的配置：

@import '~ant-design-vue/dist/antd.less';
@primary-color: #00a9c8;

main.js裡面：

import '../../assets/static/theme.less'

終於成功了，這裡花了很多時間，主要問題有幾點：

是在main.js 裡面import，還是在css.loaderoptions裡面去設定。

但是沒找到關於less的配置，官網只提供了modifyvars引數的設定，搜尋網上也就找到sass有個 data的配置，但是這個針對less是不生效的。

當在 multi-page 模式下構建時，webpack 配置會包含不一樣的外掛程式 (這時會存在多個html-webpack-plugin和preload-webpack-plugin的例項)。所以導致網上的例子都不生效。（懷疑）

檢視了vue-cli-plugin-style-resources-loader的源**，發現是根據webpack

'normal', 'normal-modules', 'vue',

'vue-modules'四種型別實現新增資源，因此懷疑是否在多頁模式下漏了型別。

由於實現方案過於複雜，更改方案，layout chunk引入less，其他通過父子路由實現頁面巢狀。

花了兩天時間發現這裡有個坑：1和2都不是問題的原因，如果.vue檔案裡面沒有

style scoped lang="less"標籤，或是標籤裡面為空，都會過濾掉不去載入預處理的css。

如果你想修改某個控制項的樣式，有幾個辦法：

css直接複寫（比較方便，但是不方便維護）

主題維護，如果主題預設有提供變數，可以直接修改，比如@primary-color，變數值我是去具體的less檔案檢視原始碼，比如menu/style/index.less

自己less實現類似dark的主題

結論：優先用2，如果可復用高採用3，針對特殊的用1。

error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

install compiler 預設放在devdependencies，移到dependencies

compiler和vue版本一致確認了好多遍都是2.5.21，後來執行了npm install vue-template-compiler -d，發現引入的vue-template-compiler是2.5.22，公升級了下發現部署成功了，坑。

訪問index.html，發現都是空白，懷疑chunk沒有引入進來。看了network，chunk-vendors.js實現了預載入，但是沒有引用導致source裡面沒有**。

結果發現自己pages配置中的chunks屬性，vendor-chunk少打了乙個s。

vue專案開發的個人總結

專案個人總結

專案個人總結

個人專案總結

vue專案開發的個人總結

專案個人總結

專案個人總結

個人專案總結

相關推薦