快速上手

Vue 版本

vue >= 3.2.0

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

安装

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

完整引入

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 和 unplugin-auto-import 这两款插件来开启按需加载及自动导入的支持。插件会自动解析模板中的使用到的组件，并导入组件和对应的样式文件。需要组件库 version >= 2.11.0。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { SDResolver } from 'unplugin-vue-components/resolvers';

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

注意：这种方法并不会处理用户在 script 中手动导入的组件，比如 Message 组件，用户仍需要手动导入组件对应的样式文件，例如 @sdata/web-vue/es/message/style/css.js。

按需加载与组件库主题（SD 插件）

另外也可以使用 SD 提供的 Vite 插件进行按需加载和组件库样式配置，@sd-plugins/vite-vue 插件会自动加载组件样式。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { vitePluginForSD } from '@sd-plugins/vite-vue';

export default defineConfig({
  plugins: [
    vue(),
    vitePluginForSD({
      style: 'css',
    }),
  ],
});

全局配置

在引入 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');

导入组件

组件库在 2.44.3 版本为了兼容 nuxt3 环境，增加 exports 配置。这个配置会对组件库的导入产生一定影响，使用中建议从 @sdata/web-vue 和 @sdata/web-vue/es/icon 导入组件库和图标。

浏览器兼容性

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

• and_chr>=118
• and_ff>=118
• chrome>=118
• edge>=118
• firefox>=118
• ios_saf>=17.0
• safari>=17.0