Vue3中如何提高开发效率

小编给大家分享一下Vue3中如何提高开发效率，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

一、setup name 增强

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

这时候借助插件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()

  ]

})

使用

二、API 自动导入

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

使用

上面我们在vite.config.ts的配置里只导入了vue，imports: [&＃39;vue&＃39;]，除了vue的你也可以根据文档导入其他的如vue-router、vue-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时我们经常会这样引用图片：

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

每次使用图片都得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;] // 指明图片存放目录

    })

  ]

})

使用

五、忽略.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。

以上是“Vue3中如何提高开发效率”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程笔记行业资讯频道！