為何要進行組件庫開發(fā)如果你所在的公司對于頁面的樣式沒有什么要求，那么你只要隨便拿一個組件庫來用就行了，比如element、iView等等，不用再重復造輪子了； 正確的學習方式我覺得我寫完這篇文章以后，大家看完可能只是能按部就班地開發(fā)一個組件庫而已，而且具體的記憶和理解不是很深，所以我覺得正確的方式應該是站在巨人的肩膀上，比如去查看element組件庫的源碼，去了解他的文件組織方式，文檔是如何管理的，主題文件是如何管理的，以及一些復雜組件是如何實現(xiàn)的。接下來，我們就進入正題。 步驟我們來理一下整個步驟：
創(chuàng)建項目# 創(chuàng)建目錄mkdir frog-ui# 切換目錄cd frog-ui# 初始化項目vue create .調整目錄將項目的目錄調整到以下形式，該目錄方式像是成了業(yè)界不成名的規(guī)定，element和iview都是以這樣的方式組織的。我覺得挺好的，所以不做修改了。  image.png 其中： 目錄調整以后，我們需要修改相應的webpack配置，使原來的src目錄指向修改后的examples目錄，修改vue.config.js文件： const path = require('path')function resolve (dir) { return path.join(__dirname, '..', dir)}module.exports = { // 將entry指向examples pages: { index: { entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } }, // 為packages目錄添加babel-loader處理 chainWebpack: config => { config.module .rule('js') .include .add(resolve('packages')) .end() .use('babel') .loader('babel-loader') .tap(options => { return options }) }}編寫組件packages目錄下面的文件組織情況如下：  image.png 其中： 主題文件較為特殊，他作為單獨的一個包進行發(fā)布引入，方便進行主題發(fā)布，后面再進行介紹。下面對datePicker進行介紹： datePicker.vue <template> <div>這是一個datePicker組件</div></template><script>export default { name: 'datePicker'}</script>datePicker/src/index.js 批量注冊組件// 導入日期選擇器組件import datePicker from './datePicker'// 存儲組件列表const components = [ datePicker]// 定義 install 方法，接收 Vue 作為參數(shù)。如果使用 use 注冊插件，則所有的組件都將被注冊const install = function (Vue) { // 判斷是否安裝 if (install.installed) return // 遍歷注冊全局組件 components.map(component => Vue.component(component.name, component))}// 判斷是否是直接引入文件if (typeof window !== 'undefined' && window.Vue) { install(window.Vue)}export default { // 導出的對象必須具有 install，才能被 Vue.use() 方法安裝 install, // 以下是具體的組件列表 ...components}本地測試組件我們的組件以及編寫完成，第一步先在本地進行測試： examples/views/home.vue <template> <div class='home'> <datePicker></datePicker> </div></template><script>export default { name: 'home'}</script>如何在瀏覽器中就可以看到我們的組件運行成功了，下一步就是要將我們的代碼打包成npm庫了，那么需要通過vue-cli3中vue-cli-service的庫模式進行打包。 庫模式打包庫模式的介紹：點擊這里 npm run build-lib項目的根目錄新增了lib文件夾，內容如下  image.png 其中：
修改package.json修改packages.json,目前我的項目的完整package.json如下： 主要要修改的是： { 'private': false, // 是否私有，必須指定為false才能發(fā)布到npm 'main': 'lib/frog-ui.umd.min.js', // 編譯后包的入口文件}根目錄添加.npmignore文件發(fā)布到npm下，只需要lib目錄、package.json 和readme.md文件,所以需要忽略掉其他的目錄 發(fā)布npm# 設置要發(fā)布的源，我發(fā)布的是通過verdaccio搭建的私庫npm config set registry http://registry.# 登錄npm login# 發(fā)布npm publish下圖可以看到，我們的包發(fā)布成功了，關于私庫的搭建可以查看我另外的文章。  image.png 總結整個過程有一點點繁瑣，但是能學到一些意外的知識，希望大家能夠動手嘗試。能力有限，文章中有寫得不對的地方請大家見諒。如果對你有幫助的話，可以幫忙點個贊哦 ～ |
|
|
