zsg-component-vue
v1.0.23
Published
vue3 UI组件库
Downloads
12
Readme
zsg-component-vue
下载组件
yarn install zsg-component-vue全局引入
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ZsgComponentVue from 'zsg-component-vue'
import 'zsg-component-vue/lib/ZsgComponentVue.css'
createApp(App)
.use(ZsgComponentVue)
.mount('#app')全局引入部分组件
方法一
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { ZsgButton } from 'zsg-component-vue'
import 'zsg-component-vue/lib/ZsgComponentVue.css'
createApp(App)
.use(ZsgButton)
.mount('#app')方法二(优雅些)
新建个js文件集中管理组件
// ZsgComponentVue.js
import { ZsgButton } from 'zsg-component-vue'
export const ZsgComponentVue = [ ZsgButton ]// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { ZsgComponentVue } from './ZsgComponentVue.js'
import 'zsg-component-vue/lib/ZsgComponentVue.css'
const app = createApp(App)
ZsgComponentVue.forEach((item)=>{
app.use(item)
})
app.mount('#app')Get on unpkg and cdnjs
直接通过浏览器的 HTML 标签导入组件，然后就可以使用全局变量 ZsgComponentVue 了
unpkg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入样式 -->
<link rel="stylesheet" href="https://unpkg.com/zsg-component-vue/lib/ZsgComponentVue.css" />
<!-- 导入 Vue 3 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 导入组件库 -->
<script src="https://unpkg.com/zsg-component-vue"></script>
</head>
<body>
<div id="app">
<zsg-button>{{ message }}</zsg-button>
</div>
<script>
const App = {
data() {
return {
message: "Hello"
}
}
}
const app = Vue.createApp(App);
app.use(ZsgComponentVue);
app.mount("#app");
</script>
</body>
</html>
jsDelivr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zsg-component-vue/lib/ZsgComponentVue.css" />
<!-- 导入 Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<!-- 导入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/zsg-component-vue"></script>
</head>
<body>
<div id="app">
<zsg-button>{{ message }}</zsg-button>
</div>
<script>
const App = {
data() {
return {
message: "Hello"
}
}
}
const app = Vue.createApp(App);
app.use(ZsgComponentVue);
app.mount("#app");
</script>
</body>
</html>
使用
<template>
<ZsgButton>默认按钮</ZsgButton>
<ZsgButton type="primary">主要按钮</ZsgButton>
<ZsgButton type="success">成功按钮</ZsgButton>
<ZsgButton type="info">信息按钮</ZsgButton>
<ZsgButton type="warning">警告按钮</ZsgButton>
<ZsgButton type="danger">危险按钮</ZsgButton>
</template>License
MIT © 2022-present, 赵仕广, [email protected]