Zarm Vue Next

版本

Alpha版：

基于Vue3.0使用

使用vue-cli初始化Vue3.x项目

Install 安装

npm install zarm-vue-next --save

Import 引入

全组件引入

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，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 添加：

{
  // ...
  "plugins": [["component", {
      "libraryName": "zarm-vue-next",
      "styleLibraryName": "theme"
    }
  ]]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Alert，那么需要在 main.js 中写入以下内容：

import { Button, Alert } from 'zarm-vue-next'
app.use(Button)
app.use(Alert)

也可以通过cdn引入umd模块

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/zarm-vue-next@latest/zarm-vue.default.css">
  <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
  <script src="https://unpkg.com/zarm-vue-next@latest/zarm-vue.umd.js"></script>
</head>
<body>
  <div id="app">
      <za-button theme="primary">普通按钮</za-button>
  </div>
</body>
<script>
  Vue.createApp().mount("#app");
</script>
</html>

暗黑模式

import

// 引入暗黑样式
import 'zarm-vue-next/zarm-vue.dark.css';

umd

<link rel="stylesheet" href="https://unpkg.com/zarm-vue-next@latest/zarm-vue.dark.css">

zarm-vue / zarm-vue-next

Zarm Vue Next

版本

基于Vue3.0使用

Install 安装

Import 引入

暗黑模式

简介

发行版

贡献者

近期动态

zarm-vue / zarm-vue-next .gitee-modal { width: 500px !important; }

Zarm Vue Next

版本

基于Vue3.0使用

Install 安装

Import 引入

暗黑模式

简介

发行版

贡献者

近期动态

搜索帮助

zarm-vue / zarm-vue-next