开发一个Vue组件

Posted 天界程序员

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了开发一个Vue组件相关的知识，希望对你有一定的参考价值。

第二章 开发一个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 默认的包是不支持模板编译功能, 这里需要安装vite的Vue插件,也就是上面的解决方案步骤。

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.use 以 Vue 插件的形式引入；
  • 按需引入 ：按需引入，导出单个组件，使用 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种按钮组件是否都加载出来了，最后验证结果。

以上是关于开发一个Vue组件的主要内容，如果未能解决你的问题，请参考以下文章

vue 挂载 理解

React组件略讲

vue全家桶组件化开发

09-vue组件化开发

09-vue组件化开发

09-vue组件化开发