第二章 开发一个Vue组件

举报
天界程序员 发表于 2023/02/01 11:08:46 2023/02/01
【摘要】 组件库开发:vite + vue开发一个组件

1、基础组件

  • 首先安装 Vue3.0 包依赖。
pnpm i vue@"3.2.37"
  • 接着尝试编写一个简单的 Button 组件

创建src/button/index.ts目录文件

import { defineComponent, h } from "vue";

export default defineComponent({

  name: "SButton",

  // template:'<button>MyButton</button>'

  render() {

    return h("button", null, "MyButton");

  },

});

写到这里大家可能有点疑问:为什么是使用 render 函数,而不是熟悉的 template 语法编写呢?

这是因为 Vue3.0 默认的包是不支持模板编译功能的。也就是说, template 语法现在还不能用。在 Vue3.0中编译功能推荐在构建阶段完成,而不是放到浏览器中运行。如果希望在浏览器中的话,可以选择 ./node_modules/vue/dist/vue.global.js 这个包。

  • index.html 中添加一个容器 , 用来展示组件
<div id="app"></div>

给容器添加id属性,用于后面Vue实例挂载。

  • src/index.ts 中启动 Vue 实例
import { createApp } from "vue";

import SButton from "./button";

createApp(SButton).mount("#app");
  • 启动项目
pnpm dev
  • 浏览器访问项目地址
  VITE v3.0.7  ready in 165 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  • 页面并没有显示button组件,且控制台报错
Uncaught SyntaxError: Cannot use import statement outside a module (at index.ts:1:1)

这里报错的原因是用了es6的语法, 浏览器默认将它作为js解析会出现问题,需要将它作为模块导入,script标签默认type="text/javascript",需要改为type="module",更改后的index.html

  • 修改index.html文件,再次查看
<script src="./src/index.ts" type="module"></script>
  • 再次查看浏览器,可以看见button组件,但是控制台有以下警告
runtime-core.esm-bundler.js:4952 Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

查阅资料——解决方案

  • 安装插件@vitejs/plugin-vue
pnpm i @vitejs/plugin-vue -D
  • 创建vite.config.ts 配置插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [
  vue(), // VUE插件
],
})
  • 再次启动项目
pnpm dev
  • 再次查看浏览器控制台

组件正常显示,且控制台此时无警告报错。


2、单文件组件

由于Vue3.0 默认的包是不支持模板编译功能, 这里需要安装viteVue插件,也就是上面的解决方案步骤。

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

  • 安装插件
pnpm i @vitejs/plugin-vue -D
  • 创建vite.config.ts 配置插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(), // VUE插件
  ],
})
  • 引入到index.ts中测试
import { createApp } from "vue";
import SFCButton from "./SFCButton.vue";

createApp(SFCButton)
.mount("#app");

此时报错

找不到模块“./SFCButton.vue”或其相应的类型声明。ts(2307)

这是因为Typescript 默认是不支持 .vue 类型的模块的。可以通过添加一个模块的类型定义来解决这个问题。

  • 创建src/shims-vue.d.ts类型声明文件
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}
  • 运行项目
pnpm dev
  • 浏览器访问地址
  VITE v3.0.7  ready in 297 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

此时可以看到按钮组件。


3、JSX 组件

JSX 是一种 Javascript 的语法扩展,最早运用于 React 架构中。JSX 也可以当作一种模板语言使用。虽然有人会质疑利用JSX语法编写 Vue3 代码是否合理, 比如怀疑 JSX 语法是否兼容 Vue3 的静态提升特性。但是现在很多基于 Vue 的组件库都大量使用JSX语法,对于工程化搭建,还是以开发者的使用习惯优先,我们支持了再说。

  • 在这里我们通过插件实现扩展
pnpm i @vitejs/plugin-vue-jsx@"2.0.0" -D
  • 修改 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/JSXButton.tsx 文件
import { defineComponent, h } from "vue";

export default defineComponent({

  name: "JSXButton",
  render() {
    return <button>JSX Button</button>;
  },

});

这个时候TS会报错

(property) button: ElementAttrs<ButtonHTMLAttributes>
找不到名称“React”。ts(2304)

这个提示的意思是不支持JSX语法造成的。而不是需要安装 React。只需要在 tsconfig 中配置一下 jsx 语法支持就行了。

  • 在根目录下创建tsconfig.json文件
{
  "compilerOptions": {
      "declaration": true, /* 生成相关的 '.d.ts' 文件。 */
      "declarationDir": "./dist/types", /* '.d.ts' 文件输出目录 */
      "jsx": "preserve",
  },
  "include": [
      "./**/*.*",
      "./src/shims-vue.d.ts"
  ],
  "exclude": [
      "node_modules"
  ],
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": "true"
}
  • 将组件引入index.ts中测试
