tiny-vue/import-components-en.md at dev-react

3.1 KiB

Raw Permalink Blame History

Introduction Components

TinyVue supports automatic import, multiple component import, single component import, and complete import.

Auto import (recommended)

First, you need to install the plugin @opentiny/unplugin-tiny-vue.

npm i @opentiny/unplugin-tiny-vue -D

Then, insert the following code into your project's Vite or Webpack configuration file.

Vite

// vite.config.ts

import autoImportPlugin from '@opentiny/unplugin-tiny-vue'

export default {
  plugins: [autoImportPlugin()]
}

Webpack

// webpack.config.js

const autoImportPlugin = require('@opentiny/unplugin-tiny-vue')

module.exports = {
  plugins: [autoImportPlugin()]
}

This way, you can directly use TinyVue components in your project. These components are automatically imported on demand, without the need for manual import, and you don't have to worry about the project size becoming too large.

For more information about automatic on-demand imports, please refer to unplugin-vue-components and unplugin-auto-import.

Multi-component introduction

Multi-component reference is from the dependency package.@opentiny/vueMultiple components are referenced in. The following is an example (in the following figure)ButtonandAlertComponent as an example):

<template>
  <div>
    <tiny-button>TinyVue</tiny-button>
    <tiny-alert description="TinyVue"></tiny-alert>
  </div>
</template>

<script>
  import { Button, Alert } from '@opentiny/vue'

  export default {
    components: {
      TinyButton: Button,
      TinyAlert: Alert
    }
  }
</script>

Single component introduction

TinyVueEach component can be installed and used independently. That is, only the dependency of a single component is installed and referenced independently.

byButtonandAlertFor example, run the following command to install the component:

yarn add @opentiny/vue-button @opentiny/vue-alert
#or
npm install @opentiny/vue-button @opentiny/vue-alert

Use in PagesButtonandAlertAn example of a component is as follows:

<template>
  <div>
    <tiny-button>TinyVue</tiny-button>
    <tiny-alert description="TinyVue"></tiny-alert>
  </div>
</template>

<script>
  import Button from '@opentiny/vue-button'
  import Alert from '@opentiny/vue-alert'

  export default {
    components: {
      TinyButton: Button,
      TinyAlert: Alert
    }
  }
</script>

Full introduction (not recommended)

Once the component is fully introduced, you do not need to import the component and register it locally on every page.main.jsGlobal registration in, but as a result, it losestree-shakingCapabilities. Redundant code is available after packaging.

Vue 3.0The following is an example of the complete introduction of the version:

import { createApp } from 'vue'
import TinyVue from '@opentiny/vue'

const app = createApp(App)
app.use(TinyVue)

Vue 2.0The following is an example of the complete introduction of the version:

import Vue from 'vue'
import TinyVue from '@opentiny/vue'

Vue.use(TinyVue)

3.1 KiB Raw Permalink Blame History