需要做如下两步配置。
1、让 vite 能识别 @ 路径别名
vite.config.js
增加:
1 | import { resolve } from 'path'; |
2、让 IDE 能识别 @ 路径别名
用 @ 路径别名导入文件后,IDE (如 jetbrains 家的)要能识别导入路径,实现代码提示识别,点击导入变量或导入路径能跳转到文件。
在根目录下的 jsconfig.json
加入以下内容:
1 | { |
需要做如下两步配置。
vite.config.js
增加:
1 | import { resolve } from 'path'; |
用 @ 路径别名导入文件后,IDE (如 jetbrains 家的)要能识别导入路径,实现代码提示识别,点击导入变量或导入路径能跳转到文件。
在根目录下的 jsconfig.json
加入以下内容:
1 | { |
Vue3 使用选项式 API 较容易,按文档上手就行,这里就不多说。组合式 API 上手会比较麻烦一点。
1 | // app.js |
1 | <!-- App.vue --> |
组合式 API 每次要 import 又要导出要用的函数,需要频繁使用,这样太麻烦了。
我们可以定义 window.$t
全局函数,这样在 setup
中也能直接用 $t()
取得语言信息。
1 | // app.js |
更多用法见官方文档: https://vue-i18n.intlify.dev/guide/
Vite缩小打包体积:使用 visualizer 分析文件依赖关系与文件大小
在 Vite
中用 manualChunks
分割打包时,找文件依赖很麻烦,用 rollup-plugin-visualizer
可以帮我们找出依赖关系、分析依赖包的大小。
pnpm i -D rollup-plugin-visualizer
在 vite.config.js
中添加:
1 | import { visualizer } from 'rollup-plugin-visualizer'; |
执行 pnpm build
,编译完成后,会在浏览器中自动打开下面的页面:
ElementPlus 开发 SPA 应用 dev 模式加载太慢的原因及解决办法
开发 SPA
应用用到 ElementPlus
,官方推荐用 自动导入
方式来引用。
如果你用笔记本开发,那么预览时 js 的加载速度会极慢,node 占 CPU 超过100%,非常影响开发体验,恨不得换到 MPA 模式开发。
因为自动自动导入方式预览时,要加载一百多个js文件。如果你用的是强劲的台式机,用这个方式没发现有明细的卡。笔记本 CPU 顶不住。
用 完整引入
或 按需导入
就没这个问题。
建议使用 完整引入
方式,ElementPlus 相关 js 就只引入了一个 /node_modules/.vite/deps/element-plus.js
,而不是自动导入的上百的js文件。
编译后 element-plus 后的 js gz 后需要多传输 100k 左右,如果你受不了,可以另外加一个自动加载的 vite 配置,在增加一个创建不用全局引入 ElementPlus 的入口文件给 vite 引用。
如:build 时使用 vite.build.js
配置,在 vite.build.js 中引用使用 自动导入
的js入口文件。再把 package.json
的 scripts.build
改为 vite build --config vite.build.js
,这样就可以实现 dev 时使用完整引入
ElementPlus,build 时使用自动导入
减少编译文件的大小。
使用 Dexie.js 简化访问浏览器本地数据库 IndexedDB
localStorage
本地存储各家浏览器分别限制在 2.5M ~ 10M 之间,本地浏览器需要存储较大数据的时候就不能用了, IndexedDB
就能解决这个问题。
IndexedDB 是存储结构类似 MangoDB 的对象存储数据库,不是关系型数据库。 IndexedDB API 稍微有点麻烦,用 Dexie.js
可简化操作。
在 Vue3 <script setup> + 组合式 API 之 怎用使用响应式变量
Vue3 的响应式是:当更改响应式对象的值改变时,视图会随即自动更新。
ref()
返回一个响应式对象,可以用 value
属性来访问或更改对象的值。ref
对象在模板中会自动解包,用变量名不需要加 .value
就能访问。
1 | <script setup> |
Vue3(单文件组件 + <script setup> + 组合式 API)组件实例常用内置属性、方法、函数
本文总结 Vue3
组件实例在模板中暴露的常用公共属性和方法,以及对应的 组合式 API
函数。
$data/$props/$options 属性在 组合式 API 下几乎用不到。
$el 不建议用。
$slots 表示父组件所传入插槽的一个对象,很少用,有兴趣可查看官方文档。
模板中用 $parent
获取父组件实例,可访问父组件用 defineExpose()
显式暴露的绑定。
组合式 API
先在 setup
中用 getCurrentInstance()
获取到当前组件实例,再用 parent
属性访问父组件。getCurrentInstance().parent
除了能访问父组 defineExpose()
暴漏的绑定外,能访问父组件更多的属性和方法,多用于组件的开发,在应用开发中一般不建议用。
1 | import { getCurrentInstance } from 'vue'; |
JavaScript 原型方法:call、apply、bind
call
、apply
、bind
是 JavaScript 函数的原型方法,用于改变函数的 this
指向来执行函数。一般这种鬼操作能不用则不用,没得选的时候才有必要用。
1 | const bar = { |
JavaScript 箭头函数与 function 函数的区别
见过箭头函数后,知道箭头函数是 function
定义函数的简写,然后还有一点是箭头函数中的 this
是上级代码的 this
。
其实除了这两点外,箭头函数和 function
函数还有很多区别。
1 | // 没有参数时 |
顶级代码
中, this
指向 window
对象;function
定义的函数中, this
指向该函数的对象;箭头函数
中,箭头函数不会创建自己的 this
,始终指向箭头函数所在作用域下的 this
。用原型方法 apply()
、call()
、bind()
不能改变箭头函数中 this
的指向。
1 | const bar = { |
用可变变量访问 JavaScript 类、对象的方法(动态访问 JS 类、对象的方法)
JavaScript中,用可变变量访问对象方法或类静态方法,如果访问的方法中 this
,此时 this
将会是 undefined
。
用对象解构赋值获得函数名(如:xxx)后,用函数名后面加括号(如:xxx()
)执行函数,this
也是 undefined
。
问题复现:
1 | // 动态访问方法 |