预览地址点击
安装vite为什么选vite?
sql复制代码npm create vite@latest my-vue-app -- --template vue
这样就会天生模板项目，如下图
当我们有了模板之后，在团队互助中须要有一定的方案，形成代码的可掩护性，就须要借助工具插件来配置代码上的方案，有利于代码的可读性。
配置 typescriptcss复制代码pnpm i typescript vue-tsc -D
在根目录新建tsconfig.json文件
json复制代码{ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "moduleResolution": "Node", "strict": false, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "lib": ["ESNext", "DOM"], "noEmit": true, // 跳过库检讨，办理打包失落败 "skipLibCheck": true, }, "include": ["src//.ts", "src//.d.ts", "src//.tsx", "src//.vue"], "references": [ { "path": "./tsconfig.node.json" } ], "exclude": ["node_modules","dist","/.js"] }
然后再package.json中script工具build中前面加上配置
less复制代码build:vue-tsc --noEmit && vite build配置eslint
eslint 紧张办理的是代码质量问题
bash复制代码pnpm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin @vue/eslint-config-typescript -D
名称
解释
eslint
ESLint是一个用于识别和报告在ECMAScript/JavaScript代码中创造的模式的工具
eslint-plugin-vue
Vue 的官方 ESLint 插件
@typescript-eslint/parser
Vue 的官方 ESLint 插件
eslint-plugin-vue
一个ESLint解析器，它利用TypeScript-ESTree 许可ESLint 检讨TypeScript 源代码
@typescript-eslint/eslint-plugin
一个ESLint插件，为TypeScript代码库供应lint规则
@vue/eslint-config-typescript
Vue的eslint-config-typescript
新建eslintrc.jsjava复制代码module.exports = { "env": { "browser": true, "es2021": true, "node":true }, extends: [ 'plugin:vue/vue3-recommended', 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', ], "parser": "vue-eslint-parser", "parserOptions": { "ecmaVersion": "latest", "parser": "@typescript-eslint/parser", "sourceType": "module" }, "plugins": [ "vue", "@typescript-eslint" ], // 配置规则 "rules": { } }新建eslint 忽略文件 .eslintignore
bash复制代码.sh node_modules .css .jpg .jpeg .png .gif .md .woff .ttf .vscode .idea dist /public /docs .husky .local /bin Dockerfile
在package.json里的script里配置
json复制代码"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx",
这样 eslint 就配置好了
配置 prettier 紧张办理的是代码风格问题prettier 紧张办理的是代码风格问题
安装arduino复制代码pnpm install prettier eslint-plugin-prettier @vue/eslint-config-prettier -D
名称
解释
prettier
代码格式化
eslint-plugin-prettier
作为ESLint规则运行得prettier
@vue/eslint-config-prettier
Vue的 eslint-config-prettier
然后在.eslintrc.js文件中配置
php复制代码extends: [ 'plugin:vue/vue3-recommended', 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', ],
新建.prettierrc文件
ruby复制代码module.exports = { // 一行的字符数，如果超过会进行换行，默认为80 printWidth: 100, // 行位是否利用分号，默认为true semi: false, vueIndentScriptAndStyle: true, // 字符串是否利用单引号，默认为false，利用双引号 singleQuote: true, // 是否利用尾逗号，有三个可选值"<none|es5|all>" trailingComma: 'all', proseWrap: 'never', htmlWhitespaceSensitivity: 'strict', endOfLine: 'auto', };editorconfigeditorconfig帮助开拓职员在不同的编辑器和IDE之间定义和掩护同等的编码样式不同的开拓职员，不同的编辑器，有不同的编码风格，而 EdiorConfig 便是用来协同团队开拓职员之间的代码的风格及样式规范化的一个工具而editorconfig 正是它的默认配置文件EditorConfigvscode这类编辑器3期要安装editorconfig 插件
新建.editorconfig文件
Unix 系统里，每行结尾只有换行即 nLF(Line Feed)Windows系统里面，每行结尾是 换行 回车，即 rn CR/LFMac系统里，每行结尾是 回车，即 r CR(Carriage Return)ini复制代码root = true[]charset = utf-8indent_style = space indent_size = 2end_of_line = lf配置git hooks
在代码提交之前检讨
可以在git commit之前检讨代码，，担保所有提交到版本库中的代码都是符合规范的可以在git push之前实行单元测试担保所有的提交的代码经由的单元测试husky可以让我们向项目中方便添加 git hks ,它会自动在仓库中的 gt/ 目录下增加相应的钩子,比如 pre-ommit 钩子就会在你实行commit 命令的时候的触发lint-staged用于实现每次提交只检讨本次提交所修正的文件mrm可以根据 package.json 依赖项中的代码质量工具来安装和配置 husky 和 int-stagedCommitlint可以规范 git commit -m ""中的描述信息安装lint-stagedmrm 安装 lint-staged 的同时会安装 husky复制代码pnpm install mrm -Dnpx mrm lint-staged
然后它会自动在package.json文件中的script工具中天生
json复制代码"prepare": "husky install"json复制代码"lint-staged": { "src//.{vue,js,ts,jsx,tsx}": "eslint --cache --fix"}
同时在根目录也会天生.husky目录，如下图
这样 husky 就成功啦，当你git commit 的时候就会触发 husky钩子函数了
配置 commitlint当你想要你提交的git 形成一定的方案的时候，就须要配置 commitlint，类似这样
commitlint推举我们利用onfig-conventional配置去写commit 提交格式git commit =m [optional scope]:
type :用于表明我们这次提交的改动类型，是新增了功能? 还是修正了测试代码?又或者是更新了文档?optional scope ：一个可选的修正范围。用于标识这次提交紧张涉及到代码中哪个模块description:一句话描述这次提交的紧张内容，做到言简意咳type类型
描述
build
编译干系的修正，例如发布版本、对项目构建或者依赖的改动
chore
其他修正，比如改变构建流程、或者增加依赖库、工具等
ci
持续集成修正
docs
文档修正
feature
新特性、新功能
fix
修正 bug
refactor
代码重构
revert
回滚到上一个版本
style
代码格式修正
test
测试用例修正
安装bash复制代码pnpm install @commitlint/cli @commitlint/config-conventional -D 配置
bash复制代码npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
当运行之后就会天生这样如下图
安装postcss
添加css预处理器，自动增加前缀，适配各个浏览器
css复制代码pnpm i postcss postcss-preset-env -D
在根目录下新建postcss.config.js
css复制代码 module.exports = { plugins: [ require('postcss-preset-env') ] } mock
vite-plugin-ock供应本地和生产仿照做事 vite 的数据仿照插件，是基于 vite.js 开拓的。并同时支持本地环境和生产环境
css复制代码pnpm i mockjs vite-plugin-mock -D
在vite.config.ts 中配置
css复制代码import f viteMockserve i from "yite-plugin-mock" plugins: [vue()，viteMockServe()] 环境变量和模式
可以在根目录下新建env结尾的文件
Vite在一个分外的import.meta.env 工具上暴露环境变量
import.meta.env.MODE:(string)运用运行的模式import.meta.env.BASE_URL:(string)支配运用时的基本 URL。他由 base 配置项决定import.meta.env.PROD: (boolean) 运用是否运行在生产环博import.meta.env.DEV: (boolean)运用是否运行在开拓环境(永久与importmetaenyPROD 相反)bash复制代码.env # 所有情形下都会加载.env.local # 所有情形下都会加载，但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载，但会被 git 忽略配置别名 @
js复制代码resolve: { alias: { "@": resolve(__dirname, "./src"), } },
作者：前端小六 链接：https://juejin.cn/post/7316792136837578788
