初始化项目

初始化-pnmp[根据自己需要， npm或者yarn都可以，包管理这里不做限制]

包管理器 pnmp, 做包的初始化配置

  1. pnpm init

安装依赖

  1. pnpm i vite -D

运行项目

启动 Vite 的时候使用 npx。这是一个 Npm5.2 新增加的命令，用于执行软件包中的可执行文件
本地新建一个index.html入口

  1. npx vite

Vite 默认只能支持 TS 代码。而 Vue 的模板需要在编译阶段转换为 Typescript 代码 (渲染函数)才可以运行。Vue 插件不但提供了模板的编译，同时还支持 Vue 单文件 (SFC) 组件的编译
可以通过安装 Vite 的 Vue 插件实现

  1. pnpm i vue
  2. pnpm i @vitejs/plugin-vue -D

开始项目工程化配置

自定义组件-h函数- vue支持

  1. import { defineComponent, h } from "vue";
  3. //之所以使用h函数,因为 Vue3.0 默认的包是不支持模板编译功能的。也就是说， template 语法现在还不能用。在 Vue3.0 中编译功能推荐在构建阶段完成，而不是放到浏览器中运行
  4. export default defineComponent({
  5.   name: "SButton",
  6.   // template:'<button>MyButton</button>'
  7.   render() {
  8.     return h("button", null, "MyButton");
  9.   },
  10. });

自定义组件-SFC组件-template模板编译-@vitejs/plugin-vue

  1. <template>
  2.     <button>SFC Button</button>
  3.   </template>
  5.   <script lang="ts">
  6.   export default {
  7.     name: "SFCButton",
  8.   };
  10.   </script>

自定义组件-JSX组件支持- @vitejs/plugin-vue-jsx

  1. import { defineComponent, h } from "vue";
  3. export default defineComponent({
  5.   name: "JSXButton",
  6.   render() {
  7.     return <button>JSX Button</button>;
  8.   },
  10. });

配置组件入口

  1. import MyButton from "./button";
  2. import SFCButton from "./SFCButton.vue"; // 关于ts类型警告，通过.d.ts声明文件去除警告
  3. import JSXButton from "./JSXButton";
  4. import { App } from "vue";
  6. // 导出单独组件
  7. export { MyButton, SFCButton, JSXButton };
  9. // 编写一个插件，实现一个install方法
  10. export default {
  11.   install(app: App): void {
  12.     app.component(MyButton.name, MyButton);
  13.     app.component(SFCButton.name, SFCButton);
  14.     app.component(JSXButton.name, JSXButton);
  15.   },
  17. };

vite配置

  1. const rollupOptions = {
  2.   external: ["vue", "vue-router"],
  3.   output: {
  4.     globals: {
  5.       vue: "Vue",
  6.     },
  7.   },
  8. };
  10. export default defineConfig({
  11.   ...
  12.     //   添加库模式配置
  13.   build: {
  14.     rollupOptions,
  15.     minify: false,
  16.     lib: {
  17.       entry: "./src/entry.ts",
  18.       name: "WebkuborUI",
  19.       fileName: (format) => `webkubor-ui.${format}.js`,
  20.       // 导出模块格式
  21.       formats: ["es", "umd", "iife"], //3.0之前版本是["esm", "umd", "iife"]
  22.     },
  23.   },
  24. })

设置快捷命令-script

  1.   "scripts": {
  2.     "serve": "vite",
  3.     "build": "vite build"
  4.   },

测试打包

image.png
那么这三个打包导出方式是什么呢

测试 打开路径： http://localhost:5173/demo/esm/index.html

pnpm run dev image.png