# vite_test

**Repository Path**: onepisYa/vite_test

## Basic Information

- **Project Name**: vite_test
- **Description**: vite + vue 测试
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-13
- **Last Updated**: 2022-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: your name
 * @Date: 2022-04-02 08:42:04
 * @LastEditors: onepisYa
 * @LastEditTime: 2022-04-04 21:04:36
 * @Description: file content
-->

# 一些文档

[vite 官网](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project)

[vite awesome 资源](https://github.com/vitejs/awesome-vite)

[create-vite 文档 官方提供的模板和预设](https://github.com/vitejs/vite/tree/main/packages/create-vite)

[社区模板 awesome-vite](https://github.com/vitejs/awesome-vite#templates)

[vite 配置参考手册](https://cn.vitejs.dev/config/)

[vite-plugin-vue readme](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme)

[eslint-plugin-vue](https://eslint.vuejs.org/)

[vue 社区维护的插件](https://github.com/vitejs/awesome-vite#plugins) 进行了很好的分类 ，里面有很多框架无关的插件，也有很多 `vue2` `vue3` 相关的插件

[框架无关的开发帮助工具比如自动导入之类的](https://github.com/vitejs/awesome-vite#helpers)

---

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

`cmd + shift + p` 呼出命令窗口

```
> workbench.extensions.action.disableAllWorkspace

```

# 一些教程

[AnthonyFu 一个托尼 的 talks - bilibili](https://space.bilibili.com/668380/favlist?fid=1530849180&ftype=create)

[unoCss 的自动补全 - bilibili](https://www.bilibili.com/video/BV1y3411W7YG?spm_id_from=333.999.0.0)

[组件全自动导入 - bilibili](https://www.bilibili.com/video/BV1L34y147jA?spm_id_from=333.999.0.0)

[ Vite 插件 import.meta.glob 实现 - bilibili](https://www.bilibili.com/video/BV1ea411x7zm?spm_id_from=333.999.0.0)

[eslint 和 prettier 的区别](https://zhuanlan.zhihu.com/p/80574300)

---

[vite-plugin-inspect 检查 Vite 插件的中间状态](https://github.com/antfu/vite-plugin-inspect)

[vscode 主题](https://github.com/antfu/vscode-theme-vitesse)

[unplugin 统一插件系统](https://github.com/unjs/unplugin)

[开发中的辅助工具 比如 自动导入 vite awesome list](https://github.com/vitejs/awesome-vite#helpers-1)

[从 webpack 和 cli 迁移过来，尽量少的代码改动方案](https://github.com/vitejs/awesome-vite#vue-cli)

---

可以考虑使用 [antfu 写的按需组件自动导入插件](https://github.com/antfu/unplugin-vue-components)(同时支持 `vue2/vue3` )

可以考虑使用 [antfu 写的 vue api 的自动引入](https://github.com/antfu/unplugin-auto-import)

可以考虑使用 [antfu 写的 按需引入 icons](https://github.com/antfu/unplugin-icons)

可以考虑使用 [unoCss](https://github.com/unocss/unocss)

可以考虑使用 [vueUse](https://github.com/antfu/vueuse) (vue2 vue3 都可以用)

可以考虑使用 [vitesse 模板](https://github.com/antfu/vitesse) (tips: 如果用 vue3 + ts 强烈推荐使用)

具体的例子到时候可以参考 `antfu` 的的配置文件，他用这些东西写了一些小项目，以及游戏，比如 `汉兜` 之类的。 [antfu 的项目集合](https://antfu.me/projects)

[vscode 设置文件](https://github.com/antfu/vscode-settings)

[eslint 配置](https://github.com/antfu/eslint-config)

[vue eslint 插件](https://eslint.vuejs.org/)

[eslint 配置教程](https://www.jianshu.com/p/4b94540dd998)

[vite 常用插件推荐](https://zhuanlan.zhihu.com/p/375971479)

---

# pinia

[pinia 文档](https://pinia.vuejs.org/introduction.html#why-should-i-use-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-env`和 `Autoprefixer` 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
- 环境变量的配置
- 区分生产和开发环境
- 生产环境中的优化， 压缩 和 缓存的 相关设置

---

目前我选择的方案是

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

- [x] 以上都已安装
- [x] eslint + prettier 已安装
- [x] jsconfig.json 配置
- [x] eslint 配置
- [x] vscode 配置
- [x] 环境变量配置
- [x] 一些 模块的自动导入(比如过滤器，过滤器已经在 `vue3`中移除 ) [批量导入功能 glob 导入](https://cn.vitejs.dev/guide/features.html#glob-import)
- [x] 区分生产和开发环境
- [x] 按需加载 [`tree shaking`](https://staging-cn.vuejs.org/guide/best-practices/performance.html#bundle-size-and-tree-shaking)
- [x] 组件自动按需引入， 使用[unplugin-vue-components 插件](https://github.com/antfu/unplugin-vue-components)
- [x] api 自动导入按需(类似 vue3 中很多 api 都是需要导入) [使用 unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) 开发工具都是使用 `pnpm install --save-dev xxx ` 或者`pnpm i -D xxx` 进行安装的
- [x] (css 之类的)资源自动按需导入，样式的话使用 原子话的 `unocss` 不需要导入， [自动按需导入的图标](https://github.com/antfu/unplugin-icons) ，[原子化 的 css 类 tailwind 但是比 tailwind 快 100 200 倍](https://github.com/unocss/unocss)
- [x] 路由自动导入[vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages)，这是一个简单的[教程](https://blog.csdn.net/qq_42611074/article/details/123026428)
- [x] 翻译 commit message 规范
- [x] 网络请求封装，以及全局状态管理中 请求数据
- [ ]  <!-- --------------  -->
- [ ] browserlist 浏览器配置 配合对应 `vite` 插件[vite 构建生产版本](https://cn.vitejs.dev/guide/build.html)
- [ ] 生产环境中的优化， 压缩 和 缓存的 相关设置
- [ ] UI 库 根据具体业务选择(比如 `elementPlus` 等等 )

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

[treeshaking 的 use 函数库](https://github.com/vueuse/vueuse) and [vueUse 官网](https://vueuse.org/)

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