本專案誕生緣由
最近接手一個專案，前后端分離，前端是傳統的前端專案，但又是模塊化的開發方式，
但是由于生產環境限制不能使用工程化不能用nodejs和webpack所以沒有打包功能，就實作了一個方案：
如何在傳統前端專案中進行javascript模塊化編程，并引入使用vue3.js、element-plus，并且不依賴nodejs和webpack？
如果前端頁面不使用.vue檔案，如何模塊化組件化？
所以我是直接在JS檔案中寫模塊的HTML與js，具體例子看代碼，
用vue3是因為新專案用新版本vue，vue3也穩定了可以實際生產，
原生開發沒有router只能多頁面應用，沒有打包器每個頁面各自引入依賴，直接本地打開頁面就能跑無需打包，
想不到vue3第一個實際專案是這種模式開發，但也跟工程化差不多一個思維，
沒有node、webpack等眾多工具的輔助，原生開發有種被束縛手腳的感覺
本專案僅作vue3原生開發記錄參考，畢竟現代主流開發流程還是工程化
專案的 Element Plus
用element-plus是因為element-plus專門匹配vue3的桌面端組件庫
官網地址：https://element-plus.gitee.io/zh-CN/
日期組件翻譯問題
Element Plus 組件默認使用英語
官網雖然提供其他語言解決辦法：https://element-plus.org/zh-CN/guide/i18n.html#global-configuration
但經過試驗無效，官網提供外鏈檔案失效：unpkg.com/element-plus/dist/locale/zh-cn
通過npm下載element-plus原始碼查找中文翻譯包：node_modules\element-plus\lib\locale\lang\zh-cn.js
但經試驗發現原始碼包里的檔案也需要工程化打包才能使用
最后解決方案是修改原始碼檔案：app-customform\lib\element-plus-1.1.0-beta\index.full.js
在index.full.js檔案7061行把英語翻譯替換成中文翻譯(利用element-plus原始碼查找中文翻譯包里的代碼)
專案的sass
css是用sass，原生開發只能頁面引入sass轉成的css
沒有工程化自動編譯sass，利用vscode "easy sass"插件實作自動編譯，
在 VSCode 選單欄依次點擊“檔案 > 首選項 > 設定” 搜索"easysass"進行設定：
"easysass.formats": [
// {
// "format": "expanded",
// "extension": ".css"
// },
{
"format": "compressed",
"extension": ".min.css"
}
]
只需要輸出min檔案
以上簡單說明原生vue3開發程序，重點還是看代碼
本文原始碼：https://gitee.com/konghaowei/vue3-native
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353201.html
標籤：其他
上一篇：JS呼叫堆疊