2
头图

搭建开发环境

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 即可完成打包。


zxl20070701
136 声望14 粉丝