# zarm-vue-next
**Repository Path**: zarm-vue/zarm-vue-next
## Basic Information
- **Project Name**: zarm-vue-next
- **Description**: Vue3.0 UI Component
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://zarm-vue.gitee.io/zarm-vue-next/#/documents/quick-start
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-03-26
- **Last Updated**: 2021-07-30
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Zarm Vue Next
### 版本
- Alpha版：[](https://www.npmjs.org/package/zarm-vue-next)
### 基于Vue3.0使用
- 使用`vue-cli`初始化**Vue3.x**项目
### Install 安装
```bash
npm install zarm-vue-next --save
```
### Import 引入
- 全组件引入
```javascript
import { createApp } from 'vue';
import zarmVue from 'zarm-vue-next';
// 引入全局样式
import 'zarm-vue-next/zarm-vue.default.css';
const app = createApp(App);
app.use(zarmVue);
```
- 按需引入
借助`ElementUI`提供的[babel-plugin-component](https://github.com/ElementUI/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
```bash
npm install babel-plugin-component -D
```
然后，将 .babelrc 添加：
```javascript
{
// ...
"plugins": [["component", {
"libraryName": "zarm-vue-next",
"styleLibraryName": "theme"
}
]]
}
```
接下来，如果你只希望引入部分组件，比如 Button 和 Alert，那么需要在 main.js 中写入以下内容：
```javascript
import { Button, Alert } from 'zarm-vue-next'
app.use(Button)
app.use(Alert)
```
- 也可以通过cdn引入umd模块
```html
普通按钮
```
### 暗黑模式
- import
```javascript
// 引入暗黑样式
import 'zarm-vue-next/zarm-vue.dark.css';
```
- umd
```html
```