Skip to content

Latest commit

 

History

History
179 lines (130 loc) · 3.36 KB

README.zh-CN.md

File metadata and controls

179 lines (130 loc) · 3.36 KB
Raw

Vuesax Alpha - Vue.js 3 UI 库


  • 💪 Vue 3 组合式 API
  • 🔥 使用 TypeScript 编写

English | 简体中文

起步

使用 vuesax-next (vuesax v4)

在这个版本 90% 的 api 都能正常使用. 详情参考 Vuesax 文档

你也可以从 npm 上面使用带 old tag的 版本

# Choose a package manager you like.

# NPM
$ npm install vuesax-alpha@old

# Yarn
$ yarn add vuesax-alpha@old

# pnpm
$ pnpm install vuesax-alpha@old

然后使用 import 导入

import { createApp } from 'vue'
import './style.css'
import vuesax from 'vuesax-alpha'
import 'vuesax-alpha/dist/vuesax.css'

import App from './App.vue'

createApp(App).use(vuesax).mount('#app')

然后, 参考 vuesax-next 文档 去使用它

新版本 - Vuesax-alpha

这个版本的文档和上面那些版本的完全不同，参考 VuesaxAlpha 文档

# Choose a package manager you like.

# NPM
$ npm install vuesax-alpha

# Yarn
$ yarn add vuesax-alpha

# pnpm
$ pnpm install vuesax-alpha

使用

全部导入

// main.ts
import { createApp } from 'vue'
import Vuesax from 'vuesax-alpha'

// style
import 'vuesax-alpha/dist/index.css'
// vuesax darkmode
import 'vuesax-alpha/theme-chalk/dark/css-vars.css'

import App from './App.vue'

const app = createApp(App)

app.use(Vuesax)
app.mount('#app')

暗黑模式

想要使用暗黑模式，你可以创建一个开关来切换html的dark类。

如果你只需要黑色模式，在html上面添加一个dark类就可以了。

<html class="dark">
  <head></head>
  <body></body>
</html>

如果你想要切换它，我推荐 useDark | VueUse.

Volar 支持

如果你使用Volar，请将全局组件类型定义添加到tsconfig.json中的compilerOptions.types中。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["vuesax-alpha/global"]
  }
}

vuesax-next 与 vuesax-alpha 的组件比较

  • Alert
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Card
  • Checkbox
  • Chip
  • Collapse
  • Date picker
  • Datetime picker
  • Dialogs
  • Divider
  • Dropdown
  • Images
  • Input
  • List
  • Loading
  • Navbar
  • Notification
  • Number Input
  • Pagination
  • Popup
  • Progress
  • Radio
  • Select
  • Sidebar
  • Slider
  • Steps
  • Switch
  • Table
  • Tabs
  • Textarea
  • Tooltip
  • Upload
  • Time picker
  • Time select

不兼容变化

一些API目前还不稳定，这里有一个完整的指南，告诉你如何从Vuesax升级到Vuesax Alpha。

你可以在这里找到所有的不兼容变化: Breaking Change List (Updating).

Vuesax Alpha 是一个以MIT为开题协议的软件。

这个项目的构建是基于 Element Plus ❤️ 项目模板。