位置: 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 ...报错

  • 公司购买员工意外保险费会计分录未收到发票
  • 企业年报修改后,第三方平台多久同步
  • 技术服务费怎么结转成本
  • 怎么知道购货方电话号码
  • 个税手机号码没有了怎么办
  • 一般纳税人印花税税率是多少
  • 房地产企业成本分摊方法整理(附案例分析)
  • 新办商贸企业一般纳税人合同金额
  • 房地产企业所得税汇算清缴
  • 应付账款坏账处理说明
  • 从国外购进样品要交税吗
  • 开发成本可以计增值税吗
  • 申请国家知识产权的条件
  • 电视台广告费可以抵扣吗
  • 计划成本法下会计分录
  • 银行存款未达账项包括
  • 印花税法律制度规定不征收印花税的是什么
  • 年终奖和当月工资合并申报税
  • 收取职工房租 算收入吗
  • 制造业异地安装要预缴增值税吗?如何预缴?
  • 一般纳税人年审证明
  • 往来账的作用
  • 建筑工程发票抵扣有时间限制吗
  • 对外捐赠视同销售分录
  • 产品研发的规则
  • 定期存款利息收入现金流
  • 非居民企业可以享受小微企业所得税优惠政策吗
  • 金融保险属于什么行业
  • 调整上年度多计提的附加税
  • 企业内部股权划拨流程
  • 苹果手机无法加入WiFi
  • 清除cmos数据按钮一直亮
  • php string
  • 转出未交增值税怎么算
  • 百香果的功效与作用及食用方法果的籽能嚼碎吃吗?
  • PHP:pg_get_result()的用法_PostgreSQL函数
  • apkpure 安全
  • php中file
  • phpcgi远程代码执行漏洞
  • php curl设置cookie
  • 挂靠设计公司费用标准 怎么记账
  • php curl file_get_contents
  • 新的企业所得税
  • 工会经费的来源包括
  • 理财产品利息计算方法
  • 帝国cms使用手册
  • canvas实现图片编辑
  • 帝国cms工作流
  • mongodb简单使用
  • 进料加工保税是什么意思
  • 公司归还股东借款是否需要股东会决议
  • 为什么出口退税率低于适用税率
  • 取得其他权益工具投资发生的交易费用
  • 怎样单方面注销手机卡
  • 固定资产的特点有哪几个
  • 年度总预算一般在次年
  • 毛利率计算公式
  • 建筑公司项目
  • 过程要求可包括哪些内容
  • win8已共享但别电脑无权限
  • windowspe安装win7
  • mac 查看当前用户
  • xp显示文件后缀怎么设置
  • PSNGive.exe - PSNGive进程有什么用 是什么意思
  • windowsxp怎么查看用户名密码
  • Nymse.exe - Nymse是什么进程 有何作用
  • 超级管理员不能用winhello
  • 简单射击原理
  • bat 命令大全
  • js中的onchange
  • python class类型
  • unity控制相机旋转
  • javascriptz
  • javascript教程完整版
  • fragment中嵌套fragment
  • 目前光伏太阳能组件产量最高的国家是( )
  • 外省车险保单,有何不利的事
  • 加工修理修配统称为什么
  • 免税发票可以抵多少税
  • 朝阳地税局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设