Vue cli3 庫模式搭建元件

2021-09-12 19:45:34 字數 478 閱讀 3324

市面上目前已有各種各樣的ui元件庫,比如 element 和 iview,他們的強大毋庸置疑。但是我們面臨的情況是需求越來越複雜,當它們不能再滿足我們需求的時候,這個時候就有必要開發一套屬於自己團隊的元件庫了。

所以本文的目的就是讓讀者能通過此文,小能做乙個簡單的外掛程式供人使用,大能架構和維護乙個元件庫不在話下。

以下乙個簡單案例簡述一下

一、技術棧

如何通過新版腳手架建立專案,這裡就不提了,自行看官方文件。

vue-cli3: 新版腳手架的庫模式,可以讓我們很輕鬆的建立打包乙個庫

npm:元件庫將存放在npm

webpack:修改配置需要一點 webapck 的知識。

二、大綱

想要搭建乙個元件庫,我們必須先要有乙個大概的思路。

規劃目錄結構

配置專案以支援目錄結構

編寫元件

編寫示例

配置使用庫模式打包編譯

發布到npm

vue cli3父子元件傳值

通常父子元件之間是需要相互傳資料的。2,子元件vcontent.vue使用ret接受父元件傳遞的menu class content 也可以這樣接收父元件的資料 class content 子元件是通過事件向父元件傳遞資料,分如下兩種情況 情況一 當前子元件已接收了接收父元件的資料,存在this.m...

學習vue cli3的專案搭建

關於舊版本 vue cli 的包名稱由vue cli改成了 vue cli。如果你已經全域性安裝了舊版本的vue cli 1.x 或 2.x 你需要先通過npm uninstall vue cli g或yarn global remove vue cli解除安裝它。node 版本要求 vue cli...

vue cli 3學習要點

只整理了一下vue cli 3的基礎內容部分,其他的見官網 一 簡介vue3 1.它可以通過 vue create 快速建立乙個新專案的腳手架,或者直接通過 vue serve 構建新想法的原型,不需要vue2.0那樣用webpack來構建專案 2.在專案建立的過程中,你也會被提示選擇喜歡的包管理器...