@smarts-isoftstone/vue-template

TMC 商旅平台

使用 vite 作为打包工具

框架做了哪些需求

• 加入了 TypeScript
• 加入了 JSX Support
• 加入了 Vue Router Support
• 加入了 PinIa 管理状态插件
• 加入了 VueX 管理状态插件
• 加入了 Eslint 代码质量检测
• 加入了 Prettier 统一编码风格，代码自动格式化
• 加入了 Style css 规范自动化处理
• 加入了 Commit 提交代码自动检测和修复
• 加入了 Less css 预处理器
• 加入了 Husky Git hooks 工具
• 加入了 Lint-staged 自动修复并且推送
• 加入了 Vitest 单元测试工具
• 加入了 PLaywright 集成测试工具
• 加入了 Js 特性和 CSS 浏览器前缀配置
• 加入了 Npm 镜像源配置文件
• 加入了 Pnpm 作为包管理 Client
• 加入了 Ide 配置和自动格式化
• 加入了 Css 前缀支持
• 加入了 import 资源按字母排序
• 加入了三方类库按需加载功能
• 加入了传统浏览器兼容性支持
• ...

Ide 做了哪些

• 加入了 ESLint
• 加入了 ESLint Chinese Rules-eslint 中文规则提示插件
• 加入了 Stylelint ps:Official Stylelint extension for Visual Studio Code
• 加入了 Volar
• 加入了 TypeScript Vue Plugin (Volar)
• 加入了 Format Files
• 加入了 Git History
• 加入了 Playwright Test for VSCode
• 加入了 Prettier ESLint
• 加入了 Vetur
• 加入了 Vue Language Features (Volar)支持 vue3
• 加入了 koroFileHeader 用于生成文件头部注释和函数注释的插件，标注谁做的页面
• 加入了 Add jsdoc comments
• 加入了 Chinese (Simplified) (简体中文) Language Pack
• 加入了 Code Spell Checker 单词拼写检查
• 加入了 Add jsdoc comments support
• 加入了 Playwright Test for VSCode
• 加入了 Document This
• 加入了 EditorConfig for VS Code
• 加入了 Live Preview

Todo

• Code spliting 代码分割，将代码按照 html/css/js 的文件进行分 chunk 打包
• Tree shaking 将没有引用到的代码不打包，减少打包的体积&速度
• hash 实现持久化缓存，当改变某个文件时会进行 chunkhash 的改变打包，未改变它打包的文件名称和原来的 chunkhash 一样
• 在打包指令加上--report，分析当前项目引用的文件大小，针对大文件库进行针对性的优化
• 使用--modern 构建现代模式要求后端做 cors 的配置
• 利用 splitChunks 将每个依赖包单独打包
• terser-webpack-plugin 开启多核压缩 js 代码，并取消测试环境和生产环境的 console.log
• 使用 style-loader 和 css-loader 合并选择器将 css 转换为 style tag
• compression-webpack-plugin 开启 gzip 压缩，可以减小 60%以上的响应体体积
• 借助 package.json 的 version 对 hash 进行二次控制(不加的话如果文件没更改，打包出来的文件可以默认使用上一版本的 hash 文件)

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug

Lint with ESLint

npm run lint

husky 安装

npm pkg set scripts.prepare="npx husky install"
npm run prepare

npx husky add .husky/pre-commit-lint-style "npm run lint:style"
npx husky add .husky/commit-msg  "npx --no -- commitlint --edit ${1}"
npx husky add .husky/pre-commit "npx lint-staged"

.prettierrc.json // "trailingComma": "es5",