vue3項目--讓咱們更快開發vue（一）

時間 2021-02-16

標籤前端 vue java node react spring docker express npm 後端欄目 Java 简体版

原文原文鏈接

前言

其實寫這篇文章時我是很迷茫的，由於其實文章的主要目的是爲了想開源一下本身的項目但願本身的想法可以得到你們的意見，讓我有繼續前進下去的目標。

本文爲一個連續的文章，分爲如下幾個階段，每一個階段都會出一篇文章(本篇爲第一節)：前端

整個項目的介紹和使用流程以及實現目標和未實現目標
總體分析前端使用的vue3.0以及咱們後面使用會有哪些坑
nodejs後端怎麼去作相似java springMVC的強類型限定
小服務器上怎麼實現整個項目自動化集羣部署

我爲何要作

你們在開發vue的時候使用ui框架是否遇到過要不樣式差一點點不符合要求、要不事件觸發的時候差一點本身想要的參數，再或者對於一個新的組件去網上找相似的代碼模板老是js、jq的代碼，就是不能拿過來直接用。
要是咱們可以像使用iconfont同樣去網上簡單的找到須要的圖標下載總體就能夠用了該多好。vue

是的上面所說的就是我這個項目想要實現的目標，我須要的不是簡簡單單一個ui組件庫，我想要的是一個ui組件自定義拼裝平臺。java

其實現有的平臺已經有分析代碼模塊並能夠實如今線引入和單個的npm安裝，可是咱們也不但願咱們項目裏面能有幾十個不一樣ui組件的npm吧，因此個人最主要目的就是將多個組件自動組裝成npm包讓咱們造成項目專用的組件庫。node

而後就是咱們在引入相似elemntui組件庫的時候咱們使用的其實只有那麼幾個組件所有引入會擴大main.js，單個引入又太麻煩了怎麼辦？這個時候咱們可以直接在網頁上選擇本身須要的組件生成獨有的elementui包不是很好嗎。react

我作了什麼

現階段項目實現的目標能夠用下面的流程圖來展現

總體實現還比較簡單，暫時尚未作用戶隔離和權限控制等功能

能夠由上面的圖看出來，其實只要咱們的組件可以有必定的量級那麼咱們的ui組件庫理論上能夠無限大，能夠實現無數個咱們獨特的npm組件包，分分鐘寫完整個項目不是問題。spring

介紹了這麼多了，我相信看到這裏的大佬都會點進去試試這個不起眼的小網站: 自定義ui組件庫 (打開後5秒鐘事後會自動跳轉至首頁哦，網站有任何問題均可以聯繫本人，聯繫方式在文章最後)</div>docker

我搭建了怎樣的項目

首先總體介紹下整個項目的狀況：express

前端框架選型用的vue3.0，總體配置和重要功能實現使用的ts書寫，vue文件使用的js而且使用了composition-api書寫方式
後端方面使用了express框架，全項目使用ts書寫，總體配置使用的java srpingMVC模式（寫過java的同窗看起來很親切）
總體部署方面使用了docker，集羣化使用的swarm（爲何不用k8s？服務器帶不起，小服務器傷不起），鏡像保存在阿里私有鏡像庫中，構建鏡像使用的jenkins觸發

其實無論在前端仍是後端，仍是服務器的部署真的問題超多，用了不少的騷操做這些後面都會慢慢一一的講解。npm

具體代碼的地址也會在後面寫完文章後進行一一開發（整理一下亂寫的地方）。
後端

網站是怎麼使用的

熟悉iconfont的童鞋能夠直接去操做，基本流程同樣只有代碼編輯那塊會有點不同（找不到地址就翻網頁最後哦）

接下來就是每一個頁面的使用說明了：

首頁

淦，截圖解說我也莫得辦法啊
一眼可以看出的東西我就不說了，下面下標對應相同的功能
中間的搜索框能夠直接經過名稱搜索組件，按回車或點擊按鈕（輸入就會出現）

一、建立一個新的組件（打開編輯頁）
二、打開購物車管理

三、篩選組件類型

一、展開展現組件
二、將組件添加至購物車

三、點擊其他地方進入組件編輯頁

組件庫

組件庫總體就是簡單的列表搜索功能，每一個小框也是能夠點擊的哦，具體點擊時什麼樣的快去試試吧

一、按名稱搜索組件
二、選擇組件類別

npm庫

左側的就是npm庫包的名稱
在列表上方有版本信息和安裝語句

一、搜索組件（回車新開窗口）
二、新建npm包

三、發佈npm包

編輯頁

最重要的就是編輯頁了，有不少的功能

總體頁面展現是展現index.vue文件，咱們建立新的組件須要新增vue文件而後將其寫入index.vue中（注：不須要引入註冊，已經自動註冊了）
須要選擇組件使用入口文件，用做生成npm時候的入口

一、添加代碼模板，而且能夠可視化編輯
二、打開下層功能模塊

三、編輯器額外功能（切換主題、改變字體大小、是否自動熱更新編譯）

四、關閉代碼塊，可經過點擊左側從新出來（也能夠手動拖動代碼塊顯示區域）

五、打開文件管理，請仔細閱讀上面的提示

總結以及預告

已完成功能:

npm包的發佈
組件在線編輯、保存、生成、管理
總體展現頁面和操做流程
代碼模板的添加以及支持引入第三方庫
發佈至本身的npm庫中（由於用戶未做因此暫未開放）

未完成功能：

發佈npm包歷史記錄
組件歷史記錄
用戶以及權限管理
下載項目進行本地化管理
收錄element、vant等經常使用ui組件庫
代碼模板和第三方庫完善
上傳文件添加組件
添加圖片服務
關於npm和組件的使用說明文檔邏輯
網站內部的組件實現互相註冊調用

總體項目到這就介紹完了，但願你們可以去進行使用下而後評論，或者給我進行信息反饋，聯繫方式在最後，這就是我我的心血來潮但願爲咱們開發進行簡化盡一份力，望各位大佬輕噴

下一章：Vue3.0一個不算小的項目實踐（二）（文章完成後會將該標題換爲連接）
主要內容：如何使用vue3搭建咱們的項目並進行管理以及在沒有任何ui庫依賴的時候實現本身的組件庫功能（內帶高度集合的校驗方式）

export default class ValidaDue {
    value: any
    ValidaObject: BindingObj

    @ValidateDec.validationFn
    private static validation: Function

    @ValidateDec.resetStatus
    private static resetStatus: Function

    @ValidateDec.registerTrigger
    private static registerTrigger: Function

    /**
     * 構造函數
     * @param {ValidaPorops} props 傳入傳遞對象
     * @param {Function} emit 回調函數
     * @param {Element} dom 傳入監聽dom
     */
    constructor(props: ValidaPorops, emit: Function, dom: RefDom) {
        this.value = ref(props.modelValue);

        emit('update:modelValue', this.value);

        this.ValidaObject = reactive({
            value: this.value,
            rules: props.rules,
            check: true,
            errorMsg: ''
        });

        this.ValidaObject.validation = ValidaDue.validation(this.ValidaObject);

        this.ValidaObject.resetStatus = ValidaDue.resetStatus(this.ValidaObject);

        onMounted(() => {
            if (this.ValidaObject.validation) ValidaDue.registerTrigger(dom.value, this.ValidaObject);
        });

        const obj: any = inject('form', null);

        obj?.push(this.ValidaObject);
    }

}