位置: IT常识 - 正文

Vue3自动引入组件,组件库(vue组件引入外部js)

编辑:rootadmin
Vue3自动引入组件,组件库

推荐整理分享Vue3自动引入组件,组件库(vue组件引入外部js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue组件引入外部js,vue引入插件方法,vue引入插件方法,vue引入自定义组件,vue3自动引入组件,vue引进组件的步骤,vue组件引用自己,vue3自动引入组件,内容如对您有帮助,希望把文章链接给更多的朋友!

在做vue3项目中时,每次使用都需要先进行引入,用ts的还好,会有爆红提示,如果是使用js开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入,就会很浪费时间,偶然发现一款好用的组件可以帮助我们很好的解决这种问题。

首先下载

安装

yarn add unplugin-auto-import -D  

引入

在vite.config.ts中 

因为是插件 所以在我们的plugins下 写入我们导入的名字

imports 

在我们的 AutoImport 下第一个属性 imports  代表着的就是我们那些文件需要自动导入

我们这里就写了vue vue-router pinia 在项目中使用的时候就可以不用我们手动导入直接使用了

这里注意我们的imports 是一个数组

dts

第二个属性就是我们的dts

dts为true就代表着会自动生成一个ts文件可以查看导入的信息。

include

这里include是可以匹配对应的文件

是一个数组里面写匹配的正则

引入

在引入的时候需要引入unplugin-auto-import下的vite

import AutoImport from 'unplugin-auto-import/vite' plugins: [vue(),Vuejsx(), AutoImport({ include: [ /\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, ], dts: true, imports: ['vue', 'vue-router', 'pinia'] })]

然后在页面使用

会发现爆红,这里是因为在当前页面没有引用导致,(这就是这个组件使用ts的缺陷还没找到解决办法)不用管它 直接运行项目

运行不会有报错

发现会在src同级目录下自动生成一个同级文件 auto-imports.d.ts

打开会发现里面有我们各种的导入

 到这里我们的引入就完成了。

自动引入组件库安装

yarn add unplugin-vue-components -D

下载ant-design测试

npm i --save ant-design-vue

在vite.config.ts中引入

import Components from 'unplugin-vue-components/vite' 

在引入import { } from 'unplugin-vue-components/resolvers' ctry加鼠标进入resolvers.d.ts

Vue3自动引入组件,组件库(vue组件引入外部js)

 里面有各大主流组件库的名字 找到我们需要引入的组件库 ant -design(需要配置其他的组件库可找对应组件库名)

找到并引入 AntDesignVueResolver

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

 首先也需要在plugins中引入我们定义的名字 Components

Components({})

是一个对象

dts

第一个参数跟上面一样设置为true也是会自动生成一个d.ts的文件

dirs

第二个参数就是dirs就是配置你的目录,你可以设置src,或者src/componets或者你需要配置的地方的组件让他自动导入,其他的组件不管

extensions

扩展属性

['vue', 'jsx', 'tsx', 'ts', 'js'],

resolvers

最后这个resolvers就是我们的包自动导入

将我们上面引入的AntDesignVueResolver导进来进行配置

  resolvers: [         AntDesignVueResolver({         })       ]

Components({ dts: true, dirs: ['src/components'], extensions: ['vue', 'jsx', 'tsx', 'ts', 'js'], resolvers: [ AntDesignVueResolver({ }) ] })AntDesignVueResolver

importStyle

就是AntDesignVueResolver第一个参数 可以设置我们的less预处理器

importLess

需要 设置为true开启

这里的操作配置就相当于引入的包以less的方式导入,

这里支持less 就需要将less也在项目中配置

CSS配置less下载less less-loader

yarn add less less-loader -D

在preprocessorOptions中配置less,因为是主要讲自动安装,这里配置就不详细讲了

css: { // https://cn.vitejs.dev/config/#css-preprocessoroptions preprocessorOptions: { less: { modifyVars: { // 此处也可设置直角、边框色、字体大小等 'primary-color': '#27ba9b' }, javascriptEnabled: true, lessOptions: { javascriptEnabled: true }, }, }, },

在app.vue中导入一个button

<script setup lang="ts">const msg = ref<string>("");</script><template> <input type="text" v-model="msg" /> {{ msg }} <a-button type="primary">Primary Button</a-button></template>

运行

自动生成components.d.ts文件

 里面就是组件帮助我们自动创建的,这里创建的子组件也不需要引入即可使用

 可以发现我们的HellowWord没有引入也可以在页面中使用,就是因为在components.d.ts中已经自动导入了。

看到这里有没有马上在项目中使用的想法呢?

好啦,到这里我们的Vue3自动引入组件,组件库就完成了。

最后附上完整代码

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Vuejsx from '@vitejs/plugin-vue-jsx'import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/export default defineConfig({server:{ open:true, port:8080, host:'localhost', headers: { 'Access-Control-Allow-Origin':'*',},// 配置代理 }, css: { // https://cn.vitejs.dev/config/#css-preprocessoroptions preprocessorOptions: { less: { modifyVars: { // 此处也可设置直角、边框色、字体大小等 'primary-color': '#27ba9b' }, javascriptEnabled: true, lessOptions: { javascriptEnabled: true }, }, }, },plugins: [vue(),Vuejsx(), AutoImport({ include: [ /\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, ], dts: true, imports: ['vue', 'vue-router', 'pinia'] }), Components({ dts: true, dirs: ['src/components'], extensions: ['vue', 'jsx', 'tsx', 'ts', 'js'], resolvers: [ AntDesignVueResolver({ importStyle: 'less', importLess: true }) ] })]})

如果你还有什么问题你可以选择↓↓↓

微信公众号搜索 海海学前端 来了解更多

本文链接地址:https://www.jiuchutong.com/zhishi/293099.html 转载请保留说明!

上一篇:ECharts设置x轴刻度间隔的两种方法(echartx轴刻度设置)

下一篇:DOMException: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node ...报错

  • 普田油烟机拆洗教程(普田油烟机)(普田油烟机拆洗视频)

    普田油烟机拆洗教程(普田油烟机)(普田油烟机拆洗视频)

  • excel表格下拉数字不递增怎么解决(EXCEL表格下拉数字怎么不递增)

    excel表格下拉数字不递增怎么解决(EXCEL表格下拉数字怎么不递增)

  • 小米体脂称2和1有什么区别(小米体脂称2和云麦好轻mini2哪个好)

    小米体脂称2和1有什么区别(小米体脂称2和云麦好轻mini2哪个好)

  • 拼多多下单返5元什么意思(拼多多下单返50元是真的吗)

    拼多多下单返5元什么意思(拼多多下单返50元是真的吗)

  • 微信怎么恢复日间模式(微信怎么恢复日间)

    微信怎么恢复日间模式(微信怎么恢复日间)

  • 华为p40是曲面屏还是直面屏(华为P40是曲面屏吗)

    华为p40是曲面屏还是直面屏(华为P40是曲面屏吗)

  • nova7pro有红外线吗(nova7带红外线)

    nova7pro有红外线吗(nova7带红外线)

  • 拉黑买家评价还会生效吗(拉黑卖家还能评价吗)

    拉黑买家评价还会生效吗(拉黑卖家还能评价吗)

  • 怎样移动手机桌面图标(怎样移动手机桌面图标到自己想要的位置上面呢)

    怎样移动手机桌面图标(怎样移动手机桌面图标到自己想要的位置上面呢)

  • 抖音没关注能发消息吗(抖音没关注能发红包吗)

    抖音没关注能发消息吗(抖音没关注能发红包吗)

  • 手机号副卡注册的微信号对主卡微信有影响吗(手机卡办理副号)

    手机号副卡注册的微信号对主卡微信有影响吗(手机卡办理副号)

  • oppo桌面壁纸自动切换(oppo桌面壁纸自动更换怎么设置方法)

    oppo桌面壁纸自动切换(oppo桌面壁纸自动更换怎么设置方法)

  • 华为被刷机还能定位嘛(华为刷机还能找回吗)

    华为被刷机还能定位嘛(华为刷机还能找回吗)

  • ipadmini4有16g的吗(ipadmini4有16g版本吗)

    ipadmini4有16g的吗(ipadmini4有16g版本吗)

  • 抖音未成年能不能直播(抖音未成年能不能加入粉丝团)

    抖音未成年能不能直播(抖音未成年能不能加入粉丝团)

  • mq8j2ch a是什么型号(mq8j2cha是什么型号)

    mq8j2ch a是什么型号(mq8j2cha是什么型号)

  • 计算机主机背面有哪些接口(电脑主机背面)

    计算机主机背面有哪些接口(电脑主机背面)

  • 华为手机哪里下载微信(华为手机怎样下载软件)

    华为手机哪里下载微信(华为手机怎样下载软件)

  • 探探在哪取消活跃(探探如何取消)

    探探在哪取消活跃(探探如何取消)

  • 红米k20pro支持typc耳机吗(红米k20Pro支持WiFi6)

    红米k20pro支持typc耳机吗(红米k20Pro支持WiFi6)

  • 华为p30pro几个摄像头(华为p30pro几个摄像头干嘛用)

    华为p30pro几个摄像头(华为p30pro几个摄像头干嘛用)

  • ipadpro与ipadair区别(ipadpro和ipadair哪个好)

    ipadpro与ipadair区别(ipadpro和ipadair哪个好)

  • s10开发者选项(s10打开开发者模式)

    s10开发者选项(s10打开开发者模式)

  • 唯品会怎么申请退款(唯品会怎么申请保价)

    唯品会怎么申请退款(唯品会怎么申请保价)

  • 如何激活Windows 11正式版?Win11正式版激活序列号KE大全(如何激活windows11专业版?)

    如何激活Windows 11正式版?Win11正式版激活序列号KE大全(如何激活windows11专业版?)

  • 结合表单验证谈el-form中model、prop、rules属性(表单验证用什么方法实现)

    结合表单验证谈el-form中model、prop、rules属性(表单验证用什么方法实现)

  • 关联方的借款用什么科目核算
  • 企业新成立,何种情况下需要开始记账报税
  • 驾驶员培训服务税率
  • 高速公路通行费电子发票怎么打印
  • 公司收到生育津贴不发给员工 分录
  • 营业额和营业收入区别举例
  • 生产车间安装监控的目的
  • 软件产品出口退税条件
  • 税务外管证取消了吗
  • 企业股利分配政策有哪些
  • 土地使用权增资方案
  • 契税差别
  • 厂家订货会合同
  • 生产企业固定资产折旧
  • 工地水电包公包料的细节
  • 住宅租给公司办什么手续
  • 虚开增值税专用发票罪判决书
  • 免税销售额收入不含税收入怎么算
  • 小微企业所得税税率2.5% 10% 25%
  • 取消票种核定需什么手续
  • 银行扣的短信费银行给开发票吗
  • 企业搬迁至外地怎么办理
  • 土地使用税从什么时候开始算
  • 个体户和有限公司哪个税收低
  • 净资产收益率公式推导
  • 汇兑损益 纳税调整
  • 重装win10系统怎么跳过创建用户名
  • 华为鸿蒙harmonyos官网4.0
  • php -i
  • 税务登记后每个月交什么钱
  • PHP:stream_set_chunk_size()的用法_Stream函数
  • 存货损失的会计分录
  • 应付票据到期会计分录怎么做
  • 短期投资的入账金额包括已宣告未发放的现金股利
  • php获取mysql数据
  • 交易性金融资产属于流动资产
  • php上传照片
  • 帝国cms手机端点击加载不动怎么弄
  • 财务费用汇兑损益在借方还是贷方
  • 销售费用占销售成本比例
  • 退货可以开红字发票吗
  • 充话费自定额
  • 建筑公司包含哪些业务
  • 电商每天利润表怎么做
  • 海关票怎么做账
  • 企业利润分配项目是什么
  • sql server 2008 r2 express 精简版与企业版的区别
  • sql如何设置远程连接
  • 产假工资扣税
  • 消防工程公司的成本包括哪些
  • 分月摊销怎么处理
  • 汽车配件属于什么业务类型
  • 公司应该怎么记账
  • 外籍人员个税汇算清缴流程
  • 股权过户费用
  • 三栏明细账本怎样填写
  • 开销项负数的流程
  • 收到固定资产怎么做账
  • 支票取钱不是本人要带什么
  • 公司借款流程
  • 商业企业所有者的权益
  • sql2008r2镜像
  • vc++6.0运行程序
  • ubuntu设置默认编辑器
  • mac显示器颜色不一致
  • win8怎么看windows
  • win7系统本身会占用多少空间
  • scheduler.exe - scheduler是什么进程 有何作用
  • win8删除文件很慢
  • linux本地解析
  • linux哪里好
  • 水下摄影技巧
  • 人物移动素材
  • jquerygrid
  • 猫的所有视频
  • js行号显示的文字不一样
  • 每天一篇小练笔30字
  • javascript面向对象编程指南
  • 全国书法等级考试官网
  • 外贸企业出口退税会计分录怎么做
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设