vite + vue3 中使用按需加载

2022-07-04 00:00:11 阅读：281 来源： 互联网

标签：vue counter unplugin vue3 组件 import vite 加载

实现按需加载，主要用到两个插件

该插件主要作用是省去每次使用一个自定义组件，或UI组件库的组件时对组件的引入。兼容不同UI组件库，需要在安装对应UI组件库的前提下，并引入对应UI组件库的 resolvers。

安装

npm i unplugin-vue-components -D

2. 按需自动加载 api 插件， unplugin-auto-import

该插件主要作用省去是对框架本身及相关库的引入、api的引入。

安装

npm i -D unplugin-auto-import

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 实现 组件的按需加载
// 当引入 "unplugin-vue-components/vite 组件之后，页面中需要引入组件的地方就都不需要引入了
import Components from "unplugin-vue-components/vite";
// 引入对应 UI库的 resolver，则对应UI组件库的组件也不需要单独引入了
// 注意 使用具体的UI库，还是要具体 安装 ，比如   npm install -D naive-ui
import {
    AntDesignVueResolver,
    ElementPlusResolver,
    VantResolver,
    NaiveUiResolver,
} from "unplugin-vue-components/resolvers";
// 实现 Vue及Vue相关的库、api的 按需加载
import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
    plugins: [
        vue(),
        Components({
            // extensions: ["vue", "md"],
            resolvers: [
                AntDesignVueResolver(),
                ElementPlusResolver(),
                VantResolver(),
                NaiveUiResolver(),
            ],
        }),
        AutoImport({
            imports: ["vue", "vue-router", "pinia"],
        }),
    ],
});

Home.vue

<script setup>

   <!-- ref 也不需要引入 -->

const counter = ref(0); const inc = () => counter.value++;

</script>
<template>

<div>{{ counter }}</div> <button @click="inc">counter+1</button>

    <!-- 以下组件都可以直接引入 -->
    <Foo></Foo>
    <el-button>elmentplus button</el-button>
    <n-button>naiveui button</n-button>
</template>

<script setup>
    import { useCounterStore } from "../stores/counter.js";
    const counter = useCounterStore();
</script>
<template>
    <div @click="counter.inc()">home {{ counter.num }}</div>
</template>

stores/counter.js

// import { defineStore } from "pinia";  这里也不需要引入

export const useCounterStore = defineStore("counter", {
    state() {
        return {
            num: 1,
        };
    },
    actions: {
        inc() {
            this.num++;
        },
    },
});

3.如果想要实现按需自动加载项目中的 api 插件，vite-auto-import-resolvers

安装

npm i vite-auto-import-resolvers unplugin-auto-import -D

// vite.config.js
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AutoImports from 'unplugin-auto-import/vite'
import {
    dirResolver,
    DirResolverHelper
} from 'vite-auto-import-resolvers'

export default defineConfig({
    plugins: [
        Vue(),
        // 该辅助插件也是必需的  
 
标签：vue,counter,unplugin,vue3,组件,import,vite,加载	

来源： https://www.cnblogs.com/beileixinqing/p/16441368.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vite + vue3 中使用按需加载