教你5个让Vue3开发更顺畅的知识点

本篇文章给大家带来了关于vue中开发相关知识,整理了5个可以提高开发效率的小知识,让你在 Vue3 的项目开发中更加丝滑、顺畅,希望对大家有帮助。 一、setup name 增强 ...

本篇文章给大家带来了关于vue中开发相关知识,整理了5个可以提高开发效率的小知识,让你在 Vue3 的项目开发中更加丝滑、顺畅,希望对大家有帮助。

教你5个让Vue3开发更顺畅的知识点插图1

一、setup name 增强

Vue3的setup语法糖是个好东西,但使用setup语法带来的第一个问题就是无法自定义name,而我们使用keep-alive往往是需要name的,解决这个问题通常是通过写两个script标签来解决,一个使用setup,一个不使用,但这样必然是不够优雅的。

<script>import{defineComponent,onMounted}from'vue'exportdefaultdefineComponent({name:'OrderList'})</script><scriptsetup>onMounted(()=>{console.log('mounted===')})</script>

这时候借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题,不用写两个script标签,可以直接在script标签上定义name。

安装

npmivite-plugin-vue-setup-extend-D

配置

//vite.config.tsimport{defineConfig}from'vite'importVueSetupExtendfrom'vite-plugin-vue-setup-extend'exportdefaultdefineConfig({plugins:[VueSetupExtend()]})

使用

<scriptsetupname="OrderList">import{onMounted}from'vue'onMounted(()=>{console.log('mounted===')})</script>

二、API 自动导入

setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用,大大的解放了我们的双手。然而对于一些常用的VueAPI,比如ref、computed、watch等,还是每次都需要我们在页面上手动进行import。

我们可以通过unplugin-auto-import实现自动导入,无需import即可在文件里使用Vue的API。

安装

npmiunplugin-auto-import-D

配置

//vite.config.tsimport{defineConfig}from'vite'importAutoImportfrom'unplugin-auto-import/vite'exportdefaultdefineConfig({plugins:[AutoImport({//可以自定义文件生成的位置,默认是根目录下,使用ts的建议放src目录下dts:'src/auto-imports.d.ts',imports:['vue']})]})

安装配置完会自动生成auto-imports.d.ts文件。

//auto-imports.d.ts//Generatedby'unplugin-auto-import'//Wesuggestyoutocommitthisfileintosourcecontroldeclareglobal{constcomputed:typeofimport('vue')['computed']constcreateApp:typeofimport('vue')['createApp']constcustomRef:typeofimport('vue')['customRef']constdefineAsyncComponent:typeofimport('vue')['defineAsyncComponent']constdefineComponent:typeofimport('vue')['defineComponent']consteffectScope:typeofimport('vue')['effectScope']constEffectScope:typeofimport('vue')['EffectScope']constgetCurrentInstance:typeofimport('vue')['getCurrentInstance']constgetCurrentScope:typeofimport('vue')['getCurrentScope']consth:typeofimport('vue')['h']constinject:typeofimport('vue')['inject']constisReadonly:typeofimport('vue')['isReadonly']constisRef:typeofimport('vue')['isRef']//...}export{}

使用

<scriptsetupname="OrderList">//不用import,直接使用refconstcount=ref(0)onMounted(()=>{console.log('mounted===')})</script>

上面我们在vite.config.ts的配置里只导入了vue,imports: ['vue'],除了vue的你也可以根据文档导入其他的如vue-router、vue-use等。

个人建议只对一些比较熟悉的API做自动导入,如vue的API我们在开发时都比较熟悉,闭着眼都能写出来,对于一些不大熟悉的像VueUse这种库,还是使用import更好一些,毕竟编辑器都有提示,不易写错。

解决eslint报错问题

在没有import的情况下使用会导致eslint提示报错,可以通过在eslintrc.js安装插件**vue-global-api**解决。

//安装依赖npmivue-global-api-D//eslintrc.jsmodule.exports={extends:['vue-global-api']}

三、告别.value

众所周知,ref要求我们访问变量时需要加上.value,这让很多开发者觉得难受.

letcount=ref(1)constaddCount=()=>{count.value+=1}

后来尤大大也提交了一份新的ref语法糖提案。

ref:count=1constaddCount=()=>{count+=1}

该提案一出便引起了社区的一片讨论,时间已经过去很久了,这里就不再废话这个话题了。

这里我介绍的是另外一种写法,也是官方后来出的一种方案,在ref前加上$,该功能默认关闭,需要手动开启。

//vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({plugins:[vue({refTransform:true//开启ref转换})]})

开启之后可以这样写:

letcount=$ref(1)constaddCount=()=>{count++}

该语法糖根据不同的版本配置也略有不同,下面贴一下我自己所用相关插件的版本:

"vue":"^3.2.2","@vitejs/plugin-vue":"^1.9.0","@vue/compiler-sfc":"^3.2.5","vite":"^2.6.13"

四、自动导入图片

在Vue2时我们经常会这样引用图片:

<img:src="require('@/assets/image/logo.png')"/>

但在Vite中不支持require了,引用图片变成了下面这样:

<template><img:src="Logo"/></template><scriptsetup>importLogofrom'@/assets/image/logo.png'</script>

每次使用图片都得import,显然耽误了大家摸鱼的时间,这时我们可以借助vite-plugin-vue-images来实现自动导入图片。

爽归爽,但容易发生变量冲突,慎用!

安装

npmivite-plugin-vue-images-D

配置

//vite.config.tsimport{defineConfig}from'vite'importViteImagesfrom'vite-plugin-vue-images'exportdefaultdefineConfig({plugins:[ViteImages({dirs:['src/assets/image']//指明图片存放目录})]})

使用

<template><!--直接使用--><img:src="Logo"/></template><scriptsetup>//importLogofrom'@/assets/image/logo.png'</script>

五、忽略.vue后缀

相信很多人在Vue2开发时,导入文件都是忽略.vue后缀的。但在Vite里,忽略.vue后缀会引起报错。

importHomefrom'@/views/home'//errorimportHomefrom'@/views/home.vue'//ok

根据尤大大的回答,必须写后缀其实是故意这么设计的,也就是提倡大家这么去写。

但如果你真的不想写,官方也是提供了支持的。

//vite.config.tsimport{defineConfig}from'vite'exportdefaultdefineConfig({resolve:{extensions:['.js','.ts','.jsx','.tsx','.json','.vue']}})

这里要注意,手动配置extensions要记得把其他类型的文件后缀也加上,因为其他类型如js等文件默认是可以忽略后缀导入的,不写上的话其他类型文件的导入就变成需要加后缀了。

虽然可以这么做,不过毕竟官方文档说了不建议忽略.vue后缀,所以建议大家在实际开发中还是老老实实写上.vue。

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/34083.html;
(0)
上一篇 2023年1月23日 下午4:17
下一篇 2023年1月23日 下午4:17

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部