fzui-designAppearance
使用 fz-arco-design
本节将介绍如何在项目中使用 Fz Arco Design。
环境支持
当前封装所使用的库版本
- arco-design 版本为：
2.37+ - vue 版本为：
3.2.+
安装
1. 使用包管理器
# NPM
npm install fz-arco-design
# Yarn
yarn install fz-arco-design
# pnpm
pnpm install fz-arco-design
快速开始
1. 完整引入
fz-arco-design 将会在Vue应用中进行全局组件注册。
// main.ts
import { createApp } from 'vue'
import FzArcoDesign from 'fz-arco-design'
import 'fz-arco-design/dist/style.css'
const app = createApp(App)
app.use(FzArcoDesign)
2. 按需引入
需要在使用组件的地方手动对 Fz组件 进行导入。
<!-- App.vue -->
<template>
<fz-table :columns="columns" :data="data" />
</template>
<script setup>
import { FzTable } from 'fz-arco-design'
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Salary',
dataIndex: 'salary',
},
{
title: 'Address',
dataIndex: 'address',
},
{
title: 'Email',
dataIndex: 'email',
},
];
const data = reactive([{
key: '1',
name: 'Jane Doe',
salary: 23000,
address: '32 Park Road, London',
email: 'jane.doe@example.com'
}, {
key: '2',
name: 'Alisa Ross',
salary: 25000,
address: '35 Park Road, London',
email: 'alisa.ross@example.com'
}, {
key: '3',
name: 'Kevin Sandra',
salary: 22000,
address: '31 Park Road, London',
email: 'kevin.sandra@example.com'
}, {
key: '4',
name: 'Ed Hellen',
salary: 17000,
address: '42 Park Road, London',
email: 'ed.hellen@example.com'
}, {
key: '5',
name: 'William Smith',
salary: 27000,
address: '62 Park Road, London',
email: 'william.smith@example.com'
}]);
</script>
注意事项
关于原生库
组件库打包时会对第三方包如 arco-design 、vue 进行 externals 处理，所以务必保证使用组件的项目中导入必须要的第三方库。