搭建自己的Vue组件库

建立Vue组件库的步骤

本文介绍了建立一个vue组件库的基本步骤，为了让读者能够成功复现，我将所运用的package.json文件放在了文章最终，以避免版别不同造成的错误。

1. 创立项目

首先创立一个项目文件夹，并运用npm init vue指令初始化Vue项目。

mkdir component
cd component
npm install create-vue -g
npm init vue
# 设置项目名称为demo
# 构建完了之后履行
cd demo
code ./

2. 构建组件库

在项目根目录下，创立一个package文件夹，用于寄存组件库代码。在package文件夹内创立myui文件夹作为组件库的主目录。创立index.js文件作为组件库的入口文件。

mkdir -p package/myui
touch package/myui/index.js
echo export default {test:123} > package/myui/index.js

3. 装备workspaces

在项目的package.json文件中，增加workspaces字段衔接工作空间。保证Node.js版别在16以上，以支撑workspaces字段的装备。

"workspaces": [
  "package/*"
]

4. 初始化组件库包

进入package/myui目录，运用npm init -y指令初始化组件库的包。保证package/myui/package.json文件中的main字段的值为index.js。

cd package/myui
npm init -y
cd ../../

5. 编写打包脚本

在项目根目录下履行npm install指令装置依靠。创立lib.config.js文件，装备组件库的打包脚本。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  build: {
    lib: {
      entry: "./package/myui/index.js",
      name: "myui"
    },
    outDir: "package/myui/lib",
  },
  plugins: [
    vue(),
  ],
})

demo项目的package.json中新增运行脚本：

"build:ui" : "vite build --config lib.config.js",

6. 引进并调试组件库

在项目的src/main.js文件中引进myui组件库，并在浏览器控制台输出相关内容，以测验引进和调试组件库。

import * as Myui from "myui";
console.log(Myui.default.test);

7. 创立实例组件

在myui中创立两个示例组件，用于展现和测验组件库的功用。

cd package/myui
mkdir HelloWorld TheWelcome
touch HelloWorld/HelloWorld.vue TheWelcome/TheWelcome.vue
cd ../../

HelloWorld.vue的内容为：

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>
<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
        Hello
    </h3>
  </div>
</template>
<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}
h3 {
  font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
  text-align: center;
}
@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

TheWelcome.vue的内容为：

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>
<template>
  <div class="welcoming">
    <h1 class="green">{{ msg }}</h1>
    <h3>
        Welcome
    </h3>
  </div>
</template>
<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}
h3 {
  font-size: 1.2rem;
}
.welcoming h1,
.welcoming h3 {
  text-align: center;
}
@media (min-width: 1024px) {
  .welcoming h1,
  .welcoming h3 {
    text-align: left;
  }
}
</style>

8. 编写组件库入口代码

在组件库的index.js文件中，将所有组件挂载到Vue实例上，完成大局注册和按需引进功用。

import HelloWorld from './HelloWorld/HelloWorld.vue';
import TheWelcome from './TheWelcome/TheWelcome.vue';
let components = {
    HelloWorld,
    TheWelcome,
};
// 大局加载
export default {
    install(vue){
        Object.keys(components).forEach(key => {
            vue.component(key, components[key])
        })
    }
}
// 按需引进
export {
    HelloWorld,
    TheWelcome,
};

9. 验证打包

履行npm run build:ui指令验证生成组件库的打包文件是否成功。假如成功则会在package/myui中生成一个lib文件夹，其中的文件有：

demo.mjs demo.umd.js favicon.ico style.css

第一个是module格局的用于工程引进，第二个是umd格局的可以用在浏览器中用script标签引进

10. 打包demo项目

履行npm run build指令打包demo项目，生成组件库的说明文档。

11. 发布组件库

进入package/myui目录，运用npm login和npm publish指令登录并发布组件库。

以上就是建立一个Vue组件库的基本步骤。

附录

demo的package.json文件的内容

{
  "name": "demo",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:ui" : "vite build --config lib.config.js",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^4.4.0",
    "@vue/eslint-config-prettier": "^8.0.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "prettier": "^3.0.3",
    "vite": "^4.4.11"
  },
  "workspaces": [
    "package/*"
  ]
}