添加Arco Design

arco design是字节出的一款UI组件库，相比较Antd和Element设计风格和交互效果都比较理想，并且团队还在不断的更新和维护，是一款比较好用和全面的UI组件库。

1、安装

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

2、引入

import { createApp } from 'vue'

import App from './App.vue'
import router from './router'
import store from './stores'
import ArcoVue from '@arco-design/web-vue'
import ArcoVueIcon from '@arco-design/web-vue/es/icon'

// CSS引入
import './assets/css/main.css'
// 主题颜色
import '@arco-design/web-vue/dist/arco.css'
// import '@arco-themes/vue-arco-admin-pro/css/arco.css'



const app = createApp(App)

app.use(store)
app.use(router)
app.use(ArcoVue)
app.use(ArcoVueIcon)

app.mount('#app')

3、主题更改

arco不在像ant或者element那样通过全局less来修改主题，而是通过主题设计平台配置不同风格的主题，设计好后发布到线上然后开发通过引入对应的主题来使用。

1、创建主题

主题设计可以让设计去创建对应的风格，创建好后发布为npm即可使用。

• 创建主题，设计样式风格 平台首页 (opens new window)

• 设计好然后点击右上角发布按钮，进行发布，发布好后开发就可以引入这个主题包了。

2、引入主题包

安装主题包：

npm i @arco-themes/vue-arco-admin-pro

在main.ts中移除默认样式，添加主题的样式文件：

// 主题颜色
// import '@arco-design/web-vue/dist/arco.css'
import '@arco-themes/vue-arco-admin-pro/css/arco.css'

参考链接：风格配置平台 (opens new window)、Palette 色彩工具 (opens new window)

4、动态使用icon

arco无法直接像antd那样直接动态更改icon类型，需要通过组件转化才能实现。

方法一

使用函数式渲染创建一个公共组件，通过接收icon的名称使用resolveDynamicComponent方法来动态创建一个组件返回出去，然后引入渲染到页面。

/**
 * @desc 动态渲染arco图标
 * 通过resolveDynamicComponent动态渲染组件获得arco组件，然后通过h渲染成Vnode返回，
 * 这样就组装成一个arcoIcon组件，和官方使用方法一样
 * @author changz
 * @param {String} [icon] - icon名称
 * @example 调用示例
 * import ArcoIcon from '@/components/ArcoIcon'
 * <ArcoIcon icon="icon-tag" size="30" :style="{color: 'blue'}"></ArcoIcon>
 * */

import { h, defineComponent, resolveDynamicComponent, type DefineComponent } from 'vue'

export default defineComponent({
  props: {
    icon: String
  },
  setup(props: any) {
    const Component = resolveDynamicComponent(props.icon)
    // 返回渲染函数
    return () => h(<DefineComponent>Component)
  }
})

方法二

直接使用Vue自带的component，它是用于渲染动态组件或元素的“元组件”，它会把传入的字符串或组件名渲染成一个组件并直接引入使用。

<component :is="iconName"></component>

5、加载iconfont图标

这种方式虽然让iconfont图标的使用支持了arco图标的部分属性，但是感觉有点鸡肋。

/**
 * @desc iconfont图标
 * @author changz
 * 通过arco图标提供的addFromIconFontCn方法将生成的在线symbol链接加载到项目图标库中。
 * 然后在main.ts中进行全局注册在组件中直接使用，支持arco图标库部分属性，不支持颜色等其他设置，和svg一样只能在图标库中进行设置。
 * @example 调用示例
 * <icon-font type="icon-add" :size="18" :rotate="45" spin />
 * src为iconfont项目生成的symbol链接，每次图标库更新此链接也要替换。
 * 如果不想这么麻烦可以直接引入iconfot样式进行使用。
 * */

import type { App } from 'vue'
import { Icon } from '@arco-design/web-vue'
const IconFont = Icon.addFromIconFontCn({ src: 'https://at.alicdn.com/t/c/font_4222321_6tg5jydxsia.js' })

// 导出插件
export default {
  install(Vue: App) {
    Vue.component('IconFont', IconFont)
  }
}

// 或者导出全局注册
// export default IconFont
// app.component('IconFont', IconFont)

6、获取声明类型

arco因为较早的支持和使用Vue3写法，所以文档还是早期Vue3过渡版的写法，没有及时更新为TS写法，这导致在开发中需要去找组件的对应类型来进行代码检查。

arco安装后提供了对应的类型声明，我们可以根据要使用的组件和提示来选择声明，如果找不到可以到node_modules安装包的@arco-design/web-vue文件夹下去找.d.ts文件。

import type { FormInstance } from '@arco-design/web-vue/es/form'
import type { RequestOption } from '@arco-design/web-vue/es/upload/interfaces'
import type { TableRowSelection, TableColumnData } from '@arco-design/web-vue'