vue 社区维护的插件 进行了很好的分类 ,里面有很多框架无关的插件,也有很多 vue2
vue3
相关的插件
vscode
插件cmd + shift + p
呼出命令窗口
> workbench.extensions.action.disableAllWorkspace
AnthonyFu 一个托尼 的 talks - bilibili
Vite 插件 import.meta.glob 实现 - bilibili
vite-plugin-inspect 检查 Vite 插件的中间状态
开发中的辅助工具 比如 自动导入 vite awesome list
从 webpack 和 cli 迁移过来,尽量少的代码改动方案
可以考虑使用 antfu 写的按需组件自动导入插件(同时支持 vue2/vue3
)
可以考虑使用 antfu 写的 vue api 的自动引入
可以考虑使用 antfu 写的 按需引入 icons
可以考虑使用 unoCss
可以考虑使用 vueUse (vue2 vue3 都可以用)
可以考虑使用 vitesse 模板 (tips: 如果用 vue3 + ts 强烈推荐使用)
具体的例子到时候可以参考 antfu
的的配置文件,他用这些东西写了一些小项目,以及游戏,比如 汉兜
之类的。 antfu 的项目集合
如果你的项目使用
ts
那么使用pinia
进行状态管理, pinia 取代 vuex ,如果 还是使用的是vuex
那么依然使用vuex
也是可以的。
Pinia 是 Vue 的 状态管理
库,它允许您在 组件/页面
上 共享状态
。如果您熟悉 composition API
,则可能会认为您可以使用简单的导出 export const state = reactive({})
来共享共享全局状态。对于单页应用程序,这是真的,
但如果它是
ssr 服务端渲染
,则会将应用程序暴露于安全漏洞。但即使在小单页应用程序
中,您也可以使用Pinia
获得很多:
JS
用户提供适当的 TypeScript 支持或自动完成功能vite
webpack
等 )pnpm
, npm
, yarn
等等 )@recommended
prettier
vscode 插件设置
tree shaking
browserslist
字段会被 @babel/preset-env
和 Autoprefixer
用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。目前我选择的方案是
vite
+vue-router
+vuex
+pnpm
+vue3 js语法
+less
+vuejs 官方commit message 风格
vue3
中移除 ) 批量导入功能 glob 导入
tree shaking
pnpm install --save-dev xxx
或者pnpm i -D xxx
进行安装的unocss
不需要导入, 自动按需导入的图标 ,原子化 的 css 类 tailwind 但是比 tailwind 快 100 200 倍
vite
插件vite 构建生产版本
elementPlus
等等 )也许可能会 再加上 生产环境中 使用
vue-cli
进行打包
treeshaking 的 use 函数库 and vueUse 官网
vueUse
更多功能 可组合的小组件npm i @vueuse/core @vueuse/components
> https://github.com/antfu/handle/blob/main/vite.config.ts
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。