acro-plus

弄着玩的 不要用 PC UI Components built on Vue3

开发

# 初始化
yarn install

# 启动
yarn run dev

# 打包
yarn run build

# 本地预览包内容
yarn run serve

# 打包组件库
yarn run lib

使用 arco-plus

安装

pnpm add arco-plus @arco-design/web-vue

完整引入

# main.js

import { createApp } from 'vue'

import ArcoVue from '@arco-design/web-vue';
import AcroPlus from 'acro-plus';
import 'acro-plus/lib/theme-chalk/index.css';

//为了方便组件开发，AcroPlus已经全局引入了ArcoVue样式，
//项目中无需再引入@arco-design/web-vue/dist/arco.css。

const app = createApp(App)
app.use(ArcoVue)
app.use(ArcoPlus)

按需引入

注意

为了避免开发组件库时，频繁引入acro css，仍需在全局引入import 'acro-plus/lib/theme-chalk/index.css';

Vue CLI

借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的，首先安装 babel-plugin-import。

yarn add babel-plugin-import -D

然后，在 babel.config.js 中配置

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'arco-plus',
        libraryDirectory: 'lib',
        customStyleName: name => {
          return `arco-plus/lib/theme-chalk/${name}.css`;
        }
      },
      'acro-plus'
    ]
  ]
};

Vite

首先，安装 vite-plugin-style-import:

yarn add vite-plugin-style-import -D

然后，在 vite.config.js 中配置

import styleImport from 'vite-plugin-style-import';

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'arco-plus',
          ensureStyleFile: true,
          resolveStyle: name => {
            return `arco-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: name => {
            return `arco-plus/es/${name}`;
          }
        }
      ]
    }),
    ...
  ]
})

单文件组件中使用

import { SoButton } from 'acro-plus';

export default {
  components: { SoButton }
};

这段代码在生产环境将被解析为

• import ApButton from 'acro-plus/es/ap-button'
• import 'arco-plus/lib/theme-chalk/ap-button.css'