溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何從零開始搭建一套ui組件庫”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
我們在編寫我們組件庫的組件前，首先需要一套環境，包括下面幾項：
需要為組件庫單獨創建一個新的項目
需要規劃合適的目錄結構
需要定義組件文檔的編寫
我們目前的項目是基于vue2的版本，所以本次組件庫項目也將使用 2.0版本的vue cli來創建。
// 全局安裝 vue-cli npm install --global vue-cli // 基于 webpack 創建一個的新項目 vue init webpack my-project // 安裝依賴 npm install // 運行 npm run dev
安裝過程相關選項如下：
我們默認安裝jest做為我們組件庫的單元測試框架,代碼檢查工具默認eslint
創建項目成功后，現在我們新項目的目錄結構應該是這樣的:
build 打包相關目錄以及配置
config 配置文件目錄
node_modules 項目中安裝的依賴模塊
src 源碼目錄
static 靜態文件目錄
test 單元測試目錄
我們需要對現有目錄做一些調整，首先我們接觸過一些主流的ui組件庫比如 vant/ant，我們知道在這些組件庫的官網上都提供了很直觀的示例頁面，此時我們的組件庫將src目錄改名為examples,作為我們的官方示例目錄。
另外我們新增一個packages目錄用戶存放我們的組件。
現在我們目錄結構變成如下：
此時如果重新運行項目會發現報錯，因為我們src目錄名變了，而webpack配置中默認的入口文件還是src/main.js，我們需要更改下配置，在build/webpack.base.conf文件中將src替換成examples。同時，我們需要將新增的 packages目錄加入到webpack的編譯隊列。
更改后的 webpack.base.conf 應該是這樣的。
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('examples'), resolve('packages'),resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './examples/main.js' // 打包入口
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('examples'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('examples'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}重新運行，編譯通過。
在搭建完基礎的代碼環境后，我們要考慮我們新增組件的組件文檔如何編寫。
我們推薦使用 markdown來編寫組件文檔,然后我們如何在vue中使用markdown來編寫我們的組件文檔呢？這里我們推薦一個好用的工具。
vue-markdown-loader
# vue1版本 npm i vue-markdown-loader@0 -D # vue2版本 npm i vue-markdown-loader -D npm i vue-loader vue-template-compiler -D
我們在對webpack.base.conf作如下修改：
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module: {
rules: [
...,
{
test: /.md$/,
use: [
{
loader: 'vue-loader'
},
{
loader: 'vue-markdown-loader/lib/markdown-compiler',
options: {
raw: true
}
}
]
},
...
]
},
plugins: [new VueLoaderPlugin()]在我們配置完工具后，我們開始測試下組件文檔的編寫，
首先，我們在examples目錄下新增一個docs文件夾，用于存放我們的組件文檔。
新建一個test.md
# hello world
接下來我們在router文件夾新增一個 docs.js路由文件，用來存放我們組件文檔的路徑，并將它引入到根路由文件中。
const docs = [
{
path: '/test',
name: 'test',
component: r => require.ensure([], () => r(require('../docs/test.md')))
}
]
export default docs瀏覽器中運行，我們便可以看到我們組件庫的第一個組件文檔...
以上完成，我們組件庫的環境基本搭建完成了，接下來我們嘗試開始寫一個新的組件。
我們先從一個基礎的button組件開始。
首先我們在之前創建的packages中新增如下結構：
sg-button 組件目錄
index.js 組件安裝入口程序
src 組件源碼
這里我在src/index.vue中簡單實現了一個button組件，支持三種大小的按鈕，
<template>
<div :class="[size]" @click="click()">
<span><slot></slot></span>
</div>
</template>
<script>
/**
* 全局統一彈窗
*/
export default {
name: 'sgButton',
props: {
size: {
type: String,
default: ''
} // 按鈕大小 ：small large
},
methods: {
click () {
this.$emit('click')
}
}
}
</script>
<style scoped>
.container{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
}
.container.small{
height: 40px;
}
.container.large{
height: 60px;
}
</style>然后我們要怎么用這個組件呢？
考慮的是組件庫，所以我們需要讓我們的組件支持全局引入和按需引入，如果全局引入，那么所有的組件需要要注冊到Vue component 上，并導出：
我們需要在組件的入口文件index.js添加如下代碼：
// 導入組件，組件必須聲明 name
import sgButton from './src'
// 為組件提供 install 安裝方法，供按需引入
sgButton.install = function (Vue) {
Vue.component(sgButton.name, sgButton)
}
// 導出組件
export default sgButton然后我們在packages目錄下新增入口文件，統一處理導出所有組件：
// 導入button組件
import sgButton from './sg-button'
// 組件列表
const components = [
sgButton
]
// 定義 install 方法，接收 Vue 作為參數。如果使用 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,
// 以下是具體的組件列表
sgButton
}按需引入：
import sgUi from '../packages/index' Vue.use(sgUi.sgButton)
全部引入：
import sgUi from '../packages/index' Vue.use(sgUi)
我們在examples目錄的入口文件中全局引入了組件庫
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import sgUi from '../packages/index'
Vue.config.productionTip = false
Vue.use(sgUi)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})然后我們編寫一個vue頁面來看看是否引入成功。
首先examples中新增pages目錄，存放我們以后為每個組件單獨編寫的示例頁面，新增examples/pages/buttonExample/index.vue 頁面
<template>
<div class="container">
<sg-button>默認按鈕</sg-button>
<sg-button :size="'large'">大按鈕</sg-button>
<sg-button :size="'small'">小按鈕</sg-button>
</div>
</template>
<script>
/**
* button 示例
*/
export default {
name: 'buttonExample',
methods: {
}
}
</script>在這里我們直接調用了三種尺寸的button,運行看下效果：
效果完美，代表我們組件庫第一個組件以及整體流程打通！
之前的環節，我們成功實現了我們組件庫的第一個組件，但考慮到這只是組件庫，組件庫內能調用肯定是不夠的，類似 vant/ant 這些組件庫，我們怎么讓其他用戶可以使用我們的組件庫組件內?
我們可以考慮發布到npm上，后續項目需要的話，我們直接通過npm安裝引入的方式來調用。
發布到npm的方法也很簡單, 首先我們需要先注冊去npm官網注冊一個賬號, 然后控制臺登錄即可,最后我們執行npm publish即可.具體流程如下:
// 本地編譯組件庫代碼 yarn lib // 登錄 npm login // 發布 npm publish // 如果發布失敗提示權限問題,請執行以下命令 npm publish --access public
“如何從零開始搭建一套ui組件庫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
