先看下效果ninecat-ui
組件庫源碼ninecat-ui（如果覺得還不錯(cuò)蚜锨，可以給個(gè)start哦）
在從零構(gòu)建一個(gè)Vue UI組件庫（一）中我們已經(jīng)把一個(gè)最基本的VUE項(xiàng)目搭建好了岭洲，下面我們要開始構(gòu)建一個(gè)最簡單的組件骨田，然后可以供外部使用。
編寫第一個(gè)組件
先在根目錄下新建一個(gè)packages文件,然后在下面新建一個(gè)hello文件夾，開是編寫組件。組件作用很簡單狭莱，就是一個(gè)簡單的打招呼的組件饲宛，傳入名字即可皆愉，會在頁面顯示Hello，xxx艇抠。
下面看看我們的目錄結(jié)構(gòu)：
現(xiàn)在需要來寫一下我們的Hello組件幕庐。
packages/hello/src/index.vue
<template>
<div>
<h2>Hello, {{name}} ！</h2>
</div>
</template>
<script>
export default {
name:'Hello',
props:{
name:{
type:String,
default:'Ninecat UI'
}
}
}
</script>
packages/hello/index.js
import Hello from './src/index.vue'
// install 是默認(rèn)的方法,供按需引入家淤。
// 當(dāng)外界在 use 這個(gè)組件的時(shí)候异剥，就會調(diào)用本身的 install 方法，同時(shí)傳一個(gè) Vue 這個(gè)類的參數(shù)絮重。
Hello.install = function(Vue){
Vue.component(Hello.name, Hello)
}
export default Hello
組件文件夾之所以這么寫是為了讓組件有個(gè)統(tǒng)一的出口冤寿，每個(gè)組件文件夾下的src目錄是可以擴(kuò)展組件其他功能错妖。
src/index.vue
<template>
<div>
<Hello
:name="name"
/>
</div>
</template>
<script>
import Hello from '../packages/hello'
export default {
name:'App',
components:{
Hello
},
data:function(){
return {
name:'Terence'
}
}
}
</script>
OK，到這里我們算封裝了一個(gè)最簡單的Hello組件疚沐，但是現(xiàn)在我們還沒有實(shí)現(xiàn)將組件打包后用npm安裝這個(gè)組件庫暂氯，然后引用里面的Hello組件,所以下面需要進(jìn)行導(dǎo)出配置和打包配置。
配置導(dǎo)出和打包
組件編寫好了需要統(tǒng)一導(dǎo)出亮蛔，現(xiàn)在是一個(gè)組件痴施，后面會有很多組件，所以我們需要統(tǒng)一導(dǎo)出組件了究流。
packages/index.js
import Hello from './hello'
const components = {
Hello
}
const install = function (Vue) {
Object.values(components).forEach(component => {
Vue.component(component.name, component);
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install,
Hello
}
配置打包
build/webpack.config.build.js
'use strict'
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'production',
entry: {
'ninecatui': './packages/index.js' // 入口文件
},
output: {
path: path.resolve(__dirname, '../package'), // 出口目錄
publicPath: '/package/',
library: 'ninecatui', // 包名
libraryTarget: 'umd',
umdNamedDefine: true // 會對 UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名辣吃。否則就使用匿名的 define
},
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
]
}
到這里基本的打包就可以了，可以本地測試一下芬探。
修改一下src/index.js
import Vue from 'vue'
import App from './index.vue'
import Ninecatui from '../package/ninecatui'
Vue.use(Ninecatui)
new Vue({
render: h => h(App)
}).$mount('#app')
修改一下src/index.vue
<template>
<div>
<Hello
:name="name"
/>
</div>
</template>
<script>
export default {
name:'App',
data:function(){
return {
name:'Ninecat UI'
}
}
}
</script>
一樣可以訪問神得。
下一步我們嘗試將打包至npm，然后本地安裝來引用這個(gè)組件庫偷仿。
第二節(jié)源碼在ninecat-ui/ninecat-train tag1.0.1
-----持續(xù)更新中-----
