这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前言

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

一、setup name 增强

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

<script lang="ts">
import { defineComponent, onMounted } from 'vue' export default defineComponent({
name: 'OrderList'
})
</script> <script lang="ts" 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 lang="ts" setup name="OrderList">
import { onMounted } from 'vue' onMounted(() => {
console.log('mounted===')
})
</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 '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 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: t ypeof import('vue')['isRef']
// ...
}
export {}

使用

<script lang="ts" setup name="OrderList">
// 不用import,直接使用ref
const count = ref(0) onMounted(() => {
console.log('mounted===')
})
</script>

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

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

解决eslint报错问题

在没有import的情况下使用会导致eslint提示报错,通过如下步骤解决:

// vite.config.ts
AutoImport({
dts: 'types/auto-imports.d.ts',
imports: ['vue'],
// 解决eslint报错问题
eslintrc: {
enabled: true
}
})

这时会自动生成.eslintrc-auto-import.json文件,将其导入eslintrc.js即可。

// eslintrc.js
module.exports = {
extends: [
'./.eslintrc-auto-import.json'
]
}

三、告别.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 '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 lang="ts" 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 lang="ts" setup>
// import Logo from '@/assets/image/logo.png'
</script>

五、忽略.vue后缀

相信很多人在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。

本文转载于:

https://juejin.cn/post/7054317318343491615

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--5个知识点,让 Vue3 开发更加丝滑的更多相关文章

  1. IOS开发之记录用户登陆状态,ios开发用户登陆

    IOS开发之记录用户登陆状态,ios开发用户登陆 上一篇博客中提到了用CoreData来进行数据的持久化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreDa ...

  2. 从零开始使用 Webpack 搭建 Vue3 开发环境

    从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 ...

  3. A记录都不懂,怎么做开发Leader?

    开发 Leader 和一线开发的区别在于:普通一线开发很多时候都只接触业务编码,不需要关注除开发之外的其他事情.但是作为一个开发 Leader,不仅仅需要懂开发层面的东西,还需要懂得运维层面的东西. ...

  4. Vue3教程:用 Vue3 开发小程序,这里有一份实际的代码案例!

    前言 寻寻觅觅冷冷清清,凄凄惨惨戚戚. Vue 3 发布以后,最近也在学习和写一些 Vue3 的 demo 和项目,我也一直想着什么时候能在小程序里使用新特性? 于是我翻遍了市面上的小程序框架,如 u ...

  5. 【electron+vue3+ts实战便笺exe】二、electron+vue3开发内容

    不要让自己的上限成为你的底线 本来以为有万字的..没想到才堪堪近6000字.为了水文的嫌疑,只挑了重点的地方讲,比如component内的组件就挑了右键弹窗去说明,建议在看本文的时候边查看项目,有不懂 ...

  6. 你的日志组件记录够清晰嘛?--自己开发日志组件 Logger

    现在现成的日志组件实在是太多太多,为什么我还需要自己实现呢????? 需求来源于java的log4j, [07-31 16:40:00:557:WARN : com.game.engine.threa ...

  7. 学习记录013-NFS相关知识点

    一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...

  8. java知识点总结--java开发环境搭建

    安装 JDK(Java Development Kit) 和开发工具 如:eclipse,myeclipse,idea等 配置系统环境变量 查看系统环境变量 1.通过 我的电脑--->“属性”- ...

  9. js便签笔记(9)——解读jquery源码时记录的一些知识点

    近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 ...

  10. IOS开发,知识点小结,ios开发中经常使用的宏定义总结

    IOS开发,从应用跳转到用浏览器打开网页: [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http:// ...

随机推荐

  1. C++——编译和链接原理笔记

    我们在学习和开发C++程序中,理解编译和链接的原理至关重要.下面将学习一下C++程序是如何从源代码转换为可执行文件的过程,并结合示例代码进行说明.也是为了解开自己在刚学习C++的时候,编译时间长的疑惑 ...

  2. 基于Doris构建亿级数据实时数据分析系统

    转载至我的博客 https://www.infrastack.cn ,公众号:架构成长指南 背景 随着公司业务快速发展,对业务数据进行增长分析的需求越来越迫切,与此同时我们的业务数据量也在快速激增.每 ...

  3. react 聊聊setState异步背后的原理,react如何感知setState下的同步与异步?

    壹 ❀ 引 在react中的setState是同步还是异步?react为什么要将其设计成异步?一文中,我们介绍了setState同步异步问题,解释了何种情况下同步与异步,异步带来了什么好处,以及rea ...

  4. NC13885 Music Problem

    题目链接 题目 题目描述 Listening to the music is relax, but for obsessive(强迫症), it may be unbearable. HH is an ...

  5. STM32F401的PWM输出

    PWM的说明 PWM有三个关键指标: PWM频率, 占空比, 区分度 对于同一个时钟频率下工作的单片机, 区分度是和PWM工作频率相关的, 因为总频率是固定的, PWM工作频率越高, 留下给区分度的部 ...

  6. 使用JS访问本地数据库

    1 前言 有时候,数据业务比较大,比如查询百万级的数据,如果使用JSP查询数据库,JSP的返回结果一般放在域名后面返回给客户端,而返回结果的长度是有限制的,数据过长可能会丢失部分数据:另一方面数据量大 ...

  7. Js实用小技巧

    Js实用小技巧 这是一份Js实用小技巧,也可以是一份Js挨打小技巧,下面的一系列操作虽然能够在一定程度上使代码更加简洁,但是在缺少注释的情况下会降低可读性,所以需要谨慎使用这些黑魔法. 位元算 取整 ...

  8. Youpk 脱壳机脱壳原理分析

    Youpk 是一个针对整体加固和Dex抽取加固壳的脱壳机 主要是基于虚拟机的,也就是基于VA的脱壳机, 相对FART出来的更晚一些, 厂商针对少一些, 脱壳位置相对更底层一些,还提供了Dex修复的工具 ...

  9. Selenium入门介绍

    目录 Selenium概述 浏览器支持 工具库 开发实践 等待 操作浏览器 定位元素 定位单个元素 定位多个元素 获取HTML元素内容的方式 Selenium概述 https://github.com ...

  10. 【C# .Net】List循环add,出现数据相同现象? 引发对引用类型和值类型的底层逻辑的思考。

    赶项目时发现了一个问题,定义一个引用对象,如果在循环外定义对象,在循环内list.add(object).最后的结果却是所有的对象值都是一样的,即每add一次,都会把之前的数据覆盖. 解决方法:把对象 ...