Vue3中5个可以提高开发效率的小知识【整理分享】

本篇文章给大家聊聊Vue3 开发,整理分享5个可以提高开发效率的小知识,让你在 Vue3 的项目开发中更加丝滑,希望对大家有所帮助!

Vue3中5个可以提高开发效率的小知识【整理分享】

最近鼓捣了一下 Vue3 + Vite2,遇到了不少问题,整理了5个可以提高开发效率的小知识,让你在 Vue3 的项目开发中更加丝滑、顺畅。

一、setup name 增强

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

<script>
import { defineComponent, onMounted } from &#39;vue&#39;

export default defineComponent({
  name: &#39;OrderList&#39;
})
</script>

<script setup>
onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

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

安装

npm i vite-plugin-vue-setup-extend -D

配置

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import VueSetupExtend from &#39;vite-plugin-vue-setup-extend&#39;

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

使用

<script setup name="OrderList">
import { onMounted } from &#39;vue&#39;

onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

二、API 自动导入

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

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

安装

npm i unplugin-auto-import -D

配置

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import AutoImport from &#39;unplugin-auto-import/vite&#39;

export default defineConfig({
  plugins: [
    AutoImport({
      // dts: &#39;src/auto-imports.d.ts&#39;, // 可以自定义文件生成的位置,默认是根目录下
      imports: [&#39;vue&#39;]
    })
  ]
})

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

// auto-imports.d.ts
// Generated by &#39;unplugin-auto-import&#39;
// We suggest you to commit this file into source control
declare global {
  const computed: typeof import(&#39;vue&#39;)[&#39;computed&#39;]
  const createApp: typeof import(&#39;vue&#39;)[&#39;createApp&#39;]
  const customRef: typeof import(&#39;vue&#39;)[&#39;customRef&#39;]
  const defineAsyncComponent: typeof import(&#39;vue&#39;)[&#39;defineAsyncComponent&#39;]
  const defineComponent: typeof import(&#39;vue&#39;)[&#39;defineComponent&#39;]
  const effectScope: typeof import(&#39;vue&#39;)[&#39;effectScope&#39;]
  const EffectScope: typeof import(&#39;vue&#39;)[&#39;EffectScope&#39;]
  const getCurrentInstance: typeof import(&#39;vue&#39;)[&#39;getCurrentInstance&#39;]
  const getCurrentScope: typeof import(&#39;vue&#39;)[&#39;getCurrentScope&#39;]
  const h: typeof import(&#39;vue&#39;)[&#39;h&#39;]
  const inject: typeof import(&#39;vue&#39;)[&#39;inject&#39;]
  const isReadonly: typeof import(&#39;vue&#39;)[&#39;isReadonly&#39;]
  const isRef: typeof import(&#39;vue&#39;)[&#39;isRef&#39;]
  // ...
}
export {}

使用

<script setup name="OrderList">
// 不用import,直接使用ref
const count = ref(0)

onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

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

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

解决eslint报错问题

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

// 安装依赖
npm i vue-global-api -D

// eslintrc.js
module.exports = {
  extends: [
    &#39;vue-global-api&#39;
  ]
}

三、告别.value

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

let count = ref(1)

const addCount = () => {
  count.value += 1
}

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

ref: count = 1

const addCount = () => {
  count += 1
}

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

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

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import vue from &#39;@vitejs/plugin-vue&#39;

export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})

开启之后可以这样写:

let count = $ref(1)

const addCount = () => {
  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(&#39;@/assets/image/logo.png&#39;)" />

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

<template>
  <img :src="Logo" />
</template>

<script setup>
import Logo from &#39;@/assets/image/logo.png&#39;
</script>

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

安装

npm i vite-plugin-vue-images -D

配置

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import ViteImages from &#39;vite-plugin-vue-images&#39;

export default defineConfig({
  plugins: [
    ViteImages({
      dirs: [&#39;src/assets/image&#39;] // 指明图片存放目录
    })
  ]
})

使用

<template>
  <!-- 直接使用 -->
  <img :src="Logo" />
</template>

<script setup>
// import Logo from &#39;@/assets/image/logo.png&#39;
</script>

五、忽略.vue后缀

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

import Home from &#39;@/views/home&#39; // error
import Home from &#39;@/views/home.vue&#39; // ok

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

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

// vite.config.ts
import { defineConfig } from &#39;vite&#39;

export default defineConfig({
  resolve: {
    extensions: [&#39;.js&#39;, &#39;.ts&#39;, &#39;.jsx&#39;, &#39;.tsx&#39;, &#39;.json&#39;, &#39;.vue&#39;]
  }
})

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

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

感谢

本次分享到这里就结束了,感谢您的阅读!予人玫瑰,手有余香,别忘了动动手指点个赞

本文如果有什么错误或不足,也欢迎评论区指正!

【相关推荐:vue.js视频教程】

以上就是Vue3中5个可以提高开发效率的小知识【整理分享】的详细内容,更多请关注www.sxiaw.com其它相关文章!