hyt-exam-ui-starter

v0.0.2

Published

a month ago

Vue 3 component library starter template, provides VitePress documentation, supports building ESM, CJS and UMD formats.

Downloads

0High
0Medium
0Low

zengshine

vue3 component library starter

Getting Started

This section will help you set up and start using hyt-exam-ui-starter.

Using Package Manager

::: code-group

npm install hyt-exam-ui-starter

yarn add hyt-exam-ui-starter

pnpm install hyt-exam-ui-starter

:::

Full Import

If you're not concerned about the final bundle size, using full import is more convenient.

// main.ts
import HytExamUiStarter from 'hyt-exam-ui-starter'
import { createApp } from 'vue'
import App from './App.vue'
import 'hyt-exam-ui-starter/style'

const app = createApp(App)

app.use(HytExamUiStarter)
app.mount('#app')

<!-- App.vue -->
<template>
  <StSayHello name="Kieran" />
</template>

Auto Import On Demand

You can achieve component auto import by installing the unplugin-vue-components and unplugin-auto-import plugins.

::: code-group

pnpm add unplugin-vue-components unplugin-auto-import -D

yarn add unplugin-vue-components unplugin-auto-import -D

npm install unplugin-vue-components unplugin-auto-import -D

:::

Then add the following code to your Vite configuration file:

// vite.config.ts
import { HytExamUiStarterResolver } from 'hyt-exam-ui-starter'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [HytExamUiStarterResolver()],
    }),
    Components({
      resolvers: [HytExamUiStarterResolver()],
    }),
  ],
})

Now you can directly use hyt-exam-ui-starter components in SFC files, and their styles will be automatically imported.

<script>
// No need to manually import :P
// import { StSayHello } from 'hyt-exam-ui-starter'
// import 'hyt-exam-ui-starter/dist/es/say-hello/style.css'
</script>

<template>
  <StSayHello name="Kieran" />
</template>

Manual Import On Demand

You can manually import the components you need (components consist of logic files and style files):

<script>
import { StSayHello } from 'hyt-exam-ui-starter'
import 'hyt-exam-ui-starter/dist/es/say-hello/style.css'

export default {
  components: { StSayHello },
}
</script>

<template>
  <StSayHello name="Kieran" />
</template>

Browser Direct Import

You can use the global variable HytExamUiStarter by directly importing through the browser's HTML script tag.

<script src="https://unpkg.com/hyt-exam-ui-starter"></script>

Different CDN providers have different import methods. Here we use unpkg as an example. You can also use other CDN providers.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hyt-exam-ui-starter</title>
</head>

<body>
  <div id="app"></div>

  <script src="https://unpkg.com/hyt-exam-ui-starter"></script>
  <script>
    const app = Vue.createApp({
      template: '<StSayHello name="Kieran" />'
    })
    app.use(HytExamUiStarter).mount('#app')
  </script>
</body>

</html>

Volar Support

If you're using Volar, please specify global component types via compilerOptions.type in tsconfig.json.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["hyt-exam-ui-starter/volar"]
  }
}

Now, you can get component type hints through Volar.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme