从零开始搭建 Vue3 组件库开发环境

搭建开发环境

Vite初始化

新建一个空的文件夹，比如叫 Vue3UI ，然后使用命令行在此文件夹下使用npm初始化：

npm init

回车后，我们再安装vite（我们这里选择使用Vite进行打包，使用别的也类似）：

npm install --save-dev vite

根目录创建 index.html 文件，里面内容如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Vue3 UI</title>
</head>
<body>
  Hello Vue3 UI!
</body>
</html>

现在，在之前生成的 package.json 中添加vite启动命令：

{
    "script": {
        "dev": "vite"
    }
}

现在，试着运行Vite吧：

npm run dev

看见类似下面的语句，就说明运行成功了：

VITE v5.3.4  ready in 841 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

然后浏览器访问即可：

至此，Vite就准备好了。

小结：Vite其实简单的理解就是一个HTTP服务器，只不过，可以通过安装插件等方式，对一些文件等进行"调整"。

测试TS代码

在正式开发Vue组件前，我们先来试试普通的TS代码是否可以正常运行。

创建文件 index.ts：

const str: String = 'Hello Vue3 UI';
console.log(str);

在 index.html 的body标签中引入：

<script src="./index.ts"></script>

保存后刷新浏览器，可以在控制台中看到如图显示，说明 TS 可以正常使用：

添加对Vue的支持

首先，我们需要安装Vue（这里安装的是vue3版本，因为vue发布后由用户安装，因此这里安装到dev下，下同）：

npm install --save-dev vue

下面，我们来具体说明，以一个Button为例。

Render函数

创建 src/Button/index.ts 文件：

import { defineComponent, h } from 'vue';

export default defineComponent({
    name: 'Button',
    render() {
        return h("button", null, "一个按钮（点击我）");
    }
});

在 index.html 中增加根容器，展示组件：

<div id="app"></div>

在 index.ts 中创建 Vue 实例并使用组件：

import { createApp } from 'vue';
import Button from './button';

createApp(Button).mount('#app');

启动项目后，浏览器没有显示按钮，而且控制台报错：

Uncaught SyntaxError: Cannot use import statement outside a module (at index.ts:1:1)

因为 index.ts 中使用了 es6 的语法，所以在 index.html 中引入时需要指定为模块导入：

<script src="./index.ts" type="module"></script>

修改后按钮显示了，但是在浏览器控制台会有以下告警：

怎么办？安装下面插件：

npm install --save-dev @vitejs/plugin-vue

新建vite.config.ts文件并写入如下内容：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue() // VUE插件
    ]
});

再次启动时，命令行会如下警告：

在 package.json 中增加配置：

{
    "type": "module"
}

运行项目，可以看到按钮，启动时和浏览器控制台就都没有警告了：

单文件组件

也就是使用 Button.vue 文件来编写组件。

上一步我们已经添加了 @vitejs/plugin-vue 插件，所以这里其实已经支持了。

JSX 组件

首先需要安装支持jsx的插件：

npm install --save-dev @vitejs/plugin-vue-jsx

然后修改 vite.config.ts 配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
    plugins: [
        vue(), // VUE 插件
        vueJsx() // JSX 插件
    ],
});

刚刚的按钮，就可以改成 src/Button/index.tsx ：

import { defineComponent, h } from 'vue';

export default defineComponent({
    name: 'Button',
    render() {
        return <button>一个按钮（点击我）</button>;
    }
});

封装库文件

组件库需要支持两种导入方式：

完整引入：一次性引入全部组件，通过 Vue.use 以 Vue 插件的方式引入；
按需引入：导入单个组件，使用Vue.component 注册。

创建入口文件 src/index.ts，内容如下：

import { App } from "vue";
import UiButton from "./Button";

export { UiButton }; // 导出单独组件

export default { // 实现 install 方法
    install(app: App) {
        app.component(UiButton.name as string, UiButton);
    }
}

现在，需要在 vite.config.ts 文件中配置build：

{
    build: {
        rollupOptions: {
            external: ["vue"],
            output: {
                globals: {
                    vue: "Vue"
                }
            }
        },
        minify: false, // 可以指定压缩工具terser
        sourcemap: true, // 是否生成 sourcemap 文件
        cssCodeSplit: true, // css 代码分割
        lib: {
            entry: "./src/index.ts",
            name: "Vue3UI",
            fileName: "vue3ui",
            formats: ["es", "umd", "iife"] // 输出常用的三种模块类型
        }
    }
}

在 package.json 增加 build 命令打包：

{
    "script": {
        "build": "vite build"
    }
}

运行 npm run build 即可完成打包。

从零开始搭建 Vue3 组件库开发环境

搭建开发环境

Vite初始化

测试TS代码

添加对Vue的支持

Render函数

单文件组件

JSX 组件

封装库文件

zxl20070701

引用和评论

React 相关插件之 Redux 基本使用入门

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了