本篇文章给大家带来了关于vue中开发相关知识，整理了5个可以提高开发效率的小知识，让你在 vue3 的项目开发中更加丝滑、顺畅，希望对大家有帮助。
一、setup name 增强
Vue3的setup语法糖是个好东西，但使用setup语法带来的第一个问题就是无法自定义name，而我们使用keep-alive往往是需要name的，解决这个问题通常是通过写两个script标签来解决，一个使用setup，一个不使用，但这样必然是不够优雅的。
- import { defineComponent, onMounted } from 'vue'export default defineComponent({ name: 'OrderList'})onMounted(() => { console.log('mounted===')})
登录后复制
这时候借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，不用写两个script标签，可以直接在script标签上定义name。
安装
立即学习“前端免费学习笔记（深入）”；
- npm i vite-plugin-vue-setup-extend -D
登录后复制
配置
- // vite.config.tsimport { defineConfig } from 'vite'import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({ plugins: [ VueSetupExtend() ]})
登录后复制
使用
- import { onMounted } from 'vue'onMounted(() => { console.log('mounted===')})
登录后复制
二、API 自动导入
setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import。
我们可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。
安装
立即学习“前端免费学习笔记（深入）”；
- npm i unplugin-auto-import -D
登录后复制
配置
- // vite.config.tsimport { defineConfig } from 'vite'import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({ plugins: [ AutoImport({ // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下 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 controldeclare 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 {}
登录后复制
使用
- // 不用import，直接使用refconst count = ref(0)onMounted(() => { console.log('mounted===')})
登录后复制
上面我们在vite.config.ts的配置里只导入了vue，imports: [‘vue’]，除了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.jsmodule.exports = { extends: [ 'vue-global-api' ]}
登录后复制
三、告别.value
众所周知，ref要求我们访问变量时需要加上.value，这让很多开发者觉得难受.
- let count = ref(1)const addCount = () => { count.value += 1}
登录后复制
后来尤大大也提交了一份新的ref语法糖提案。
- ref: count = 1const addCount = () => { count += 1}
登录后复制
该提案一出便引起了社区的一片讨论，时间已经过去很久了，这里就不再废话这个话题了。
这里我介绍的是另外一种写法，也是官方后来出的一种方案，在ref前加上$，该功能默认关闭，需要手动开启。
- // vite.config.tsimport { 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时我们经常会这样引用图片：
- @@##@@
登录后复制
但在Vite中不支持require了，引用图片变成了下面这样：
- @@##@@import Logo from '@/assets/image/logo.png'
登录后复制
每次使用图片都得import，显然耽误了大家摸鱼的时间，这时我们可以借助vite-plugin-vue-images来实现自动导入图片。
爽归爽，但容易发生变量冲突，慎用！
安装
立即学习“前端免费学习笔记（深入）”；
- npm i vite-plugin-vue-images -D
登录后复制
配置
- // vite.config.tsimport { defineConfig } from 'vite'import ViteImages from 'vite-plugin-vue-images'export default defineConfig({ plugins: [ ViteImages({ dirs: ['src/assets/image'] // 指明图片存放目录 }) ]})
登录后复制
使用
- @@##@@// import Logo from '@/assets/image/logo.png'
登录后复制
五、忽略.vue后缀
相信很多人在Vue2开发时，导入文件都是忽略.vue后缀的。但在Vite里，忽略.vue后缀会引起报错。
- import Home from '@/views/home' // errorimport Home from '@/views/home.vue' // ok
登录后复制
根据尤大大的回答，必须写后缀其实是故意这么设计的，也就是提倡大家这么去写。
但如果你真的不想写，官方也是提供了支持的。
- // vite.config.tsimport { defineConfig } from 'vite'export default defineConfig({ resolve: { extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] }})
登录后复制
这里要注意，手动配置extensions要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。
虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。
【相关推荐：《vue.js教程》】
以上就是教你5个让Vue3开发更顺畅的知识点的详细内容，更多请关注【创想鸟】其它相关文章！
