2 Star 0 Fork 0

onepisYa / vite_test

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

一些文档

vite 官网

vite awesome 资源

create-vite 文档 官方提供的模板和预设

社区模板 awesome-vite

vite 配置参考手册

vite-plugin-vue readme

eslint-plugin-vue

vue 社区维护的插件 进行了很好的分类 ,里面有很多框架无关的插件,也有很多 vue2 vue3 相关的插件

框架无关的开发帮助工具比如自动导入之类的


一键在当前工作区禁用所有 vscode 插件

cmd + shift + p 呼出命令窗口

> workbench.extensions.action.disableAllWorkspace

一些教程

AnthonyFu 一个托尼 的 talks - bilibili

unoCss 的自动补全 - bilibili

组件全自动导入 - bilibili

Vite 插件 import.meta.glob 实现 - bilibili

eslint 和 prettier 的区别


vite-plugin-inspect 检查 Vite 插件的中间状态

vscode 主题

unplugin 统一插件系统

开发中的辅助工具 比如 自动导入 vite awesome list

从 webpack 和 cli 迁移过来,尽量少的代码改动方案


可以考虑使用 antfu 写的按需组件自动导入插件(同时支持 vue2/vue3 )

可以考虑使用 antfu 写的 vue api 的自动引入

可以考虑使用 antfu 写的 按需引入 icons

可以考虑使用 unoCss

可以考虑使用 vueUse (vue2 vue3 都可以用)

可以考虑使用 vitesse 模板 (tips: 如果用 vue3 + ts 强烈推荐使用)

具体的例子到时候可以参考 antfu 的的配置文件,他用这些东西写了一些小项目,以及游戏,比如 汉兜 之类的。 antfu 的项目集合

vscode 设置文件

eslint 配置

vue eslint 插件

eslint 配置教程

vite 常用插件推荐


pinia

pinia 文档

如果你的项目使用 ts 那么使用 pinia 进行状态管理, pinia 取代 vuex ,如果 还是使用的是 vuex 那么依然使用 vuex 也是可以的。

Pinia 是 Vue 的 状态管理 库,它允许您在 组件/页面共享状态 。如果您熟悉 composition API ,则可能会认为您可以使用简单的导出 export const state = reactive({}) 来共享共享全局状态。对于单页应用程序,这是真的,

但如果它是 ssr 服务端渲染 ,则会将应用程序暴露于安全漏洞。但即使在小单页应用程序中,您也可以使用 Pinia获得很多:

  • Devtools support
    • 时间线 track actions, mutations
    • 状态 store 出现在使用他们的组件中
    • 时间旅行轻松的进行 debugging
  • Hot module replacement
    • 修改您的 store 状态,而无需重新加载您的页面
    • 在开发过程中保持任何现有状态
  • Plugins: extend Pinia features with plugins
  • JS 用户提供适当的 TypeScript 支持或自动完成功能
  • Server Side Rendering Support

工作中前端工程化需要考虑的一些问题

  • 使用的框架 (vue2 vue3)
  • build 打包工具使用什么(比如 vite webpack等 )
  • 包管理器选择(pnpm, npm, yarn 等等 )
  • 统一的 git commit 消息风格
  • 组件库存选择(比如 elementUI vant 等根据具体业务进行选择)
  • 相应的配套设置
    • eslint 语法检查, prettier 格式化
    • 统一的编辑器格式化,
    • 推荐的 vscode 插件@recommended
    • eslint 和 prettier vscode 插件设置
    • 组件自动按需引入
    • api 自动导入按需(类似 vue3 中很多 api 都是需要导入)
    • (图片 css 之类的)资源自动按需导入
    • 按需加载 tree shaking
    • 路由自动导入
    • 网络请求封装,以及全局状态管理中 请求数据
  • 一些 api 的自动注册(比如过滤器)
  • 浏览器兼容性配置
    • 在 vue 官方脚手架中,browserslist字段会被 @babel/preset-envAutoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
  • 环境变量的配置
  • 区分生产和开发环境
  • 生产环境中的优化, 压缩 和 缓存的 相关设置

目前我选择的方案是

vite + vue-router + vuex + pnpm + vue3 js语法 + less +vuejs 官方commit message 风格

也许可能会 再加上 生产环境中 使用 vue-cli 进行打包

treeshaking 的 use 函数库 and vueUse 官网

vueUse 更多功能 可组合的小组件 npm i @vueuse/core @vueuse/components > https://github.com/antfu/handle/blob/main/vite.config.ts

空文件

简介

vite + vue 测试 展开 收起
JavaScript 等 4 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/onepisYa/vite_test.git
git@gitee.com:onepisYa/vite_test.git
onepisYa
vite_test
vite_test
master

搜索帮助

14c37bed 8189591 565d56ea 8189591