傳統前端項目中進行模塊化編程並引入使用vue、element-ui

本項目誕生緣由

最近接手一個項目,前後端分離,前端是傳統的前端項目,但又是模塊化的開發方式,
但是由於生產環境限制不能使用工程化不能用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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章