SoftUI
一个Vue3前端组件库
在线文档
https://sunhy-cn.gitee.io/soft-ui
(可能会出现更新滞后)
通过Npm包引入
安装
# Choose a package manager you like.
# NPM
$ npm install soft-ui-vue3 --save
# Yarn
$ yarn add soft-ui-vue3
# pnpm
$ pnpm install soft-ui-vue3
引入项目
// in main.js
import { createApp } from 'vue'
import SoftUI from 'soft-ui-vue3'
import 'soft-ui-vue3/lib/style.css'
import App from './App.vue'
const app = createApp(App)
app.use(SoftUI)
app.mount('#app')
源码本地打包构建
gitee地址:sunhy/soft-ui
1、获取仓库代码地址:https://gitee.com/sunhy-cn/soft-ui.git;
2、下载至本地:
git clone https://gitee.com/sunhy-cn/soft-ui.git
3、安装依赖:
pnpm install
4、打包构建:
npm run lib
5、将构建出的lib文件内容复制到项目中直接引用,包括:
- lib/global.d.ts // volar类型支持
- lib/soft-ui.umd.js
- lib/style.css
6、在main.ts文件中导入上述文件,或直接在项目index.html中使用标签style
和script
引入
TypeScript类型支持
如果您使用 Volar,请在tsconfig.json
中通过compilerOptions.type
指定全局组件类型。
// in tsconfig.json
{
"compilerOptions": {
// ...
"types": ["soft-ui-vue3/lib/global"]
}
}