本篇文章给大家聊聊Vue3 开发,整理分享5个可以提高开发效率的小知识,让你在 Vue3 的项目开发中更加丝滑,希望对大家有所帮助!
最近鼓捣了一下 Vue3 + Vite2,遇到了不少问题,整理了5个可以提高开发效率的小知识,让你在 Vue3 的项目开发中更加丝滑、顺畅。
Vue3
的setup
语法糖是个好东西,但使用setup
语法带来的第一个问题就是无法自定义name
,而我们使用keep-alive
往往是需要name
的,解决这个问题通常是通过写两个script
标签来解决,一个使用setup
,一个不使用,但这样必然是不够优雅的。
<script> import { defineComponent, onMounted } from 'vue' export default defineComponent({ name: 'OrderList' }) </script> <script setup> onMounted(() => { console.log('mounted===') }) </script>
这时候借助插件vite-plugin-vue-setup-extend
可以让我们更优雅的解决这个问题,不用写两个script
标签,可以直接在script
标签上定义name
。
安装
npm i vite-plugin-vue-setup-extend -D
配置
// vite.config.ts import { defineConfig } from 'vite' import VueSetupExtend from 'vite-plugin-vue-setup-extend' export default defineConfig({ plugins: [ VueSetupExtend() ] })
使用
<script setup name="OrderList"> import { onMounted } from 'vue' onMounted(() => { console.log('mounted===') }) </script>
setup
语法让我们不用再一个一个的把变量和方法都return
出去就能在模板上使用,大大的解放了我们的双手。然而对于一些常用的Vue
API,比如ref
、computed
、watch
等,还是每次都需要我们在页面上手动进行import
。
我们可以通过unplugin-auto-import
实现自动导入,无需import
即可在文件里使用Vue
的API。
安装
npm i unplugin-auto-import -D
配置
// vite.config.ts import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ AutoImport({ // dts: 'src/auto-imports.d.ts', // 可以自定义文件生成的位置,默认是根目录下 imports: ['vue'] }) ] })
安装配置完会自动生成auto-imports.d.ts
文件。
// auto-imports.d.ts // Generated by 'unplugin-auto-import' // We suggest you to commit this file into source control declare global { const computed: typeof import('vue')['computed'] const createApp: typeof import('vue')['createApp'] const customRef: typeof import('vue')['customRef'] const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] const defineComponent: typeof import('vue')['defineComponent'] const effectScope: typeof import('vue')['effectScope'] const EffectScope: typeof import('vue')['EffectScope'] const getCurrentInstance: typeof import('vue')['getCurrentInstance'] const getCurrentScope: typeof import('vue')['getCurrentScope'] const h: typeof import('vue')['h'] const inject: typeof import('vue')['inject'] const isReadonly: typeof import('vue')['isReadonly'] const isRef: typeof import('vue')['isRef'] // ... } export {}
使用
<script setup name="OrderList"> // 不用import,直接使用ref const count = ref(0) onMounted(() => { console.log('mounted===') }) </script>
上面我们在vite.config.ts
的配置里只导入了vue
,imports: ['vue']
,除了vue
的你也可以根据文档导入其他的如vue-router
、vue-use
等。
个人建议只对一些比较熟悉的API做自动导入,如vue
的API我们在开发时都比较熟悉,闭着眼都能写出来,对于一些不大熟悉的像VueUse
这种库,还是使用import
更好一些,毕竟编辑器都有提示,不易写错。
解决<span style="font-size: 16px;">eslint</span>
报错问题
在没有import
的情况下使用会导致eslint
提示报错,可以通过在eslintrc.js
安装插件**vue-global-api**
解决。
// 安装依赖 npm i vue-global-api -D // eslintrc.js module.exports = { extends: [ 'vue-global-api' ] }
众所周知,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 'vite' import vue from '@vitejs/plugin-vue' 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('@/assets/image/logo.png')" />
但在Vite
中不支持require
了,引用图片变成了下面这样:
<template> <img :src="Logo" /> </template> <script setup> import Logo from '@/assets/image/logo.png' </script>
每次使用图片都得import
,显然耽误了大家摸鱼的时间,这时我们可以借助vite-plugin-vue-images
来实现自动导入图片。
安装
npm i vite-plugin-vue-images -D
配置
// vite.config.ts import { defineConfig } from 'vite' import ViteImages from 'vite-plugin-vue-images' export default defineConfig({ plugins: [ ViteImages({ dirs: ['src/assets/image'] // 指明图片存放目录 }) ] })
使用
<template> <!-- 直接使用 --> <img :src="Logo" /> </template> <script setup> // import Logo from '@/assets/image/logo.png' </script>
相信很多人在Vue2
开发时,导入文件都是忽略.vue后缀的。但在Vite
里,忽略.vue后缀会引起报错。
import Home from '@/views/home' // error import Home from '@/views/home.vue' // ok
根据尤大大的回答,必须写后缀其实是故意这么设计的,也就是提倡大家这么去写。
但如果你真的不想写,官方也是提供了支持的。
// vite.config.ts import { defineConfig } from 'vite' export default defineConfig({ resolve: { extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] } })
这里要注意,手动配置extensions
要记得把其他类型的文件后缀也加上,因为其他类型如js等文件默认是可以忽略后缀导入的,不写上的话其他类型文件的导入就变成需要加后缀了。
虽然可以这么做,不过毕竟官方文档说了不建议忽略.vue后缀,所以建议大家在实际开发中还是老老实实写上.vue。
本次分享到这里就结束了,感谢您的阅读!予人玫瑰,手有余香,别忘了动动手指点个赞。
本文如果有什么错误或不足,也欢迎评论区指正!
【相关推荐:vue.js视频教程】
以上是Vue3中5个可以提高开发效率的小知识【整理分享】的详细内容。更多信息请关注PHP中文网其他相关文章!