Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

CmaZiguangzhiyuanTestVue3 组件

这是一个集成了 Element Plus 的 Vue 3 组件，已打包为 UMD 格式，支持多种使用方式。

包信息

• Name: cma-ziguangzhiyuan-test-vue3
• Version: 0.0.0
• Author: CmaZiguangzhiyuan
• License: MIT

构建 UMD 包

npm run build:umd

构建后的文件位于 lib 目录中：

• cma-ziguangzhiyuan-test-vue3.umd.js: 组件的 JavaScript 文件
• cma-ziguangzhiyuan-test-vue3.css: 组件的样式文件

安装方式

通过 npm 安装

npm install cma-ziguangzhiyuan-test-vue3

通过 yarn 安装

yarn add cma-ziguangzhiyuan-test-vue3

使用方式

1. 通过 script 标签引用

<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入 Element Plus -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/element-plus"></script>
<!-- 引入打包后的组件 -->
<link rel="stylesheet" href="./lib/cma-ziguangzhiyuan-test-vue3.css">
<script src="./lib/cma-ziguangzhiyuan-test-vue3.umd.js"></script>

2. 通过 install 注册

import CmaZiguangzhiyuanTestVue3 from 'cma-ziguangzhiyuan-test-vue3';

const app = createApp({...});
app.use(CmaZiguangzhiyuanTestVue3);

3. 通过 import 导入

import CmaZiguangzhiyuanTestVue3 from 'cma-ziguangzhiyuan-test-vue3';

const app = createApp({
  components: {
    CmaZiguangzhiyuanTestVue3
  }
});

开发

启动开发服务器

npm run dev

构建项目

npm run build

构建 UMD 包

npm run build:umd

查看 lib/example.html 和 lib/complete-test.html 文件获取完整的使用示例。