• views 下 按模块划分,每个模块算一个单元,包含当前模块所要的 route、store、components,公共组件放到外层 component 下

• 抛弃 babel,因为 vite 是基于 esbuild 来进行编译转换的

• node 版本可以修改 .nvmec / 或者在 package.json 中配置 engines

• 目前 node 的版本为 (削除) 12.5.0 (削除ここまで), 需要升级为 ^14.17.0(vue-eslint-parser 移除了对 12.22.0 的支持),后续可以通过 nvm 来安装不同的 node 版本 来升级相关依赖:例如把 ESlint7 -> ESlint8

• 目前项目中 ESLint 等相关依赖时基于 v7 版本,因为 v8 版本是强制 node 版本为 (削除) ^12.22.0 (削除ここまで) ^14.17.0

• 目前 Vuex、Vue-router 版本为 3.x 版,因为后续版本就是基于 vue3 来的

• vite 的 sass 是基于 sass 默认调用的是 dart-sass,而且不能更改,所以项目中使用 /deep/ 改为 ::v-deep

推荐使用 fnm 来做 node 的版本管理

• 推荐安装 VScode 插件

{
 "recommendations": [
 "octref.vetur",
		"EditorConfig.EditorConfig",
		"esbenp.prettier-vscode",
		"dbaeumer.vscode-eslint"
 ]
}

• @vitejs/plugin-legacy 浏览器兼容插件

• unplugin-vue-components 按需引入插件,如果 node 版本在 14 以下 只能安装 0.14.12 或以下 版本 v0.14.13 specify node version,引入方式需要改为:

import Components from 'unplugin-vue-components/dist/vite';
import { ViewUiResolver } from 'unplugin-vue-components/dist/resolvers';

• vite-plugin-style-import 按需导入组件库样式 node >= 14

• vite-plugin-checker Vite plugin that provide checks of TypeScript, ESLint, vue-tsc, Stylelint and more.

• @rollup/plugin-inject 全局注入变量,记得声明:

  import jQuery from 'jquery';
  declare global {
  	interface window {
  		$: jQuery;
  	}
  }
  // vite.config.ts
  import inject from '@rollup/plugin-inject';
  {
  	plugins: [
  		...
  		inject({
  			$: 'jquery',
  		}),
  		...
  	]
  }

"scripts": {
	"dev": "vite",
	"build": "vite build",
	"preview": "vite preview"
},

• 增加 gizp 压缩
• 增加 自动压缩 dist(可修改) 目录
• 添加全局 scss 样式:

defineConfig({
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: '@import "@/styles/global.scss";',
			}
		},
	},
});