创建Vue组件库项目首先，我们需要创建一个Vue组件库的项目。我们可以使用Vue CLI来快速创建一个基础的Vue项目。
vue create my-component-library
配置rollup接下来，我们需要配置rollup以构建我们的组件库。创建一个名为rollup.config.js的文件并添加以下代码：
import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
export default [
{
input: 'src/main.js',
output: [
{
file: 'dist/my-component-library.js',
format: 'esm',
},
{
file: 'dist/my-component-library.min.js',
format: 'esm',
plugins: [
terser({
output: {
ecma: 6,
},
}),
],
},
],
plugins: [
vue(),
resolve({
extensions: ['.js', '.vue'],
}),
commonjs(),
babel({
exclude: 'node_modules/**',
plugins: ['@babel/external-helpers'],
}),
],
external: ['vue'],
},
];
这个配置文件告诉rollup如何构建我们的组件库。它使用了一些常用的rollup插件，例如vue、babel、commonjs和resolve。其中，我们将Vue作为外部依赖，因为我们将在应用中使用Vue，而不是在组件库中打包Vue。我们使用了两个输出配置项，一个是未压缩的文件，一个是压缩后的文件。这两个文件将以ES模块的形式输出，以便其他项目可以使用import语法导入我们的组件库。
3. 编写组件在src目录下，我们可以创建我们的Vue组件。例如，在src/components目录下，我们可以创建一个Button.vue组件。
<template>
<button class="btn" :class="type">{{ text }}</button>
</template>
<script>
export default {
name: 'Button',
props: {
text: {
type: String,
required: true,
},
type: {
type: String,
default: 'primary',
},
},
};
</script>
<style>
.btn {
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.primary {
background-color: #42b983;
color: #fff;
}
.secondary {
background-color: #fff;
color: #42b983;
border: 1px solid #42b983;
}
</style>
4.导出组件在src/main.js中，我们可以导出我们的组件。
import Button from './components/Button.vue';
export { Button };5.构建组件库现在，我们可以使用npm run build命令来构建我们的组件库。这将使用我们在步骤2中创建的rollup配置文件来构建组件库。
5.1.在打包发布之前，还需要package.json的配置
这个文件包含了我们的项目信息和依赖信息。我们需要确保package.json文件中的信息正确，以便其他人使用我们的组件库时可以正确地安装和使用它。
下面是一个示例package.json文件：
{
"name": "my-component-library",
"version": "1.0.0",
"description": "A Vue component library",
"main": "dist/my-component-library.js",
"module": "dist/my-component-library.esm.js",
"files": [
"dist/*",
"src/*"
],
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"vue",
"component",
"library"
],
"author": "Your Name",
"license": "MIT",
"dependencies": {
"vue": "^2.6.10"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@vue/component-compiler-utils": "^3.1.1",
"babel-plugin-external-helpers": "^6.22.0",
"rollup": "^1.20.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-vue": "^5.1.9"
}
}
我们需要确保以下信息正确：
- "name"：组件库的名称
- "version"：组件库的版本号
- "description"：组件库的描述信息
- "main"：组件库的入口文件路径
- "module"：以ES模块的形式输出的文件路径
- "files"：要包含在发布包中的文件
- "keywords"：一些关键词，用于描述组件库
- "author"：组件库的作者信息
- "license"：组件库的许可证信息
- "dependencies"：组件库需要的依赖
- "devDependencies"：开发时需要的依赖确保以上信息正确后，我们可以运行以下命令将package.json文件中的依赖安装到我们的项目中：
npm install
接下来，我们可以使用npm run build命令构建我们的组件库，使用npm publish命令将其发布到npm上。
npm run build
6.发布组件库一旦我们构建了我们的组件库，我们可以将其发布到npm上。确保你已经在npm上注册了一个账号。然后，使用以下命令登录：
npm login
然后，使用以下命令发布组件库：
npm publish
7.在其他项目中使用组件库现在，我们已经将组件库发布到npm上了，我们可以在其他项目中使用它。首先，我们需要安装组件库：
npm install my-component-library
然后，我们可以在我们的Vue应用中import我们的组件：
import { Button } from 'my-component-library';
export default {
name: 'App',
components: {
Button,
},
};现在，我们可以在我们的Vue应用中使用我们的Button组件了。