# acro-plus
弄着玩的 不要用
PC UI Components built on Vue3

## 开发

```bash
# 初始化
yarn install

# 启动
yarn run dev

# 打包
yarn run build

# 本地预览包内容
yarn run serve

# 打包组件库
yarn run lib
```

## 使用 arco-plus

### 安装

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

### 完整引入

```js
# 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`。

```bash
yarn add babel-plugin-import -D
```

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

```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`:

```bash
yarn add vite-plugin-style-import -D
```

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

```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}`;
          }
        }
      ]
    }),
    ...
  ]
})
```

**单文件组件中使用**

```js
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'`