tiny-vue/import-components.md at dev

5.0 KiB

Raw Permalink Blame History

引入组件

TinyVue 支持自动导入、多组件引入、单组件引入以及完整引入四种方式。

自动导入（推荐）

首先你需要安装 @opentiny/unplugin-tiny-vue 这款插件。

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

然后把以下代码插入到你项目的 Vite 或 Webpack 配置文件中。

Vite

// vite.config.ts

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

export default {
  plugins: [autoImportPlugin('vite')]
}

Webpack

// webpack.config.js

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

module.exports = defineConfig({
  configureWebpack: {
    plugins: [autoImportPlugin('webpack')]
  }
})

这样你就能直接在项目中使用 TinyVue 的组件，这些组件都是自动按需导入的，无需手动导入，且不用担心项目体积变得太大。

你也可以只使用 TinyVueResolver，这样就可以和其他组件库一起使用。

Vite

// vite.config.ts

import Components from 'unplugin-vue-components/vite'
import autoImportPlugin from '@opentiny/unplugin-tiny-vue'

export default {
  plugins: [
    Components({
      resolvers: [TinyVueResolver]
    })
  ]
}

Webpack

// webpack.config.js

const Components = require('unplugin-vue-components/webpack').default
const TinyVueResolver = require('@opentiny/unplugin-tiny-vue').TinyVueResolver

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [TinyVueResolver]
      })
    ]
  }
})

想了解更多自动按需导入的信息，请参考：unplugin-vue-components 和 unplugin-auto-import。

多组件引入

多组件引用即从依赖包 @opentiny/vue 中引用多个组件，参考示例如下（以 Button 和 Alert 组件为例）：

<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>

`vite` 工程多组件引入按需加载和打包配置方法

通过配置 @opentiny/vue-vite-import 插件可以按需只打包 pc 或者移动的组件，减少组件库打包后的体积。

执行以下命令安装 TinyVue 按需加载和打包的 vite 插件

yarn add @opentiny/vue-vite-import
# 或者
npm install @opentiny/vue-vite-import

修改项目的 vite.config.js ，添加以下代码：

import vue from '@vitejs/plugin-vue'
import importPlugin from '@opentiny/vue-vite-import'

export default {
  resolve: {
    extensions: ['.js', '.jsx', '.vue']
  },
  plugins: [
    vue(),
    importPlugin(
      [
        {
          libraryName: '@opentiny/vue'
        },
        {
          libraryName: `@opentiny/vue-icon`,
          customName: (name) => {
            return `@opentiny/vue-icon/lib/${name.replace(/^icon-/, '')}.js`
          }
        }
      ],
      'pc' // 此配置非必选，按需配置(pc|mobile|mobile-first)
    )
  ],
  define: {
    'process.env': { ...process.env }
  }
}

温馨提示：

因为 pnpm 工程的特点之一是：项目中显示引入的依赖需要提前在 package.json 中声明（防止幽灵依赖），所以在 pnpm 工程使用该插件时需要在 package.json 中声明项目用到的每一个 TinyVue 组件依赖（TinyVue 每个组件都是一个 npm 包）。依赖声明可以参考以下配置：

{
  "dependencies": {
    "@opentiny/vue-button": "~3.x.x",
    "@opentiny/vue-alert": "~3.x.x",
    "@opentiny/vue-input": "~3.x.x",
    ...
  }
}

单组件引入

TinyVue 每个组件都可以独立安装、独立使用，即只安装单个组件的依赖并单独引用该组件。

以 Button 和 Alert 组件为例，执行以下命令安装：

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

在页面中的使用 Button 和 Alert 组件的示例如下：

<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>

完整引入（不推荐）

完整引入组件后，就不需每个页面都 import 组件和局部注册，只需在 main.js 中全局注册，但因此会失去 tree-shaking 的能力，打包后会有冗余代码。

Vue 3.0 版本完整引入的示例如下：

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

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

Vue 2.0 版本完整引入的示例如下：

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

Vue.use(TinyVue)

5.0 KiB Raw Permalink Blame History Unescape Escape