Zsg-component-vue NPM

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>