快速开始

更新: 7/28/2025 字数: 0 字 时长: 0 分钟

本节将介绍如何在项目中使用 zw-web-design。

用法

引入

使用全局安装的方式引入需要的组件

// main.ts
import { createApp } from "vue";
import "zw-web-design/theme-chalk/index.css";
import { RTable } from "zw-web-design";
import App from "./App.vue";

const app = createApp(App);

// 引入组件
app.use(RTable);
app.mount("#app");

Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["zw-web-design/global.d.ts"]
  }
}

手动导入

zw-web-design 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。

// App.vue
<script>
import { RTable } from "zw-web-design";
export default {
  components: { RTable },
};
</script>
<template>
  <RTable>我是 RTable</RTable>
</template>

npm 私服问题

下载 zw-web-design 需要用到 npm 相关账号，请到后台项目复制.npmrc文件到项目根目录