Use vite to build Vue3 component library and publish npm package
There are a lot of developments using the Vue framework in China. Using Vue to develop component packaging is a very common thing. A packaged component can be used anywhere in the project. We can also download other people’s packages from the npm warehouse. Components are used, such as element-ui, vant and other component libraries, but due to different companies and different website styles, we still have to package our own components during development. If we want to use our own packaged components on different projects, It is impossible to copy the component code from the old project to the new project. So we can upload the components to the npm warehouse, and install and use them directly from npm when using them.
1. Create the basic vite scaffolding
npm create vite vite-demo(项目名称) --template vue
Then as shown in the figure below, the project name is vite-demo and then select the vue framework, select vue
2. Transform vite-dome
npm iAfter creating the basic project, open Envy with the programming software you are familiar with, enter and install the relevant packages in the console and modify the files
As shown below:
3. Component packaging
3.1 Create component files
src\componentsCreate a new file under the file to muk-uistore all the components, and muk-uicreate a button component in the folder as shown in the figure
3.2 Writing components
Note that I used
lessthe layout here, so I need to downloadlessthe package andnpm i lessinstall the less package. If you want to use the name attribute when exporting later, you must define the name attribute. Since the setup syntax sugar does not support the definition of the name attribute, we can define twoscripttags, or use the setup syntax sugar, or use a plug-in to solve it. I won’t talk about it here. What is the plug-in, put a link to see for yourself
<script setup>
/**
* 接收传过来的值
*
* @param size 定义按钮的大小 可选值为 'large' | 'middle' | 'small' | 'mini'
* @param type 定义按钮的类型 默认不填
*/
defineProps({
size: {
type: String,
default: "middle",
},
type: {
type: String,
default: "default",
},
});
</script>
<script>
export default {
name: "MukButton",
};
</script>
<template>
<button class="muk-btn" :class="[size, type]">
<!-- 定义插槽用于让用户自定义按钮你们的内容 -->
<slot></slot>
</button>
</template>
<style scoped lang="less">
.muk-btn {
appearance: none;
border: none;
outline: none;
background: #fff;
text-align: center;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.large {
width: 240px;
height: 50px;
font-size: 16px;
}
.moddle {
width: 180px;
height: 50px;
font-size: 16px;
}
.small {
width: 100px;
height: 32px;
}
.mini {
width: 60px;
height: 32px;
}
.default {
border-color: #e4e4e4;
color: #666;
}
.primary {
border-color: skyblue;
background: skyblue;
color: #fff;
}
.plain {
border-color: skyblue;
color: skyblue;
background: lighten(skyblue, 50%);
}
.gray {
border-color: #ccc;
background: #ccc;
color: #fff;
}
</style>
3.3 Export components
Create src\components\muk-uia new folder index.jsto export components
import Button from "./button/index.vue";
// 按需引入
export {
Button };
const component = [Button];
const MukUI = {
install(App) {
component.forEach((item) => {
App.component(item.name, Button);
});
},
};
export default MukUI;
3.4 Whether the local verification component is used
Registering sec\main.jsthe component
import {
createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import MukUI from "./components/muk-ui"; //导入
const app = createApp(App);
app.use(MukUI); //注册
app.mount("#app");
in src\App.vuego use button
<script setup></script>
<template>
<MukButton size="large" type="primary">我是测试组件</MukButton>
</template>
<style scoped></style>
Then enter and npm run devrun in the terminal as shown in the figure and it will be successful.
3.5 Configure the vite.config.js file
Modify the relevant configuration in the root directory of the project vite.config.js, modify it to the component library packaging mode,
import {
defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
outDir: "muk-ui", //输出文件名称
lib: {
entry: path.resolve(__dirname, "./src/components/muk-ui/index.js"), //指定组件编译入口文件
name: "muk-ui",
fileName: "muk-ui",
}, //库编译模式配置
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ["vue"],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: "Vue",
},
},
}, // rollup打包配置
},
});
3.6 Run the packaging command
Use in the terminal, npm run buildas shown in the figure below, the following files appear and the packaging is successful
4. Upload to npm official website
4.1 Preparation before packaging and uploading
Before uploading, we need to do some configuration preparation
4.1.1 Configure package.json
First, we open the terminal in the packaged muk-ui directory, and then execute npm init -ythe command to initialize package.json
package.jsonIt is used to configure the version number we uploaded to the npm warehouse, etc.
After initialization, we can see some basic configurations in this directory
Then we modify the configuration as follows:
{
"name": "muk-ui", //包名字
"private": false,
"version": "0.0.1", //版本号
"description": "一个简单的组件库",
"main": "muk-ui.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": ["muk","muk-ui","MukUI","MUKUI","vue3-muk-ui"],//在npm上可被搜索的关键字
"author": "",
"license": "ISC"
}
4.2 Upload to npm
4.2.1 Register npm account
If you want to publish to the npm warehouse, you must have an account. First go to the npm official website to register an account. Remember the user name, password and email address, which may be used when publishing.
4.2.2 Setting npm source
Many small partners in China like to use the local npm mirror source as Taobao mirror source or other sources. If you want to publish npm packages, we have to switch our npm source to the official source. The command is as follows:
npm config set registry=https://registry.npmjs.org
4.2.3 Login to npm
Open the terminal in the root directory of the packaged file, enter npm loginto log in to the official website
Complete the following steps to successfully log in
4.2.4 Push to npm repository
Input npm publishcan be officially released to the npm warehouse
Note: Make sure that there is no same package name before publishing, otherwise it cannot be released, and the version number of each release must be different
Enter the temporary verification code and press Enter to see the following picture, which proves success
Note: Make sure that there is no same package name before publishing, otherwise it cannot be released, and the version number of each release must be different
4.2.5 View npm package
After the upload is successful, you can find the uploaded components on the npm official website through the keywords you set.keywords
4.3 Download and use
4.3.1 Download
By npm i muk-uidownloading the package of our npm warehouse, the download is successful as shown in the figure.
You can node_modulesfind our component package under the folder
4.3.2 Using components
-
src\main.jsIntroduce the downloaded package in and import its stylesimport "../node_modules/muk-ui/style.css";import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; import "../node_modules/muk-ui/style.css"; //引入组件样式 import MukUI from "muk-ui"; //引入下载后的组件 const app = createApp(App); app.use(MukUI); //注册 app.mount("#app"); -
src\App.vueuse it down<script setup></script> <template> <MukButton size="large" type="primary">我是测试组件</MukButton> </template> <style scoped></style> -
Use
npm run devthe startup project to view the effect, as shown in the figure below, it proves success
