使用指南

安装

# 使用整个gw-vue-ui
yarn add gw-vue-ui -S
# or
npm install gw-vue-ui -S

# 使用单个组件
npm install @gw-vue-ui/button

示例工程

• 基于 Vue Cli 搭建应用
• 基于 Vite 搭建应用

引入组件

方式一. 导入所有组件

// plugins/gw-vue-ui.js

import Vue from 'vue'
import gwVueUI from 'gw-vue-ui'
import 'gw-vue-ui/lib/style/index.scss'

Vue.use(gwVueUI)

方式二. 使用插件 babel-plugin-import (推荐)按需引入

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

// .babelrc
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'gw-vue-ui',
      libraryDirectory: 'es',
      style: (name) => `${name}/style/scss` // 设置true,引入组件样式
    }, 'gw-vue-ui']
  ]
}

接着你可以在代码中直接引入 gw-vue-ui 组件使用

import { Button } from 'gw-vue-ui'

components: {
  GwButton: Button
}

也可以全局注册

// plugins/gw-vue-ui.js

import Vue from 'vue'
import {
  Button,
  CellGroup,
  Cell,
  Icon,
  Image,
  ImageClipping
} from 'gw-vue-ui'
Vue.component('GwButton', Button)
Vue.component('GwCellGroup', CellGroup)
Vue.component('GwCell', Cell)
Vue.component('GwIcon', Icon)
Vue.component('GwImage', Image)
Vue.component('GwImageClipping', ImageClipping)

方式三. 不使用插件的按需引入

import Button from 'gw-vue-ui/lib/button'
import 'gw-vue-ui/lib/button/style/index.js'