g6-ui

快速入门

---

下载依赖

npm i g6-ui -S
or
yarn add g6-ui -S

项目中使用

全局引入

import { createApp } from 'vue'
import App from './App.vue'
import GUI from 'g6-ui'
import 'g6-ui/es/style.css'

const app = createApp(App)
app.use(GUI).mount('#app')

<template>
  <g-select-time></g-select-time>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import 'g6-ui/es/style.css'

const app = createApp(App)
app.mount('#app')

<template>
  <g-select-time></g-select-time>
</template>
<script setup lang="ts">
import { GSelectTime } from 'g6-ui'
</script>
<style lang="less" scoped></style>

常见问题

问题：在全局引入时会丢失类型提示
方案：在tsconfig.json中添加components.d.ts文件，代码如下：

// tsconfig.json
{
  "compilerOptions": {
    ...
  },
  "include": ["...其他配置...", "components.d.ts"],
}

// components.d.ts
import "@vue/runtime-core";
declare module "@vue/runtime-core" {
  export interface GlobalComponents {
    GButton: typeof import("g6-ui")["GButton"];
    GSelectTime: typeof import("g6-ui")["GSelectTime"];
    ...
  }
}
export {};

---

问题：下载出错
方案：切换下载源多试几次