import { createApp } from "vue";
import JSXButton from "./JSXButton";

createApp(JSXButton)
.mount("#app");
  • 运行项目
pnpm dev
  • 浏览器查看地址
 VITE v3.0.7  ready in 466 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

查看浏览器显示的按钮组件是否正常。


4、库文件封装

参考一下 Element 的使用指南。可以看到组件库有两种引入形态:

  • 完整引入 :一次性引入全部组件,使用 Vue.useVue 插件的形式引入
  • 按需引入 :按需引入,导出单个组件,使用 Vue.component 注册
import Vue from 'vue'
import Element from 'element-ui'

// 完整引入
Vue.use(Element)

// or
import {
  Select,
  Button
  // ...

} from 'element-ui'

// 按需引入
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

综上所述,组件库的形态应该是这样的结构:

可以满足以下的要求:

  • 默认导出为Vue插件
  • 每个组件可以单独导出

首先设计一个入口,包含两个功能:

  • 导出全部组件

  • 实现一个 Vue 插件,插件中编写 install 方法,将所有组件安装到 vue 实例中.

新建目录文件:src/entry.ts

import { App } from "vue";
import MyButton from "./button";
import SFCButton from "./SFCButton.vue";
import JSXButton from "./JSXButton";

// 导出单独组件
export { MyButton, SFCButton, JSXButton };

// 编写一个插件,实现一个install方法

export default {
  install(app: App): void {
    app.component(MyButton.name, MyButton);
    app.component(SFCButton.name, SFCButton);
    app.component(JSXButton.name, JSXButton);
  },

};

默认 Vite 就是可以支持构建,使用 Vite 的 build 命令就可以打包输出。如果导出的是一个库文件的话,还需要配置【导出模块类型】并确定导出的文件名。配置如下:

修改文件 vite.config.ts

const rollupOptions = {

  external: ["vue", "vue-router"],
  output: {
    globals: {
      vue: "Vue",
    },
  },
};

export default defineConfig({

  .....  

  // 添加库模式配置

  build: {
    rollupOptions,
    minify:false,
    lib: {
      entry: "./src/entry.ts",
      name: "SmartyUI",
      fileName: "smarty-ui",
      // 导出模块格式
      formats: ["es", "umd","iife"],
    },
  },
});

修改包配置(package.json)添加打包命令

 "scripts": {
    "build": "vite build"
  },

执行命令

pnpm build

控制台打印

vite v3.0.7 building for production...6 modules transformed.
dist/smarty-ui.mjs   1.02 KiB / gzip: 0.45 KiB
Entry module "src/entry.ts" is using named and default exports together. Consumers of your bundle will have to use `SmartyUI["default"]` to access the default export, which may not be what you want. Use `output.exports: "named"` to disable this warning
dist/smarty-ui.umd.js   1.56 KiB / gzip: 0.67 KiB
Entry module "src/entry.ts" is using named and default exports together. Consumers of your bundle will have to use `SmartyUI["default"]` to access the default export, which may not be what you want. Use `output.exports: "named"` to disable this warning
dist/smarty-ui.iife.js   1.26 KiB / gzip: 0.54 KiB

生成新的文件目录

dist
|----smart-ui.iife.js
|----smart-ui.mjs
|----smart-ui.umd.js

看到提示说明正常导出了。最后编写一个验证页面,测试一下打包结果是否正确。

验证的过程还是基于Vite。首先测试加载全部组件,引用构建完的 smarty-ui.mjs 文件。

创建目录文件:demo/esm/index.html 测试全量导入

<h1>全量加载组件</h1>
<div id="app"></div>
<script type="module">
  import { createApp } from "vue/dist/vue.esm-bundler.js";
  import SmartyUI from "../../dist/smarty-ui.mjs";

  createApp({
    template: `
      <SButton/>
      <JSXButton/>
      <SFCButton/>
    `}).use(SmartyUI).mount('#app')

</script>

创建目录文件:demo/esm/button.html 测试按需导入

<h1>按需加载组件</h1>
<div id="app"></div>
<script type="module">
  import { createApp } from "vue/dist/vue.esm-bundler.js";
  import {
    SFCButton,
    JSXButton,
    MyButton,
  } from "../../dist/smarty-ui.mjs";

  createApp({
    template: `
<SButton/>
<JSXButton/>
<SFCButton/>
`,
  })
    .component(SFCButton.name, SFCButton)
    .component(JSXButton.name, JSXButton)
    .component(MyButton.name, MyButton)
    .mount("#app");
</script>

执行命令启动项目

pnpm dev

访问全量加载URL:http://localhost:5173/demo/esm/index.html

访问按需加载URL:http://localhost:5173/demo/esm/button.html

查看3种按钮组件是否都加载出来了,最后验证结果。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。