首页 > 其他分享 >unplugin-vue-components(按需加载使用的组件)

unplugin-vue-components(按需加载使用的组件)

时间:2022-11-15 13:44:10浏览次数:53  
标签:vue unplugin components 组件 import vite

作用

unplugin-vue-components 是由 vite-plugin-components重名而来,可以将项目中的组件按需引用,仅注册你使用的组件。

//平时我们在页面使用组件
<template>
	<comp/>
</template>
<script>
import { definconfig } from "vue"
import comp from "./src/components/comp.vue"
export default definconfig({
	name:"page1",
	components:{ comp }
	})
<script>
// 引入unplugin-vue-components之后
 <template>
 	<comp/>
 </template>
 <script>
 //不需要任何相关内容
 </script>

安装

cnpm install unplugin-vue-components

vite.config.ts文件中的配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite' //当前提及内容

export default defineConfig({
  plugins: [
   	vue(),
    Components(), //当前内容
  ],
}

标签:vue,unplugin,components,组件,import,vite
From: https://www.cnblogs.com/guozhiqiang/p/16892152.html

相关文章

  • vue+echarts绘制地图
    代码实现importchinaJsonfrom'echarts/map/json/china.json'exportdefault{mounted(){letmyChart=this.$echarts.init(document.getElementById("......
  • vue-plugin-Pages自动配置路由
    vite-plugin-pages使用安装首先先安装依赖。因为模版里自带了vue-router,所以不需要再安装。cnpmaddvite-plugin-pagesvite-plugin-vue-layouts-D在vite.config......
  • vue3 获取组件实例 $ref方法踩坑 getCurrentInstance()
    ps:我使用的是element-plus框架,有一个需求是级联选择器,选择后需要获取最后的id和label一起传递给后端。获取id比较简单在change事件中使用value.pop()就可以获得但是获取......
  • Vue3+Vite简单使用
    前言Vue3大势不可阻挡,与之而来的就是Vite,尤雨溪极力推荐的前端开发与构建工具vue3原生支持TS,所以TS语法和vue3TS语法学起来vue中的vuex状态管理也用不顺手,看不顺......
  • Vue使用axios请求
    新建组件(局部引入):<template><div><p>{{msg}}</p></div></template><script>importaxiosfrom'axios';importQueryStringfrom'qs';exportde......
  • vue+element实现拖拽分屏
    实现效果:使用鼠标点击分割线拖动,可实现左右展示框宽度(也可修改为高度)的变化,如下图1、封装组件首先需要封装按钮点击的这条线,计算鼠标点击后滑动的距离:<template><di......
  • Vue 拦截器思路
    //数据响应拦截器,统一处理返回的数据逻辑axios.interceptors.response.use(res=>{if(res&&res.status==HTTP_STATUS.SUCCESS){returnres.data;}els......
  • 【Vue3】本地没问题,部署后 public 下的某些资源 404 不能访问
    如果你本地没问题,线上访问出现404,你得看看你public下面得资源文件夹命名是不是和.gitignore下得配置文件冲突了,我就是命名为dist导致直接被忽略了,重新改了个名字后......
  • vuecli作用域插槽
    <template><divid="app"class="container"><Categorytitle="美食"><templatescope="{games}"><ul><liv-for="(g,inde......
  • vue源码分析-基础的数据代理检测
    简单回顾一下这个系列的前两节,前两节花了大量的篇幅介绍了Vue的选项合并,选项合并是Vue实例初始化的开始,Vue为开发者提供了丰富的选项配置,而每个选项都严格规定了合并的策......