Let’s take a look at ninecat-UI
Component library source ninecat-UI (if you feel good, you can give a start oh)
Building a Vue UI component library from scratch (part 1) – Project Initialization we have built a basic Vue project. Now we are going to start building a simple component that can then be used externally.
Write the first component
Create a new Packages file in the root directory and create a new Hello folder below to write components. Component function is very simple, is a simple Hello component, just pass in the name, will display Hello, XXX page.
Let’s look at our directory structure:
Now we need to write our Hello component.
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>
Copy the code
packages/hello/index.js
import Hello from './src/index.vue'// Install is the default method to be imported on demand. When the component is used, the install method is called and a Vue class parameter is passed. Hello.install =function(Vue){
Vue.component(Hello.name, Hello)
}
export default Hello
Copy the code
Component folders are written this way so that components have a unified exit. The SRC directory under each component folder is used to extend other functions of the component.
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>
Copy the code
OK, so far we have encapsulated a simple Hello component, but we have not implemented the package component to install the component library with NPM, and then reference the Hello component inside, so we need to export configuration and packaging configuration.
Configuration export and packaging
The component is written and needs to be exported uniformly. Now it is a component, and there will be many components, so we need to export the component uniformly.
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
}
Copy the code
Configuration package 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'), // Export directory publicPath:'/package/',
library: 'ninecatui', // Package name libraryTarget:'umd',
umdNamedDefine: true// AMD modules in the UMD build process are named. Otherwise use anonymous 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(),
]
}
Copy the code
Here’s the basic package, you can test it locally.
Add a package script to package.json,
"build": "webpack --config build/webpack.config.build.js"
Copy the code
Let’s build the project: NPM run Build
A package folder is displayed, and we reference the component library.
Modify 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')
Copy the code
Modify SRC /index.vue
<template>
<div>
<Hello
:name="name"
/>
</div>
</template>
<script>
export default {
name:'App',
data:function() {return {
name:'Ninecat UI'
}
}
}
</script>
Copy the code
Also accessible.
Next we try to package it into NPM and install it locally to reference the component library.
The second section source in ninecat-UI /ninecat-train tag1.0.2
Next chapter: Building a Vue UI component library from scratch (iii) — Release the first NPM package