如果你所在的公司對(duì)于頁面的樣式?jīng)]有什么要求，那么你只要隨便拿一個(gè)組件庫來用就行了，比如element、iView等等，不用再重復(fù)造輪子了；
如果你目前只有個(gè)人用一個(gè)組件，或者是只對(duì)個(gè)別組件有要求，那么只要在你的工程里面開發(fā)一個(gè).vue單文件組件就可以了；如果你的團(tuán)隊(duì)想要一個(gè)更加快速的開發(fā)方式，希望有一套一類應(yīng)用的標(biāo)準(zhǔn)，并且對(duì)組件的樣式有較高的要求，那么你就需要開發(fā)一個(gè)組件庫了。
我覺得我寫完這篇文章以后，大家看完可能只是能按部就班地開發(fā)一個(gè)組件庫而已，而且具體的記憶和理解不是很深，所以我覺得正確的方式應(yīng)該是站在巨人的肩膀上，比如去查看element組件庫的源碼，去了解他的文件組織方式，文檔是如何管理的，主題文件是如何管理的，以及一些復(fù)雜組件是如何實(shí)現(xiàn)的。接下來，我們就進(jìn)入正題。
我們來理一下整個(gè)步驟：
# 創(chuàng)建目錄mkdir frog-ui# 切換目錄cd frog-ui# 初始化項(xiàng)目vue create .將項(xiàng)目的目錄調(diào)整到以下形式，該目錄方式像是成了業(yè)界不成名的規(guī)定，element和iview都是以這樣的方式組織的。我覺得挺好的，所以不做修改了。
其中：
|-- examples // 為原來的src目錄改名而來，用于測試編寫的組件|-- packages // 用于組織我們的組件庫目錄調(diào)整以后，我們需要修改相應(yīng)的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目錄下面的文件組織情況如下：
其中：
|-- datePicker // 新編寫的組件，以datepicker為例|-- theme-default // 主題文件主題文件較為特殊，他作為單獨(dú)的一個(gè)包進(jìn)行發(fā)布引入，方便進(jìn)行主題發(fā)布，后面再進(jìn)行介紹。下面對(duì)datePicker進(jìn)行介紹：
datePicker.vue
<template> <div>這是一個(gè)datePicker組件</div></template><script>export default { name: 'datePicker'}</script>datePicker/src/index.js
// 導(dǎo)入組件，組件必須聲明 nameimport datePicker from './src/datePicker.vue'// 為組件提供 install 安裝方法，供按需引入datePicker.install = function (Vue) { Vue.component(datePicker.name, datePicker)}// 默認(rèn)導(dǎo)出組件export default datePicker</script>// 導(dǎo)入日期選擇器組件import datePicker from './datePicker'// 存儲(chǔ)組件列表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 { // 導(dǎo)出的對(duì)象必須具有 install，才能被 Vue.use() 方法安裝 install, // 以下是具體的組件列表 ...components}我們的組件以及編寫完成，第一步先在本地進(jìn)行測試：
examples/main.js
import Vue from 'vue'import App from './App.vue'import router from './router'// 導(dǎo)入組件庫import datePicker from './../packages/index'import './../packages/theme-default/src/test.scss'// 注冊組件庫Vue.use(datePicker)Vue.config.productionTip = falsenew Vue({ router, render: h => h(App)}).$mount('#app')examples/views/home.vue
<template> <div class='home'> <datePicker></datePicker> </div></template><script>export default { name: 'home'}</script>如何在瀏覽器中就可以看到我們的組件運(yùn)行成功了，下一步就是要將我們的代碼打包成npm庫了，那么需要通過vue-cli3中vue-cli-service的庫模式進(jìn)行打包。
# package.json'script': { 'build-lib': 'vue-cli-service build --target lib --name frog-ui --dest lib packages/index.js && npm run build-theme',}庫模式的介紹：點(diǎn)擊這里
執(zhí)行：
npm run build-lib項(xiàng)目的根目錄新增了lib文件夾，內(nèi)容如下
其中：
修改packages.json,目前我的項(xiàng)目的完整package.json如下：
{ 'name': 'frog-ui', 'version': '0.1.0', 'private': false, 'lisence': 'MIT', 'main': 'lib/frog-ui.umd.min.js', 'scripts': { 'serve': 'vue-cli-service serve', 'build': 'vue-cli-service build', 'build-lib': 'vue-cli-service build --target lib --name frog-ui --dest lib packages/index.js && npm run build-theme', 'build-theme': 'gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default', 'lint': 'vue-cli-service lint' }, 'dependencies': { 'core-js': '^2.6.5', 'vue': '^2.6.10', 'vue-router': '^3.0.3' }, 'devDependencies': { '@vue/cli-plugin-babel': '^3.7.0', '@vue/cli-plugin-eslint': '^3.7.0', '@vue/cli-service': '^3.7.0', '@vue/eslint-config-standard': '^4.0.0', 'babel-eslint': '^10.0.1', 'cp-cli': '^2.0.0', 'eslint': '^5.16.0', 'eslint-plugin-vue': '^5.0.0', 'gulp': '^4.0.2', 'gulp-autoprefixer': '^6.1.0', 'gulp-cssmin': '^0.2.0', 'gulp-sass': '^4.0.2', 'markdown-it-anchor': '^5.0.2', 'markdown-it-container': '^2.0.0', 'markdown-it-decorate': '^1.2.2', 'markdown-it-task-checkbox': '^1.0.6', 'node-sass': '^4.12.0', 'sass-loader': '^7.1.0', 'vue-markdown-loader': '^2.4.1', 'vue-template-compiler': '^2.5.21' }}主要要修改的是：
{ 'private': false, // 是否私有，必須指定為false才能發(fā)布到npm 'main': 'lib/frog-ui.umd.min.js', // 編譯后包的入口文件}發(fā)布到npm下，只需要lib目錄、package.json 和readme.md文件,所以需要忽略掉其他的目錄
.npmignore
examples/packages/public/vue.config.jspostcss.config.jsbabel.config.js*.map# 設(shè)置要發(fā)布的源，我發(fā)布的是通過verdaccio搭建的私庫npm config set registry http://registry.npmjs.org# 登錄npm login# 發(fā)布npm publish下圖可以看到，我們的包發(fā)布成功了，關(guān)于私庫的搭建可以查看我另外的文章。
整個(gè)過程有一點(diǎn)點(diǎn)繁瑣，但是能學(xué)到一些意外的知識(shí)，希望大家能夠動(dòng)手嘗試。能力有限，文章中有寫得不對(duì)的地方請(qǐng)大家見諒。如果對(duì)你有幫助的話，可以幫忙點(diǎn)個(gè)贊哦 ～
聯(lián)系客服
