市面上目前已有各種各樣的ui元件庫，比如 element 和 iview，他們的強大毋庸置疑。但是我們面臨的情況是需求越來越複雜，當它們不能再滿足我們需求的時候，這個時候就有必要開發一套屬於自己團隊的元件庫了。
為何要進行元件庫開發？
如果你所在的公司對於頁面的樣式沒有什麼要求，那麼你只要隨便拿乙個元件庫來用就行了，比如element、iview等等，不用再重複造輪子了；
如果你目前只有個人用乙個元件，或者是只對個別元件有要求，那麼只要在你的工程裡面開發乙個.vue單檔案元件就可以了；如果你的團隊想要乙個更加快速的開發方式，希望有一套一類應用的標準，並且對元件的樣式有較高的要求，那麼你就需要開發乙個元件庫了。
開發元件庫步驟：（
建立專案
調整專案結構
編寫元件
使用vue-cli-service庫模式打包編譯
發布到npm
）
開發步驟：
第一步：建立乙個專案
第二步：建立完成專案之後，你就會在專案的根目錄發現這樣的介面，之後新增乙個新的資料夾，名為packages，將src檔案重新命名為examples
第三步：將專案拖到編譯器中，在根目錄建立乙個vue.config.js檔案
第四步：建立packages資料夾中的所需檔案，介面如下，編寫元件
其中：|-- datepicker // 新編寫的元件，以
datepicker
為例|-- theme-default // 主題檔案
主題檔案較為特殊，他作為單獨的乙個包進行發布引入，方便進行主題發布，後面再進行介紹。下面對datepicker進行介紹：
第五步：
datepicker.vue檔案**
批量註冊元件
本地測試元件
我們的元件以及編寫完成，第一步先在本地進行測試：
如何在瀏覽器中就可以看到我們的元件執行成功了，下一步就是要將我們的**打包成npm庫了，那麼需要通過vue-cli3中vue-cli-service的庫模式進行打包。
執行 npm run build-lib
修改package.json
發布到npm下，只需要lib目錄、package.json 和readme.md檔案,所以需要忽略掉其他的目錄
.npmignore
（.npmignore檔案是乙個隱藏檔案，所以在編譯器中不可見，在檔案根目錄新增如下**：）
examples/
packages/
public/
vue.config.js
postcss.config.js
babel.config.js
*.map
登入npm (如果沒有npm賬號，可以去npm官網註冊乙個)
最後登入npm官網檢視，就成功啦！！！
Vue基本元件 外掛程式開發
一 元件和外掛程式的區別 外掛程式通常會為 vue 新增全域性功能。外掛程式的範圍沒有限制 一般有下面幾種 新增全域性方法或者屬性，如 vue custom element 新增全域性資源 指令 過濾器 過渡等，如 vue touch 通過全域性 mixin 方法新增一些元件選項，如 vue rou...
Vue寫元件步驟
開發乙個元件，props型別為function，父類傳遞function的返回值給子類 1.元件註冊和使用。註冊 commontable 元件，先引入，再匯出 元件使用，大寫字母用 小寫字母代替 2.props 型別為function的具體情況 初始化alldata，type為function 在父...
Vue 元件開發
將頁面拆分為多個元件，簡化了頁面開發，方便維護，元件也可以復用。元件的型別 元件開發流程 宣告 註冊 使用 demo 元件使用流程 div id div script varmyheader varmybody varmyfooter newvue template 使用元件 script 宣告是全...