快速上手

Vue 版本

vue >= 3.2.0

注意：由于 Vue3 不再支持 IE 浏览器环境，SDVue 也不再支持 IE 浏览器环境。

安装

# npm
npm install --save-dev @sdata/web-vue
# yarn
yarn add --dev @sdata/web-vue

# 自动导入解析器
pnpm add -D @sdata/web-vue-auto-import-resolver unplugin-vue-components

完整引入

import { createApp } from 'vue';
import SDVue from '@sdata/web-vue';
import App from './App.vue';
import '@sdata/web-vue/dist/sd.css';

const app = createApp(App);
app.use(SDVue);
app.mount('#app');

按需加载（模板）

如果使用模板方式进行开发，可以使用 unplugin-vue-components 和 @sdata/web-vue-auto-import-resolver 开启按需加载和组件自动导入。插件会自动解析模板中的组件，并导入组件和对应的样式文件。

注意：@sdata/web-vue-auto-import-resolver 当前不支持 SSR。SSR 项目请使用完整引入，或在服务端渲染方案里自行处理组件与样式加载。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { SdDesignResolver } from '@sdata/web-vue-auto-import-resolver';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        SdDesignResolver({
          sideEffect: true,
        }),
      ],
    }),
  ],
});

注意：这种方法只会处理模板里使用到的组件。如果你在 script 里手动导入了 Message 之类的 API，仍然需要按实际使用场景手动处理样式入口。

如果你的项目调整了 app.use(SDVue, { componentPrefix }) 的组件前缀，也可以把同样的前缀传给解析器：

SdDesignResolver({
  prefix: 'Acme',
  sideEffect: true,
});

全局配置

在引入 SDVue 时，可以传入一个全局配置对象。

import { createApp } from 'vue';
import SDVue from '@sdata/web-vue';
import App from './App.vue';
import '@sdata/web-vue/dist/sd.css';

const app = createApp(App);
app.use(SDVue, {
  componentPrefix: 'sd',
});
app.mount('#app');

浏览器兼容性

以下版本号基于当前 Browserslist 配置自动生成：

• and_chr>=119
• and_ff>=120
• chrome>=119
• edge>=119
• firefox>=120
• ios_saf>=17.0
• safari>=17.0