\n ![\"Vue](\"../assets/logo.png\")
\n
\n\n\n\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n \n \n \n
\n\n\n\n"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"viteconfigts-常用配置"},"children":[{"type":"text","value":"Vite.config.ts 常用配置"}]},{"type":"element","tag":"h4","props":{"id":"配置别名"},"children":[{"type":"text","value":"配置别名"}]},{"type":"element","tag":"code","props":{"code":"export default defineConfig({\n resolve: {\n alias: {\n // 路径映射开头必须要加/\n \"@\": \"/src\",\n \"@styles\": \"/src/styles\",\n },\n },\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineConfig({\n resolve: {\n alias: {\n // 路径映射开头必须要加/\n \"@\": \"/src\",\n \"@styles\": \"/src/styles\",\n },\n },\n});\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"配置语法提示"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"paths\": {\n \"@/*\": [\"src/*\"],\n \"@styles/*\": [\"src/styles/*\"]\n }\n },\n \"include\": [\"src/**/*.ts\", \"src/**/*.d.ts\", \"src/**/*.tsx\", \"src/**/*.vue\"]\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"paths\": {\n \"@/*\": [\"src/*\"],\n \"@styles/*\": [\"src/styles/*\"]\n }\n },\n \"include\": [\"src/**/*.ts\", \"src/**/*.d.ts\", \"src/**/*.tsx\", \"src/**/*.vue\"]\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用效果"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"image-20210720162535915","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5372ce161b4f41b2ad3855486c0f1469~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"代理服务器"},"children":[{"type":"text","value":"代理服务器"}]},{"type":"element","tag":"code","props":{"code":"export default {\n proxy: {\n '/api': {\n target: 'http://doman1.com',\n changeOrigin: true,\n rewrite: path => path.replace(/^\\/api/, '')\n }\n }\n}\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n proxy: {\n '/api': {\n target: 'http://doman1.com',\n changeOrigin: true,\n rewrite: path => path.replace(/^\\/api/, '')\n }\n }\n}\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"具体使用"}]},{"type":"element","tag":"code","props":{"code":"fetch('/api/users').then(...)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"fetch('/api/users').then(...)\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"数据mock"},"children":[{"type":"text","value":"数据mock"}]},{"type":"element","tag":"h4","props":{"id":"当前模式和环境变量"},"children":[{"type":"text","value":"当前模式和环境变量"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite 上定义好的环境变量"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.MODE"}]}]},{"type":"text","value":": {string} 应用运行的"},{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/guide/env-and-mode.html##modes","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"模式"}]},{"type":"text","value":"。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.BASE_URL"}]}]},{"type":"text","value":": {string} 部署应用时的基本 URL。他由"},{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/config/##base","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"base"}]},{"type":"text","value":" 配置项"}]},{"type":"text","value":"决定。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.PROD"}]}]},{"type":"text","value":": {boolean} 应用是否运行在生产环境。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.DEV"}]}]},{"type":"text","value":": {boolean} 应用是否运行在开发环境 (永远与 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.PROD"}]},{"type":"text","value":"相反)"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"自定义环境变量"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"开发环境(git 管理)"},{"type":"element","tag":"code","props":{"code":"// .env.development\nVITE_SOME_KEY=this is a development token\n","language":"env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// .env.development\nVITE_SOME_KEY=this is a development token\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"生产环境(git 管理)"},{"type":"element","tag":"code","props":{"code":"// .env.production\nVITE_SOME_KEY=this is a production token\n","language":"env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// .env.production\nVITE_SOME_KEY=this is a production token\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"本地开发环境"},{"type":"element","tag":"code","props":{"code":"// .env.development.local\nVITE_SOME_KEY=this is a development token but not managed by git\n","language":"env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// .env.development.local\nVITE_SOME_KEY=this is a development token but not managed by git\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"本地生产环境"},{"type":"element","tag":"code","props":{"code":"// .env.production.local\nVITE_SOME_KEY=this is a production token but not managed by git\n","language":"env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// .env.production.local\nVITE_SOME_KEY=this is a production token but not managed by git\n"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"案例"}]}]},{"type":"element","tag":"code","props":{"code":" return () => {\n const mode = import.meta.env.MODE; // 模式\n const baseUrl = import.meta.env.BASE_URL; //基本URL\n const prod = import.meta.env.PROD; // 是否是生产环境\n const dev = import.meta.env.DEV; // 是否是开发环境\n const token = import.meta.env.VITE_SOME_KEY; // 自定义环境变量\n return (\n \n \n
\n );\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" return () => {\n const mode = import.meta.env.MODE; // 模式\n const baseUrl = import.meta.env.BASE_URL; //基本URL\n const prod = import.meta.env.PROD; // 是否是生产环境\n const dev = import.meta.env.DEV; // 是否是开发环境\n const token = import.meta.env.VITE_SOME_KEY; // 自定义环境变量\n return (\n 当前模式：{mode}
\n当前baseURL：{baseUrl}
\n当前是否是生产环境：{prod}
\n当前是否是开发环境：{dev}
\n当前环境下token：{token}
\n\n
\n );\n };\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"其他选项"},"children":[{"type":"text","value":"其他选项"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"详情可以见 "},{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/config/##shared-options","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方文档配置"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"此处列出一个自己玩过的模板"}]},{"type":"element","tag":"code","props":{"code":"\n/**\n * https://vitejs.dev/config/\n * @type {import('vite').UserConfig}\n */\nexport default {\n //项目根目录 \n root: process.cwd(),\n //项目部署的基础路径\n base: \"/\",\n //环境配置\n mode: 'development',\n //全局变量替换 Record当前模式：{mode}
\n当前baseURL：{baseUrl}
\n当前是否是生产环境：{prod}
\n当前是否是开发环境：{dev}
\n当前环境下token：{token}
\n\n Click the button to test actions !\n \n
\n\n\n\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n Click the button to test actions !\n \n
\n\n\n\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"更多使用技巧，查看 "},{"type":"element","tag":"a","props":{"href":"https://pinia.esm.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"pinia文档"}]},{"type":"text","value":" 即可"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"axios"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"axios"}]},{"type":"text","value":" 插件，根据需求封装请求拦截器即可"}]},{"type":"element","tag":"h3","props":{"id":"代码规范"},"children":[{"type":"text","value":"代码规范"}]},{"type":"element","tag":"h4","props":{"id":"集成-editorconfig"},"children":[{"type":"text","value":"集成 editorConfig"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员维护一致的编码风格。EditorConfig 项目由用于定义编码样式"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"的文件格式"}]},{"type":"text","value":"和一组"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"文本编辑器插件组成"}]},{"type":"text","value":"，这些"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"插件"}]},{"type":"text","value":"使编辑器能够读取文件格式并遵循定义的样式。EditorConfig 文件很容易阅读，并且可以很好地与版本控制系统配合使用。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"相关配置查看"},{"type":"element","tag":"a","props":{"href":"https://editorconfig.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"文档"}]},{"type":"text","value":"即可，VSCode需要下载相关插件搭配使用"}]},{"type":"element","tag":"code","props":{"code":"## Editor configuration, see http://editorconfig.org\n\n## 表示是最顶层的 EditorConfig 配置文件\nroot = true\n\n[*] ## 表示所有文件适用\ncharset = utf-8 ## 设置文件字符集为 utf-8\nindent_style = space ## 缩进风格（tab | space）\nindent_size = 2 ## 缩进大小\nend_of_line = lf ## 控制换行类型(lf | cr | crlf)\ntrim_trailing_whitespace = true ## 去除行首的任意空白字符\ninsert_final_newline = true ## 始终在文件末尾插入一个新行\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"## Editor configuration, see http://editorconfig.org\n\n## 表示是最顶层的 EditorConfig 配置文件\nroot = true\n\n[*] ## 表示所有文件适用\ncharset = utf-8 ## 设置文件字符集为 utf-8\nindent_style = space ## 缩进风格（tab | space）\nindent_size = 2 ## 缩进大小\nend_of_line = lf ## 控制换行类型(lf | cr | crlf)\ntrim_trailing_whitespace = true ## 去除行首的任意空白字符\ninsert_final_newline = true ## 始终在文件末尾插入一个新行\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"集成-prettier-配置"},"children":[{"type":"text","value":"集成 Prettier 配置"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"命令行式 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" ，需要项目中集成 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":" 加持"}]}]},{"type":"element","tag":"code","props":{"code":"yarn add prettier\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add prettier\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"然后在项目根目录创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".pretterrc"}]},{"type":"text","value":" 或者 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".pretterrc.json"}]},{"type":"text","value":" ,增加以下配置，了解更多配置见"},{"type":"element","tag":"a","props":{"href":"https://prettier.io/docs/en/options.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"文档"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"useTabs\": false,\n \"tabWidth\": 2,\n \"printWidth\": 120,\n \"singleQuote\": true,\n \"bracketSpacing\": true,\n \"semi\": true\n}\n\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"useTabs\": false,\n \"tabWidth\": 2,\n \"printWidth\": 120,\n \"singleQuote\": true,\n \"bracketSpacing\": true,\n \"semi\": true\n}\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"然后运行命令一键格式化，这一步可以被集成到打包或者编译前置动作"}]},{"type":"element","tag":"code","props":{"code":"yarn prettier --write . \n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn prettier --write . \n"}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"利用编辑器插件 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":"\nVscode 提供 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":" 插件同样具有强大的能力，开发者不需要在项目中安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":" 就可以通过配置来实现 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"首先是插件市场安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"然后可以在本地 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setting.json"}]},{"type":"text","value":"，或者项目目录下创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".vscode"}]},{"type":"text","value":"目录，然后创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setting.json"}]},{"type":"text","value":"，加入以下配置"}]}]},{"type":"element","tag":"code","props":{"code":"{\n // prettier配置\n \"editor.detectIndentation\": false,\n \"editor.formatOnSave\": true, // 开启自动保存\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n },\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[html]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[vue]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[json]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[jsx]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[tsx]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[css]\": {\n \"editor.defaultFormatter\": \"michelemelluso.code-beautifier\"\n },\n \"[scss]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[less]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[typescript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n }\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n // prettier配置\n \"editor.detectIndentation\": false,\n \"editor.formatOnSave\": true, // 开启自动保存\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n },\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[html]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[vue]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[json]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[jsx]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[tsx]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[css]\": {\n \"editor.defaultFormatter\": \"michelemelluso.code-beautifier\"\n },\n \"[scss]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[less]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[typescript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n }\n}\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"工作区目录优先级比全局要高，推荐在工作区引入该配置"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"集成-eslint"},"children":[{"type":"text","value":"集成 Eslint"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]},{"type":"text","value":" 规则配置要比 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tslint"}]},{"type":"text","value":" 要多的多，所以首选 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第一步，安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]}]},{"type":"element","tag":"code","props":{"code":"yarn add eslint\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add eslint\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"相关插件列表"}]},{"type":"element","tag":"code","props":{"code":"{\n \"@typescript-eslint/eslint-plugin\": \"^4.28.4\",\n \"@typescript-eslint/parser\": \"^4.28.4\",\n \"@vue/eslint-config-prettier\": \"^6.0.0\",\n \"@vue/eslint-config-typescript\": \"^7.0.0\",\n \"vue-eslint-parser\": \"^7.6.0\",\n \"eslint\": \"^7.31.0\",\n \"prettier\": \"^2.3.2\",\n \"eslint-config-prettier\": \"^8.3.0\",\n \"eslint-plugin-import\": \"^2.23.4\",\n \"eslint-plugin-node\": \"^11.1.0\",\n \"eslint-plugin-prettier\": \"^3.4.0\",\n \"eslint-plugin-vue\": \"^7.14.0\",\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"@typescript-eslint/eslint-plugin\": \"^4.28.4\",\n \"@typescript-eslint/parser\": \"^4.28.4\",\n \"@vue/eslint-config-prettier\": \"^6.0.0\",\n \"@vue/eslint-config-typescript\": \"^7.0.0\",\n \"vue-eslint-parser\": \"^7.6.0\",\n \"eslint\": \"^7.31.0\",\n \"prettier\": \"^2.3.2\",\n \"eslint-config-prettier\": \"^8.3.0\",\n \"eslint-plugin-import\": \"^2.23.4\",\n \"eslint-plugin-node\": \"^11.1.0\",\n \"eslint-plugin-prettier\": \"^3.4.0\",\n \"eslint-plugin-vue\": \"^7.14.0\",\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第二步，初始化规则，这里我选择了 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint:recommended"}]}]},{"type":"element","tag":"code","props":{"code":"yarn eslint --init\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn eslint --init\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"根据团队需求配置 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]},{"type":"text","value":" 规则"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"解决 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":" 规则冲突问题"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint-plugin-prettier"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint-config-prettier"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".eskintrc.js"}]},{"type":"text","value":"添加顺序规则"},{"type":"element","tag":"code","props":{"code":"module.exports = {\n ...\n extends: [\n 'plugin:vue/essential',\n 'eslint:recommended',\n 'plugin:prettier/recommended' // 添加 prettier 插件\n ],\n ...\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"module.exports = {\n ...\n extends: [\n 'plugin:vue/essential',\n 'eslint:recommended',\n 'plugin:prettier/recommended' // 添加 prettier 插件\n ],\n ...\n}\n"}]}]}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"最终优先级："},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Prettier 配置规则"}]},{"type":"text","value":" > "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ESLint 配置规则"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fix"}]},{"type":"text","value":" 代码"}]},{"type":"element","tag":"code","props":{"code":"eslint --fix\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"eslint --fix\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第三步，配置 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vscode"}]},{"type":"text","value":" 自动 fix：安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Eslint"}]},{"type":"text","value":" 插件，然后开启 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"autofix"}]}]},{"type":"element","tag":"code","props":{"code":" \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n }\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n }\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第四步，添加 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"script"}]}]},{"type":"element","tag":"code","props":{"code":" \"scripts\": {\n \"dev\": \"eslint --ext .js,.jsx,.vue,.ts,.tsx src && vite\",\n \"build\": \"vue-tsc --noEmit && vite build\",\n \"serve\": \"vite preview\",\n \"lint\": \"eslint --ext .js,.jsx,.vue,.ts,.tsx src\"\n },\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" \"scripts\": {\n \"dev\": \"eslint --ext .js,.jsx,.vue,.ts,.tsx src && vite\",\n \"build\": \"vue-tsc --noEmit && vite build\",\n \"serve\": \"vite preview\",\n \"lint\": \"eslint --ext .js,.jsx,.vue,.ts,.tsx src\"\n },\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"贴一下我自己的"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".eslintrc.js"}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n root: true,\n env: {\n node: true,\n },\n extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'],\n parserOptions: {\n ecmaVersion: 2020,\n },\n rules: {\n // disable the rule for all files\n '@typescript-eslint/explicit-module-boundary-types': 'off',\n },\n overrides: [\n {\n // enable the rule specifically for TypeScript files\n files: ['*.js', '*.ts'],\n rules: {\n '@typescript-eslint/explicit-module-boundary-types': 'warn',\n },\n },\n ],\n};\n\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"module.exports = {\n root: true,\n env: {\n node: true,\n },\n extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'],\n parserOptions: {\n ecmaVersion: 2020,\n },\n rules: {\n // disable the rule for all files\n '@typescript-eslint/explicit-module-boundary-types': 'off',\n },\n overrides: [\n {\n // enable the rule specifically for TypeScript files\n files: ['*.js', '*.ts'],\n rules: {\n '@typescript-eslint/explicit-module-boundary-types': 'warn',\n },\n },\n ],\n};\n\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"提交修复"},"children":[{"type":"text","value":"提交修复"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们希望在代码提交之前做一次 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lint"}]},{"type":"text","value":" 检查和修复，我们需要用到 Git Hook，在本地执行 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git commit"}]},{"type":"text","value":" 的时候，就对所提交的代码进行 ESLint 检测和修复（即执行 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint --fix"}]},{"type":"text","value":"），如果这些代码没通过 ESLint 规则校验，则禁止提交。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这里需要使用到两个工具:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/typicode/husky","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"husky"}]},{"type":"text","value":" —— Git Hook 工具，可以设置在 git 各个阶段（"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pre-commit"}]},{"type":"text","value":"、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"commit-msg"}]},{"type":"text","value":"、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pre-push"}]},{"type":"text","value":" 等）触发我们的命令。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/okonet/lint-staged","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lint-staged"}]},{"type":"text","value":" —— 在 git 暂存的文件上运行 linters。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第一步，安装插件并初始化一个 husky 配置，这一步会在根目录下生成 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".husky "}]},{"type":"text","value":"目录"}]},{"type":"element","tag":"code","props":{"code":"npx husky-init && yarn\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx husky-init && yarn\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第二步，修改 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pre-commit"}]},{"type":"text","value":"规则，但缺点是这一步会扫描所有文件"}]},{"type":"element","tag":"code","props":{"code":"##!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\neslint --fix ./src --ext .vue,.js,.ts\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"##!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\neslint --fix ./src --ext .vue,.js,.ts\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"image-20210723150047244","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8519380eda14665b37258d8ad969c2a~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第三步，安装并配置"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lint-staged"}]}]},{"type":"element","tag":"code","props":{"code":"yarn add lint-staged\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add lint-staged\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"然后在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":"里增加 lint-staged 配置项"}]},{"type":"element","tag":"code","props":{"code":" \"lint-staged\": {\n \"*.{vue,js,ts,tsx,jsx}\": \"eslint --fix\"\n }\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" \"lint-staged\": {\n \"*.{vue,js,ts,tsx,jsx}\": \"eslint --fix\"\n }\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"验证效果，我写了一段错误代码在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"demo.ts"}]},{"type":"text","value":"，然后去提交代码，husky 和 lint-staged 就起了关键作用，如果是 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"warning"}]},{"type":"text","value":" 级别可以正确修复，如果是 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"error"}]},{"type":"text","value":" 就会在控制台打印出错误日志"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"image-20210723151610043","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e43a63987ee54443b9d7f0db93c4d51a~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"单元测试"},"children":[{"type":"text","value":"单元测试"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"单元测试是项目开发中一个非常重要的环节，完整的测试能为代码和业务提供质量保证，减少 Bug 的出现"}]},{"type":"element","tag":"h4","props":{"id":"安装并配置核心依赖"},"children":[{"type":"text","value":"安装并配置核心依赖"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vuejs/vue-test-utils-next","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-test-utils"}]}]},{"type":"text","value":" Vue 团队开发和维护的测试库"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/facebook/jest","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"jest"}]}]},{"type":"text","value":" 官方推荐测试库"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vuejs/vue-jest","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-jest"}]}]},{"type":"text","value":" 负责 jest 扫描 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".vue"}]},{"type":"text","value":" 和转换"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/kulshekhar/ts-jest","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ts-jest"}]}]},{"type":"text","value":" 负责 jest 扫描 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" 和转换"}]}]},{"type":"element","tag":"code","props":{"code":"yarn add @vue/test-utils@next jest vue-jest@next ts-jest -D \n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add @vue/test-utils@next jest vue-jest@next ts-jest -D \n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"添加 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jest.config.js"}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n moduleFileExtensions: ['vue', 'js', 'ts'],\n preset: 'ts-jest',\n testEnvironment: 'jsdom',\n transform: {\n '^.+\\\\.vue$': 'vue-jest', // vue 文件用 vue-jest 转换\n '^.+\\\\.ts$': 'ts-jest', // ts 文件用 ts-jest 转换\n },\n // 匹配 __tests__ 目录下的 .js/.ts 文件 或其他目录下的 xx.test.js/ts xx.spec.js/ts\n testRegex: '(/__tests__/.*|(\\\\.|/)(test|spec))\\\\.(ts)$',\n};\n\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"module.exports = {\n moduleFileExtensions: ['vue', 'js', 'ts'],\n preset: 'ts-jest',\n testEnvironment: 'jsdom',\n transform: {\n '^.+\\\\.vue$': 'vue-jest', // vue 文件用 vue-jest 转换\n '^.+\\\\.ts$': 'ts-jest', // ts 文件用 ts-jest 转换\n },\n // 匹配 __tests__ 目录下的 .js/.ts 文件 或其他目录下的 xx.test.js/ts xx.spec.js/ts\n testRegex: '(/__tests__/.*|(\\\\.|/)(test|spec))\\\\.(ts)$',\n};\n\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"集成typesjest-和-eslint-plugin-jest"},"children":[{"type":"text","value":"集成@types/jest 和 eslint-plugin-jest"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这两个工具主要是为了解决编辑器 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jest"}]},{"type":"text","value":" 代码提示错误和 eslint 对 jest 的支持"}]},{"type":"element","tag":"code","props":{"code":"yarn add @types/jest eslint-plugin-jest -D\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add @types/jest eslint-plugin-jest -D\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"修改 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tsconfig.json"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"compilerOptions\": {\n ...\n \"types\": [\"vite/client\", \"jest\"]\n },\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"compilerOptions\": {\n ...\n \"types\": [\"vite/client\", \"jest\"]\n },\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".eslintrc.js"}]},{"type":"text","value":" 添加 jest lint 插件 配置"}]},{"type":"element","tag":"code","props":{"code":"{\n ...\n extends: [\n 'plugin:vue/vue3-essential',\n 'eslint:recommended',\n '@vue/typescript/recommended',\n 'plugin:jest/recommended',\n ],\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n ...\n extends: [\n 'plugin:vue/vue3-essential',\n 'eslint:recommended',\n '@vue/typescript/recommended',\n 'plugin:jest/recommended',\n ],\n}\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"编写单元测试"},"children":[{"type":"text","value":"编写单元测试"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tests"}]},{"type":"text","value":" 目录，然后创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"xx.spec.ts"}]},{"type":"text","value":" 文件编写单元测试，然后测试"}]},{"type":"element","tag":"code","props":{"code":"// Axios.spec.ts\nimport { mount } from '@vue/test-utils';\nimport Axios from '../src/views/Axios.vue';\n\ndescribe('Axios.vue', () => {\n it('renders', () => {\n const wrapper = mount(Axios);\n expect(wrapper.html()).toContain('Vite2.x + Vue3.x + TypeScript Starter');\n });\n});\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Axios.spec.ts\nimport { mount } from '@vue/test-utils';\nimport Axios from '../src/views/Axios.vue';\n\ndescribe('Axios.vue', () => {\n it('renders', () => {\n const wrapper = mount(Axios);\n expect(wrapper.html()).toContain('Vite2.x + Vue3.x + TypeScript Starter');\n });\n});\n\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"建议打包时执行前置单元测试，如果希望在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"push"}]},{"type":"text","value":" 代码之前执行单元测试，只需要在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".husky"}]},{"type":"text","value":" 目录下创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pre-push"}]},{"type":"text","value":"脚本 ，然后添加对应测试命令即可。"}]}]},{"type":"element","tag":"h2","props":{"id":"小结"},"children":[{"type":"text","value":"小结"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"至此，一个综合性 Vue3.x 项目就搭建完成，总结下该工程的能力"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"编程语言："},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/zh/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TypeScript"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"构建工具："},{"type":"element","tag":"a","props":{"href":"https://cn.vitejs./dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vite 2.x"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"前端框架："},{"type":"element","tag":"a","props":{"href":"https://v3.cn.vuejs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue 3.x"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"路由工具："},{"type":"element","tag":"a","props":{"href":"https://next.router.vuejs.org/zh/index.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue Router 4.x"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"状态管理："},{"type":"element","tag":"a","props":{"href":"https://pinia.esm.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Pinia"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"CSS 预编译："},{"type":"element","tag":"a","props":{"href":"https://stylus-lang.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Stylus"}]},{"type":"text","value":" / "},{"type":"element","tag":"a","props":{"href":"https://sass.bootcss.com/documentation","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Sass"}]},{"type":"text","value":" / "},{"type":"element","tag":"a","props":{"href":"http://lesscss.cn/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Less"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"HTTP 工具："},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Axios"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Git Hook 工具："},{"type":"element","tag":"a","props":{"href":"https://typicode.github.io/husky/##/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"husky"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://github.com/okonet/lint-staged","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lint-staged"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"代码规范："},{"type":"element","tag":"a","props":{"href":"http://editorconfig.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"EditorConfig"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://prettier.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Prettier"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://eslint.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ESLint"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"单元测试："},{"type":"element","tag":"a","props":{"href":"https://next.vue-test-utils.vuejs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-test-utils"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://jestjs.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"jest"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://github.com/vuejs/vue-jest","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-jest"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://kulshekhar.github.io/ts-jest/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ts-jest"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在线预览该工程："},{"type":"element","tag":"a","props":{"href":"https://251205668.github.io/vite-vue3-sfc-template/##/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue3-sfc-template"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"为此我还准备了这些常用模板"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Vue2.x + vite 模板"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TSX + decorator能力："},{"type":"element","tag":"a","props":{"href":"https://github.com/251205668/vite-vue2-start/tree/tsx-decorator","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue2-tsx-start"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"SFC + decorator能力："},{"type":"element","tag":"a","props":{"href":"https://github.com/251205668/vite-vue2-start","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue2-start"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Vue3.x + vite 模板"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TSX + composition-api能力："},{"type":"element","tag":"a","props":{"href":"https://github.com/251205668/vite-vue3-start","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue3-start"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"SFC + composition-api能力："},{"type":"element","tag":"a","props":{"href":"https://github.com/251205668/vite-vue3-sfc-template","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue3-sfc-template"}]}]}]}]}]}]}]},"publishedAt":"2021-07-25","status":"published","tags":["webpack","vite"],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"toc","props":{},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"vite-概要介绍"},"children":[{"type":"text","value":"Vite 概要介绍"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"📚： "},{"type":"element","tag":"a","props":{"href":"https://vitejs.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方文档"}]},{"type":"text","value":"，"},{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"中文文档"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"🔨： "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"常用设置文档"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"🧰： "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"API 文档"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"⛄：插件和其生态 - "},{"type":"element","tag":"a","props":{"href":"https://github.com/vitejs/awesome-vite##plugins","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"awesome-vite"}]}]}]},{"type":"element","tag":"h3","props":{"id":"什么是-vite"},"children":[{"type":"text","value":"什么是 Vite"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在浏览器支持 ES 模块之前，JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这句话的意思其实就是浏览器以前不直接支持我们习惯写的 ES Moudle 语法，现在支持了，vite 充分利用了这一点。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"之前针对这一问题，出现了各类的打包工具： "},{"type":"element","tag":"a","props":{"href":"https://webpack.js.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"webpack"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://rollupjs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Rollup"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"a","props":{"href":"https://parceljs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Parcel"}]},{"type":"text","value":" 等，这些工具说白了就是在干一件事 - 使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"但是逐渐当我们的项目逐渐变得庞大起来，JS 文件变得很多很多，一个完整应用拥有的模块拥有几千个模块，这些构建工具的弊端就会展现出来。使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这些问题就成了 Vite 诞生的导火索。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"个人理解 Vite 的定义："}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite，一个基于浏览器原生 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ES imports"}]},{"type":"text","value":" 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Vite"}]},{"type":"text","value":" 之后"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"html","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"createApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" Main "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"./Main.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"createApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"(Main)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"mount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"##app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":""}]}]}]}]}]}]},{"type":"element","tag":"Image","props":{"alt":"preview","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40d8c18b3052404182d62ae24803a663~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"vite-和-webpack-对比"},"children":[{"type":"text","value":"Vite 和 webpack 对比"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"webpack 和 Vite "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"构建模式"}]},{"type":"text","value":"截然不同，在浏览器没有支持模块化的时候，期望将所有源代码编译进一个 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"js"}]},{"type":"text","value":" 文件中，然后提供给浏览器使用。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"所以在开发中运行启动命令的时候，webpack 总是需要从入口文件索引到整个项目的文件，下一步可能会采用代码拆分编译成一个或者多个单独的 JS 文件，这一步需要一次生成所有路由下的编译后文件，伴随着服务启动的时间随着项目复杂度指数增加。"}]},{"type":"element","tag":"Image","props":{"alt":"","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/833fec894776472ab23db760ce891c3c~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"那么 Vite 是如何解决问题的呢？Vite 会在本地帮你启动一个服务器，当浏览器读取到整个 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"html"}]},{"type":"text","value":" 文件之后，会执行到 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" 的时候才去向服务端发送对应模块的请求，Vite 内部进行模板解析，代码编译等解析成浏览器可以执行的 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"JS"}]},{"type":"text","value":" 文件返回到浏览器端，这里就是真正的按需加载，并且不会因为模块增多而变慢。"}]},{"type":"element","tag":"Image","props":{"alt":"img","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09a8b06e9d8842498e60764e3ee7dcdc~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"vite-带来的收益是什么"},"children":[{"type":"text","value":"Vite 带来的收益是什么"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"开发环境启服务器速度飞快"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"构建工具为 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Webpack"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"服务器启动速度，启动时间随着模块数增多而变慢"}]}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"Image","props":{"alt":"image-20210723152046683","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7590ea884fd94087a310fa9aa3f87b24~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"Image","props":{"alt":"image-20210719184638199","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c8420a5817b4d098d2c7d8c5ed9a6b8~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"构建工具为 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Vite"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"服务器启动速度，相较于前者快了将近十几倍，而且测试项目的模块数目并不多，只有几个模块。如果是一个较大的工程项目，包含几百个几千个模块，"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Vite"}]},{"type":"text","value":" 启动服务器的速度将会是 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webpack"}]},{"type":"text","value":"的几千倍"}]}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"Image","props":{"alt":"image-20210719184216175","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a957a192a71748ea9a15acadab1d62a6~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"几乎实时的模块热更新"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webpack"}]},{"type":"text","value":" 热更新也是需要重新编译一遍所有模块，然后启动服务器的，换句话来说 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webpack"}]},{"type":"text","value":" 的热更新速度和初次编译启动时间相差不了多少，这样会给开发者带来一些负面的体验感，比如你在改动一个组件样式之后，可能需要等待很长一段时间页面才会重新渲染。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Vite"}]},{"type":"text","value":" 出现了，"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Vite"}]},{"type":"text","value":"的热更新同样也运用到了 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"esbuild"}]},{"type":"text","value":" 的能力，可以准确的更新页面而无需重新加载页面或者删除应用程序状态。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"以上两点可以演示admin工程项目，和迁移admin工程项目对比速度"}]}]},{"type":"element","tag":"Image","props":{"alt":"img","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c3bc07073f144359acbd53e7b09018e~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"实现原理: static server + compile + HMR"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"当前目录作为静态文件服务器根目录"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"拦截部分文件请求(处理 import node_modules模块，处理 .Vue等文件的编译)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"websocket 实现 HMR"}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"所需文件按需编译，避免编译用不到的文件"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"开箱即用，便面各种 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Loader"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Plugin"}]},{"type":"text","value":" 的配置"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Typescript - 内置支持"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"less/sass/postcss - 内置支持"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"vite-基础应用"},"children":[{"type":"text","value":"Vite 基础应用"}]},{"type":"element","tag":"h3","props":{"id":"官方脚手架安装模板安装"},"children":[{"type":"text","value":"官方脚手架安装、模板安装"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"## npm\nnpm init @vitejs/app\n\n## yarn\nyarn create @vitejs/app\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"## npm"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"npm init @vitejs/app"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"## yarn"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn create @vitejs/app"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"## npm 6.x\nnpm init @vitejs/app my-vue-app --template vue\n\n## npm 7+, 需要额外的双横线：\nnpm init @vitejs/app my-vue-app -- --template vue\n\n## yarn\nyarn create @vitejs/app my-vue-app --template vue\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"## npm 6.x"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"npm init @vitejs/app my-vue-app --template vue"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"## npm 7+, 需要额外的双横线："}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"npm init @vitejs/app my-vue-app -- --template vue"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"## yarn"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn create @vitejs/app my-vue-app --template vue"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"目前支持模板："}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vanilla"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vanilla-ts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vue"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vue-ts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"react"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"react-ts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preact"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preact-ts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lit-element"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lit-element-ts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svelte"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svelte-ts"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue2+ts+vite 模板（暂时存在个人 github 上，且 tsc-decorator 分支还有bug）"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"git clone https://github.com/251205668/vite-vue2-start\ncd vite-vue2-start\nyarn \nyarn dev\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"git clone https://github.com/251205668/vite-vue2-start"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" vite-vue2-start"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn dev"}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"vite-中使用-typescript"},"children":[{"type":"text","value":"Vite 中使用 Typescript"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite 天然支持 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" 文件，Vite 使用 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"esbuild"}]},{"type":"text","value":" 转译 TS 的速度将会是 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tsc"}]},{"type":"text","value":" 的 20~30 倍，同时 HMR 更新速度将会小于 50 ms。"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"编写项目时需要将 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tsconfig.json"}]},{"type":"text","value":" 的 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"compilerOptions"}]},{"type":"text","value":" 设置 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isolateModules: true"}]},{"type":"text","value":", 这样 TS 才会警告你哪些功能无法与独立编译模式一同工作。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"esbuild简介"}]}]},{"type":"element","tag":"Image","props":{"alt":"image-20210720160239282","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f97aa9980dc4edba478ce50a50b0851~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"为什么 esbuild 这么快，来自"},{"type":"element","tag":"a","props":{"href":"https://esbuild.github.io/faq/##why-is-esbuild-fast","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官网解释"}]},{"type":"text","value":"，具体总结为以下几点："}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"使用 Go 编写，并且编译成了机器码"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"现在的构建工具一般都是用 JavaScript 进行编写的，对于这种解释型语言（动态语言）来说，在命令行下的性能非常糟糕。因为每次运行编译的时候 V8 引擎都是第一次遇见代码，无法进行任何优化措施。而 esbuild 使用 Go 这种编译型语言（静态语言）编写而成，已经编译成了机器可以直接执行的机器码。当 esbuild 在编译你的 javaScript 代码的时候，可能 Node 还在忙着解析你的构建工具的代码。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":" 除此之外，Go 语言是为并发而设计的语言，而 JavaScript 明显不是（老单线程了）。"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Go 在线程之间共享使用内存空间，而 JS 想要在线程间传递数据还需要把数据序列化之后再传送。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Go 和 JS 的并发都有相应的垃圾回收机制，Go 会在所有线程之间共享堆，对于 JS 而言，每一个线程都有一个独立的堆。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"根据 esbuild 的作者的测试，这似乎将 JavaScript 的工作线程的并行处理能力减少了一半，可能是因为你的一半 CPU 核心忙于为另一半收集垃圾"}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"大量使用并行算法"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"除了 Go 语言天生对于并发的优势，使得其处理并发任务性能远远优于 JavaScript，\nEsbuild 的内部算法也是经过精心设计的，尽可能的压榨所有的 CPU 核心。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"esbuild 的所有内容都是从零编写的"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"自己编写一切而不是使用第三方库有很多性能上的好处。可以从一开始就考虑到性能，可以确保所有的东西都使用一致的数据结构以避免昂贵的转换，当然，缺点就是这工作量非常大。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"更有效利用内存"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"esbuild 通过减少 AST 遍历次数（三次），来减小内存访问速度对于打包速度的影响"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Go 语言还有一个好处就是可以把数据更加紧凑的储存在内存中，从而使得高速 CPU 缓存可以存下更多的内容"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"vite-中使用-css"},"children":[{"type":"text","value":"Vite 中使用 CSS"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"原生css 支持，这一点毋庸置疑"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/postcss/postcss/blob/main/docs/README-cn.md","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"postcss"}]},{"type":"text","value":" 支持"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"变量定义"},{"type":"element","tag":"CodeBlock","props":{"data-language":"css","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"/* postcss 命名空间式定义变量 */\n:root {\n --main-font-color: blue;\n}\n\n.root {\n /* 使用postcss 插件console，但是需要配置 */ \n @console.error error;\n color: var(--main-font-color);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"/* postcss 命名空间式定义变量 */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"root"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" --main-font-color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" blue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"root"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"/* 使用postcss 插件console，但是需要配置 */"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" @console.error error"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B2CCD6"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"--main-font-color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postcss.config.js"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"javascript","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"module.exports = {\n plugins: [require(\"@postcss-plugins/console\")],\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"module.exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"plugins"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"@postcss-plugins/console"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"};"}]}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"@import"},{"type":"element","tag":"CodeBlock","props":{"data-language":"css","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"@import url(\"./test.css\");\n\n/* postcss 命名空间式定义变量 */\n:root {\n --main-font-color: blue;\n}\n\n.root {\n @console.error error;\n color: var(--main-font-color);\n}\n\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"@import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"./test.css"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"/* postcss 命名空间式定义变量 */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"root"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" --main-font-color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" blue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"root"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" @console.error error"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#B2CCD6"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"--main-font-color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"等等新功能特性"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"css预处理器支持"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Vite 也同时提供了对 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".scss"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".sass"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".less"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".styl"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".stylus"}]},{"type":"text","value":" 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖："},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"scss"},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn add scss\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn add scss"}]}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"less"},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn add less\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn add less"}]}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"stylus"},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn add stylus\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn add stylus"}]}]}]}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/css-modules/css-modules","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"css-modules"}]},{"type":"text","value":" 支持"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"通常一个大型项目的页面样式名都希望是按模块来划分的，并且保证唯一性，Vite 内置了 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"css-modules"}]},{"type":"text","value":" 的功能"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":" 使用方式: 创建对应 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.module.css"}]},{"type":"text","value":" 然后引入即可，下图为测试的案例"}]},{"type":"element","tag":"Image","props":{"alt":"image-20210720173108971","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1da5116066e4a0ea1be10f534db926b~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"vite-集成-jsx-和-tsx"},"children":[{"type":"text","value":"Vite 集成 JSX 和 TSX"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".jsx"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".tsx"}]},{"type":"text","value":" 文件同样开箱即用。JSX 的转译同样是通过 "},{"type":"element","tag":"a","props":{"href":"https://esbuild.github.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"esbuild"}]},{"type":"text","value":"，Vue 3 用户配置 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@vitejs/plugin-vue-jsx"}]},{"type":"text","value":" 即可"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"typescript","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\nimport vuejsx from \"@vitejs/plugin-vue-jsx\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue(), vuejsx({})],\n});\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vite"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" vue "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"@vitejs/plugin-vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" vuejsx "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"@vitejs/plugin-vue-jsx"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// https://vitejs.dev/config/"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"plugins"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"vuejsx"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue2 版本需要单独引入 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vite-plugin-vue2"}]},{"type":"text","value":" 来配合 vite 工具，并且暂时不支持 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tsx + decorator"}]},{"type":"text","value":" 写法，详情可以见"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"typescript","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"import { defineConfig } from \"vite\";\nimport { createVuePlugin } from \"vite-plugin-vue2\";\nimport ViteComponents from \"vite-plugin-components\";\nimport { resolve } from \"path\";\n\nconst config = defineConfig({\n resolve: {\n alias: {\n \"@\": `${resolve(__dirname, \"src\")}`,\n },\n },\n base: \"/vue-template/\",\n build: {\n minify: true,\n },\n plugins: [createVuePlugin({}), ViteComponents({ transformer: \"vue2\" })],\n server: {\n port: 8080,\n },\n});\nexport default config;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vite"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"createVuePlugin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vite-plugin-vue2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ViteComponents "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vite-plugin-components"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" config "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"alias"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"(__dirname"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"base"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"/vue-template/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"build"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"minify"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF9CAC"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"plugins"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"createVuePlugin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"ViteComponents"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"transformer"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vue2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"port"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F78C6C"}},"children":[{"type":"text","value":"8080"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" config"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue2.x版本 SFC + TS 写法基本一致"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"\n\n \n
\n\n\n\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"home"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"alt"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"Vue logo"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"../assets/logo.png"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"HelloWorld"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"msg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"Welcome to Your Vue.js + TypeScript App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"Component"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"Vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vue-property-decorator"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"Component"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"Home"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"Vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":""}]}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"viteconfigts-常用配置"},"children":[{"type":"text","value":"Vite.config.ts 常用配置"}]},{"type":"element","tag":"h4","props":{"id":"配置别名"},"children":[{"type":"text","value":"配置别名"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"typescript","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"export default defineConfig({\n resolve: {\n alias: {\n // 路径映射开头必须要加/\n \"@\": \"/src\",\n \"@styles\": \"/src/styles\",\n },\n },\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"alias"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// 路径映射开头必须要加/"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"/src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"@styles"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"/src/styles"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"配置语法提示"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"json","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"{\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"paths\": {\n \"@/*\": [\"src/*\"],\n \"@styles/*\": [\"src/styles/*\"]\n }\n },\n \"include\": [\"src/**/*.ts\", \"src/**/*.d.ts\", \"src/**/*.tsx\", \"src/**/*.vue\"]\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"compilerOptions"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"baseUrl"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"./"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"paths"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F78C6C"}},"children":[{"type":"text","value":"@/*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"src/*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F78C6C"}},"children":[{"type":"text","value":"@styles/*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"src/styles/*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"include"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"src/**/*.ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"src/**/*.d.ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"src/**/*.tsx"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"src/**/*.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用效果"}]},{"type":"element","tag":"Image","props":{"alt":"image-20210720162535915","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5372ce161b4f41b2ad3855486c0f1469~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"h4","props":{"id":"代理服务器"},"children":[{"type":"text","value":"代理服务器"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"typescript","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"export default {\n proxy: {\n '/api': {\n target: 'http://doman1.com',\n changeOrigin: true,\n rewrite: path => path.replace(/^\\/api/, '')\n }\n }\n}\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"proxy"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"/api"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"target"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"http://doman1.com"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"changeOrigin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF9CAC"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"rewrite"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" path "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" path"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"replace"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"^"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"\\/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"api"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"具体使用"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"typescript","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"fetch('/api/users').then(...)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"/api/users"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"数据mock"},"children":[{"type":"text","value":"数据mock"}]},{"type":"element","tag":"h4","props":{"id":"当前模式和环境变量"},"children":[{"type":"text","value":"当前模式和环境变量"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite 上定义好的环境变量"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.MODE"}]}]},{"type":"text","value":": {string} 应用运行的"},{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/guide/env-and-mode.html##modes","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"模式"}]},{"type":"text","value":"。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.BASE_URL"}]}]},{"type":"text","value":": {string} 部署应用时的基本 URL。他由"},{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/config/##base","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"base"}]},{"type":"text","value":" 配置项"}]},{"type":"text","value":"决定。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.PROD"}]}]},{"type":"text","value":": {boolean} 应用是否运行在生产环境。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.DEV"}]}]},{"type":"text","value":": {boolean} 应用是否运行在开发环境 (永远与 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import.meta.env.PROD"}]},{"type":"text","value":"相反)"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"自定义环境变量"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"开发环境(git 管理)"},{"type":"element","tag":"CodeBlock","props":{"data-language":"env","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"// .env.development\nVITE_SOME_KEY=this is a development token\n","language":"env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"// .env.development\nVITE_SOME_KEY=this is a development token"}]}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"生产环境(git 管理)"},{"type":"element","tag":"CodeBlock","props":{"data-language":"env","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"// .env.production\nVITE_SOME_KEY=this is a production token\n","language":"env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"// .env.production\nVITE_SOME_KEY=this is a production token"}]}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"本地开发环境"},{"type":"element","tag":"CodeBlock","props":{"data-language":"env","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"// .env.development.local\nVITE_SOME_KEY=this is a development token but not managed by git\n","language":"env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"// .env.development.local\nVITE_SOME_KEY=this is a development token but not managed by git"}]}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"本地生产环境"},{"type":"element","tag":"CodeBlock","props":{"data-language":"env","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"// .env.production.local\nVITE_SOME_KEY=this is a production token but not managed by git\n","language":"env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"// .env.production.local\nVITE_SOME_KEY=this is a production token but not managed by git"}]}]}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"案例"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"typescript","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":" return () => {\n const mode = import.meta.env.MODE; // 模式\n const baseUrl = import.meta.env.BASE_URL; //基本URL\n const prod = import.meta.env.PROD; // 是否是生产环境\n const dev = import.meta.env.DEV; // 是否是开发环境\n const token = import.meta.env.VITE_SOME_KEY; // 自定义环境变量\n return (\n \n \n
\n );\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"MODE"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// 模式"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"baseUrl"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"BASE_URL"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"//基本URL"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"prod"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"PROD"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// 是否是生产环境"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"dev"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"DEV"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// 是否是开发环境"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"token"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"VITE_SOME_KEY"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// 自定义环境变量"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"root"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"当前模式"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"："}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"当前baseURL"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"："}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"baseUrl"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"当前是否是生产环境"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"："}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"prod"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"当前是否是开发环境"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"："}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"dev"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"当前环境下token"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"："}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"token"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" )"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"};"}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"其他选项"},"children":[{"type":"text","value":"其他选项"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"详情可以见 "},{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/config/##shared-options","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方文档配置"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"此处列出一个自己玩过的模板"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"\n/**\n * https://vitejs.dev/config/\n * @type {import('vite').UserConfig}\n */\nexport default {\n //项目根目录 \n root: process.cwd(),\n //项目部署的基础路径\n base: \"/\",\n //环境配置\n mode: 'development',\n //全局变量替换 Record当前模式：{mode}
\n当前baseURL：{baseUrl}
\n当前是否是生产环境：{prod}
\n当前是否是开发环境：{dev}
\n当前环境下token：{token}
\n\n Click the button to test actions !\n \n
\n\n\n\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"Click"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"the"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"test"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"actions"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" !"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"click"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"doubleCount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"count"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"is:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" {{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"count"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"defineComponent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"reactive"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"toRefs"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"useAppStoreHook"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"@/store/module/app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"defineComponent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"Vuex"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"piniaApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"useAppStoreHook"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"state"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"reactive"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" count"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"piniaApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"count"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"doubleCount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"piniaApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"DOUBLE_COUNT"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"toRefs"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"state"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"doubleCount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":""}]}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"更多使用技巧，查看 "},{"type":"element","tag":"a","props":{"href":"https://pinia.esm.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"pinia文档"}]},{"type":"text","value":" 即可"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"axios"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"axios"}]},{"type":"text","value":" 插件，根据需求封装请求拦截器即可"}]},{"type":"element","tag":"h3","props":{"id":"代码规范"},"children":[{"type":"text","value":"代码规范"}]},{"type":"element","tag":"h4","props":{"id":"集成-editorconfig"},"children":[{"type":"text","value":"集成 editorConfig"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员维护一致的编码风格。EditorConfig 项目由用于定义编码样式"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"的文件格式"}]},{"type":"text","value":"和一组"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"文本编辑器插件组成"}]},{"type":"text","value":"，这些"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"插件"}]},{"type":"text","value":"使编辑器能够读取文件格式并遵循定义的样式。EditorConfig 文件很容易阅读，并且可以很好地与版本控制系统配合使用。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"相关配置查看"},{"type":"element","tag":"a","props":{"href":"https://editorconfig.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"文档"}]},{"type":"text","value":"即可，VSCode需要下载相关插件搭配使用"}]},{"type":"element","tag":"code","props":{"code":"## Editor configuration, see http://editorconfig.org\n\n## 表示是最顶层的 EditorConfig 配置文件\nroot = true\n\n[*] ## 表示所有文件适用\ncharset = utf-8 ## 设置文件字符集为 utf-8\nindent_style = space ## 缩进风格（tab | space）\nindent_size = 2 ## 缩进大小\nend_of_line = lf ## 控制换行类型(lf | cr | crlf)\ntrim_trailing_whitespace = true ## 去除行首的任意空白字符\ninsert_final_newline = true ## 始终在文件末尾插入一个新行\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"## Editor configuration, see http://editorconfig.org\n\n## 表示是最顶层的 EditorConfig 配置文件\nroot = true\n\n[*] ## 表示所有文件适用\ncharset = utf-8 ## 设置文件字符集为 utf-8\nindent_style = space ## 缩进风格（tab | space）\nindent_size = 2 ## 缩进大小\nend_of_line = lf ## 控制换行类型(lf | cr | crlf)\ntrim_trailing_whitespace = true ## 去除行首的任意空白字符\ninsert_final_newline = true ## 始终在文件末尾插入一个新行"}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"集成-prettier-配置"},"children":[{"type":"text","value":"集成 Prettier 配置"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"命令行式 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" ，需要项目中集成 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":" 加持"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn add prettier\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn add prettier"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"然后在项目根目录创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".pretterrc"}]},{"type":"text","value":" 或者 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".pretterrc.json"}]},{"type":"text","value":" ,增加以下配置，了解更多配置见"},{"type":"element","tag":"a","props":{"href":"https://prettier.io/docs/en/options.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"文档"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"json","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"{\n \"useTabs\": false,\n \"tabWidth\": 2,\n \"printWidth\": 120,\n \"singleQuote\": true,\n \"bracketSpacing\": true,\n \"semi\": true\n}\n\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"useTabs"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"false,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"tabWidth"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F78C6C"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"printWidth"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F78C6C"}},"children":[{"type":"text","value":"120"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"singleQuote"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"true,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"bracketSpacing"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"true,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"semi"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"然后运行命令一键格式化，这一步可以被集成到打包或者编译前置动作"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn prettier --write . \n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn prettier --write "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"利用编辑器插件 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":"\nVscode 提供 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":" 插件同样具有强大的能力，开发者不需要在项目中安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":" 就可以通过配置来实现 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"首先是插件市场安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"然后可以在本地 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setting.json"}]},{"type":"text","value":"，或者项目目录下创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".vscode"}]},{"type":"text","value":"目录，然后创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setting.json"}]},{"type":"text","value":"，加入以下配置"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"json","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"{\n // prettier配置\n \"editor.detectIndentation\": false,\n \"editor.formatOnSave\": true, // 开启自动保存\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n },\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[html]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[vue]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[json]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[jsx]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[tsx]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[css]\": {\n \"editor.defaultFormatter\": \"michelemelluso.code-beautifier\"\n },\n \"[scss]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[less]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[typescript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n }\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// prettier配置"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"editor.detectIndentation"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"false,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"editor.formatOnSave"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"true,"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// 开启自动保存"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"editor.codeActionsOnSave"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"source.fixAll.eslint"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[javascript]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[html]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[vue]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[json]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[jsx]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[tsx]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[css]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"michelemelluso.code-beautifier"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[scss]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[less]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"[typescript]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"editor.defaultFormatter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"esbenp.prettier-vscode"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"工作区目录优先级比全局要高，推荐在工作区引入该配置"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"集成-eslint"},"children":[{"type":"text","value":"集成 Eslint"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]},{"type":"text","value":" 规则配置要比 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tslint"}]},{"type":"text","value":" 要多的多，所以首选 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第一步，安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn add eslint\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn add eslint"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"相关插件列表"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"json","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"{\n \"@typescript-eslint/eslint-plugin\": \"^4.28.4\",\n \"@typescript-eslint/parser\": \"^4.28.4\",\n \"@vue/eslint-config-prettier\": \"^6.0.0\",\n \"@vue/eslint-config-typescript\": \"^7.0.0\",\n \"vue-eslint-parser\": \"^7.6.0\",\n \"eslint\": \"^7.31.0\",\n \"prettier\": \"^2.3.2\",\n \"eslint-config-prettier\": \"^8.3.0\",\n \"eslint-plugin-import\": \"^2.23.4\",\n \"eslint-plugin-node\": \"^11.1.0\",\n \"eslint-plugin-prettier\": \"^3.4.0\",\n \"eslint-plugin-vue\": \"^7.14.0\",\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"@typescript-eslint/eslint-plugin"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^4.28.4"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"@typescript-eslint/parser"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^4.28.4"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"@vue/eslint-config-prettier"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^6.0.0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"@vue/eslint-config-typescript"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^7.0.0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"vue-eslint-parser"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^7.6.0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"eslint"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^7.31.0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"prettier"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^2.3.2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"eslint-config-prettier"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^8.3.0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"eslint-plugin-import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^2.23.4"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"eslint-plugin-node"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^11.1.0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"eslint-plugin-prettier"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^3.4.0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"eslint-plugin-vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"^7.14.0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第二步，初始化规则，这里我选择了 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint:recommended"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn eslint --init\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn eslint --init"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"根据团队需求配置 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]},{"type":"text","value":" 规则"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"解决 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":" 规则冲突问题"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint-plugin-prettier"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint-config-prettier"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".eskintrc.js"}]},{"type":"text","value":"添加顺序规则"},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"module.exports = {\n ...\n extends: [\n 'plugin:vue/essential',\n 'eslint:recommended',\n 'plugin:prettier/recommended' // 添加 prettier 插件\n ],\n ...\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"module.exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" extends: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"plugin:vue/essential"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"eslint:recommended"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"plugin:prettier/recommended"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// 添加 prettier 插件"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"最终优先级："},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Prettier 配置规则"}]},{"type":"text","value":" > "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ESLint 配置规则"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fix"}]},{"type":"text","value":" 代码"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"eslint --fix\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"eslint --fix"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第三步，配置 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vscode"}]},{"type":"text","value":" 自动 fix：安装 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Eslint"}]},{"type":"text","value":" 插件，然后开启 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"autofix"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"json","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":" \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n }\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"editor.codeActionsOnSave"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"source.fixAll.eslint"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第四步，添加 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"script"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"json","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":" \"scripts\": {\n \"dev\": \"eslint --ext .js,.jsx,.vue,.ts,.tsx src && vite\",\n \"build\": \"vue-tsc --noEmit && vite build\",\n \"serve\": \"vite preview\",\n \"lint\": \"eslint --ext .js,.jsx,.vue,.ts,.tsx src\"\n },\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"scripts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"dev"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"eslint --ext .js,.jsx,.vue,.ts,.tsx src && vite"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"build"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vue-tsc --noEmit && vite build"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"serve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vite preview"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"lint"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"eslint --ext .js,.jsx,.vue,.ts,.tsx src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":","}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"贴一下我自己的"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".eslintrc.js"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"module.exports = {\n root: true,\n env: {\n node: true,\n },\n extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'],\n parserOptions: {\n ecmaVersion: 2020,\n },\n rules: {\n // disable the rule for all files\n '@typescript-eslint/explicit-module-boundary-types': 'off',\n },\n overrides: [\n {\n // enable the rule specifically for TypeScript files\n files: ['*.js', '*.ts'],\n rules: {\n '@typescript-eslint/explicit-module-boundary-types': 'warn',\n },\n },\n ],\n};\n\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"module.exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"root"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF9CAC"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"node"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF9CAC"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"plugin:vue/vue3-essential"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"eslint:recommended"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"@vue/typescript/recommended"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"parserOptions"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"ecmaVersion"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F78C6C"}},"children":[{"type":"text","value":"2020"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"rules"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// disable the rule for all files"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"@typescript-eslint/explicit-module-boundary-types"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"off"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"overrides"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// enable the rule specifically for TypeScript files"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"files"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"*.js"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"*.ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"rules"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"@typescript-eslint/explicit-module-boundary-types"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"warn"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"};"}]}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"提交修复"},"children":[{"type":"text","value":"提交修复"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们希望在代码提交之前做一次 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lint"}]},{"type":"text","value":" 检查和修复，我们需要用到 Git Hook，在本地执行 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git commit"}]},{"type":"text","value":" 的时候，就对所提交的代码进行 ESLint 检测和修复（即执行 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"eslint --fix"}]},{"type":"text","value":"），如果这些代码没通过 ESLint 规则校验，则禁止提交。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这里需要使用到两个工具:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/typicode/husky","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"husky"}]},{"type":"text","value":" —— Git Hook 工具，可以设置在 git 各个阶段（"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pre-commit"}]},{"type":"text","value":"、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"commit-msg"}]},{"type":"text","value":"、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pre-push"}]},{"type":"text","value":" 等）触发我们的命令。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/okonet/lint-staged","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lint-staged"}]},{"type":"text","value":" —— 在 git 暂存的文件上运行 linters。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第一步，安装插件并初始化一个 husky 配置，这一步会在根目录下生成 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".husky "}]},{"type":"text","value":"目录"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"npx husky-init && yarn\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"npx husky-init "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" yarn"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第二步，修改 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pre-commit"}]},{"type":"text","value":"规则，但缺点是这一步会扫描所有文件"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"bash","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"##!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\neslint --fix ./src --ext .vue,.js,.ts\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"##!/bin/sh"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\"$("}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"dirname "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\"$"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"/_/husky.sh"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"eslint --fix ./src --ext .vue,.js,.ts"}]}]}]}]}]}]},{"type":"element","tag":"Image","props":{"alt":"image-20210723150047244","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8519380eda14665b37258d8ad969c2a~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第三步，安装并配置"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lint-staged"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn add lint-staged\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn add lint-staged"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"然后在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":"里增加 lint-staged 配置项"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"json","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":" \"lint-staged\": {\n \"*.{vue,js,ts,tsx,jsx}\": \"eslint --fix\"\n }\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"lint-staged"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"*.{vue,js,ts,tsx,jsx}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"eslint --fix"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"验证效果，我写了一段错误代码在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"demo.ts"}]},{"type":"text","value":"，然后去提交代码，husky 和 lint-staged 就起了关键作用，如果是 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"warning"}]},{"type":"text","value":" 级别可以正确修复，如果是 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"error"}]},{"type":"text","value":" 就会在控制台打印出错误日志"}]},{"type":"element","tag":"Image","props":{"alt":"image-20210723151610043","src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e43a63987ee54443b9d7f0db93c4d51a~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"单元测试"},"children":[{"type":"text","value":"单元测试"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"单元测试是项目开发中一个非常重要的环节，完整的测试能为代码和业务提供质量保证，减少 Bug 的出现"}]},{"type":"element","tag":"h4","props":{"id":"安装并配置核心依赖"},"children":[{"type":"text","value":"安装并配置核心依赖"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vuejs/vue-test-utils-next","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-test-utils"}]}]},{"type":"text","value":" Vue 团队开发和维护的测试库"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/facebook/jest","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"jest"}]}]},{"type":"text","value":" 官方推荐测试库"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vuejs/vue-jest","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-jest"}]}]},{"type":"text","value":" 负责 jest 扫描 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".vue"}]},{"type":"text","value":" 和转换"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/kulshekhar/ts-jest","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ts-jest"}]}]},{"type":"text","value":" 负责 jest 扫描 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" 和转换"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn add @vue/test-utils@next jest vue-jest@next ts-jest -D \n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn add @vue/test-utils@next jest vue-jest@next ts-jest -D "}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"添加 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jest.config.js"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"module.exports = {\n moduleFileExtensions: ['vue', 'js', 'ts'],\n preset: 'ts-jest',\n testEnvironment: 'jsdom',\n transform: {\n '^.+\\\\.vue$': 'vue-jest', // vue 文件用 vue-jest 转换\n '^.+\\\\.ts$': 'ts-jest', // ts 文件用 ts-jest 转换\n },\n // 匹配 __tests__ 目录下的 .js/.ts 文件 或其他目录下的 xx.test.js/ts xx.spec.js/ts\n testRegex: '(/__tests__/.*|(\\\\.|/)(test|spec))\\\\.(ts)$',\n};\n\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"module.exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"moduleFileExtensions"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"js"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"preset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"ts-jest"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"testEnvironment"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"jsdom"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"transform"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"^.+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"\\\\"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":".vue$"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vue-jest"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// vue 文件用 vue-jest 转换"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"^.+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"\\\\"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":".ts$"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"ts-jest"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// ts 文件用 ts-jest 转换"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// 匹配 __tests__ 目录下的 .js/.ts 文件 或其他目录下的 xx.test.js/ts xx.spec.js/ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"testRegex"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"(/__tests__/.*|("}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"\\\\"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":".|/)(test|spec))"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"\\\\"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":".(ts)$"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"};"}]}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"集成typesjest-和-eslint-plugin-jest"},"children":[{"type":"text","value":"集成@types/jest 和 eslint-plugin-jest"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这两个工具主要是为了解决编辑器 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jest"}]},{"type":"text","value":" 代码提示错误和 eslint 对 jest 的支持"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"yarn add @types/jest eslint-plugin-jest -D\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"yarn add @types/jest eslint-plugin-jest -D"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"修改 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tsconfig.json"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"json","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"{\n \"compilerOptions\": {\n ...\n \"types\": [\"vite/client\", \"jest\"]\n },\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"compilerOptions"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"types"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"vite/client"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"jest"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".eslintrc.js"}]},{"type":"text","value":" 添加 jest lint 插件 配置"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"{\n ...\n extends: [\n 'plugin:vue/vue3-essential',\n 'eslint:recommended',\n '@vue/typescript/recommended',\n 'plugin:jest/recommended',\n ],\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFCB6B"}},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"plugin:vue/vue3-essential"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"eslint:recommended"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"@vue/typescript/recommended"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"plugin:jest/recommended"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" ]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"编写单元测试"},"children":[{"type":"text","value":"编写单元测试"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tests"}]},{"type":"text","value":" 目录，然后创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"xx.spec.ts"}]},{"type":"text","value":" 文件编写单元测试，然后测试"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"typescript","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"// Axios.spec.ts\nimport { mount } from '@vue/test-utils';\nimport Axios from '../src/views/Axios.vue';\n\ndescribe('Axios.vue', () => {\n it('renders', () => {\n const wrapper = mount(Axios);\n expect(wrapper.html()).toContain('Vite2.x + Vue3.x + TypeScript Starter');\n });\n});\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#545454"}},"children":[{"type":"text","value":"// Axios.spec.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"mount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"@vue/test-utils"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" Axios "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"../src/views/Axios.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"describe"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"Axios.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"it"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"renders"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"wrapper"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"mount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"Axios"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"expect"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"wrapper"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"())"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#82AAFF"}},"children":[{"type":"text","value":"toContain"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"Vite2.x + Vue3.x + TypeScript Starter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":";"}]}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"建议打包时执行前置单元测试，如果希望在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"push"}]},{"type":"text","value":" 代码之前执行单元测试，只需要在 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".husky"}]},{"type":"text","value":" 目录下创建 "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pre-push"}]},{"type":"text","value":"脚本 ，然后添加对应测试命令即可。"}]}]},{"type":"element","tag":"h2","props":{"id":"小结"},"children":[{"type":"text","value":"小结"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"至此，一个综合性 Vue3.x 项目就搭建完成，总结下该工程的能力"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"编程语言："},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/zh/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TypeScript"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"构建工具："},{"type":"element","tag":"a","props":{"href":"https://cn.vitejs./dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vite 2.x"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"前端框架："},{"type":"element","tag":"a","props":{"href":"https://v3.cn.vuejs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue 3.x"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"路由工具："},{"type":"element","tag":"a","props":{"href":"https://next.router.vuejs.org/zh/index.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue Router 4.x"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"状态管理："},{"type":"element","tag":"a","props":{"href":"https://pinia.esm.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Pinia"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"CSS 预编译："},{"type":"element","tag":"a","props":{"href":"https://stylus-lang.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Stylus"}]},{"type":"text","value":" / "},{"type":"element","tag":"a","props":{"href":"https://sass.bootcss.com/documentation","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Sass"}]},{"type":"text","value":" / "},{"type":"element","tag":"a","props":{"href":"http://lesscss.cn/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Less"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"HTTP 工具："},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Axios"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Git Hook 工具："},{"type":"element","tag":"a","props":{"href":"https://typicode.github.io/husky/##/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"husky"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://github.com/okonet/lint-staged","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lint-staged"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"代码规范："},{"type":"element","tag":"a","props":{"href":"http://editorconfig.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"EditorConfig"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://prettier.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Prettier"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://eslint.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ESLint"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"单元测试："},{"type":"element","tag":"a","props":{"href":"https://next.vue-test-utils.vuejs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-test-utils"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://jestjs.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"jest"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://github.com/vuejs/vue-jest","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-jest"}]},{"type":"text","value":" + "},{"type":"element","tag":"a","props":{"href":"https://kulshekhar.github.io/ts-jest/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ts-jest"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在线预览该工程："},{"type":"element","tag":"a","props":{"href":"https://251205668.github.io/vite-vue3-sfc-template/##/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue3-sfc-template"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"为此我还准备了这些常用模板"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Vue2.x + vite 模板"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TSX + decorator能力："},{"type":"element","tag":"a","props":{"href":"https://github.com/251205668/vite-vue2-start/tree/tsx-decorator","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue2-tsx-start"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"SFC + decorator能力："},{"type":"element","tag":"a","props":{"href":"https://github.com/251205668/vite-vue2-start","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue2-start"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Vue3.x + vite 模板"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TSX + composition-api能力："},{"type":"element","tag":"a","props":{"href":"https://github.com/251205668/vite-vue3-start","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue3-start"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"SFC + composition-api能力："},{"type":"element","tag":"a","props":{"href":"https://github.com/251205668/vite-vue3-sfc-template","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite-vue3-sfc-template"}]}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"vite-概要介绍","depth":2,"text":"Vite 概要介绍","children":[{"id":"什么是-vite","depth":3,"text":"什么是 Vite"},{"id":"vite-和-webpack-对比","depth":3,"text":"Vite 和 webpack 对比"},{"id":"vite-带来的收益是什么","depth":3,"text":"Vite 带来的收益是什么"}]},{"id":"vite-基础应用","depth":2,"text":"Vite 基础应用","children":[{"id":"官方脚手架安装模板安装","depth":3,"text":"官方脚手架安装、模板安装"},{"id":"vite-中使用-typescript","depth":3,"text":"Vite 中使用 Typescript"},{"id":"vite-中使用-css","depth":3,"text":"Vite 中使用 CSS"},{"id":"vite-集成-jsx-和-tsx","depth":3,"text":"Vite 集成 JSX 和 TSX"},{"id":"viteconfigts-常用配置","depth":3,"text":"Vite.config.ts 常用配置"},{"id":"其他选项","depth":3,"text":"其他选项"},{"id":"webpack-进军-vite","depth":3,"text":"webpack 进军 vite"}]},{"id":"vite-常用插件","depth":2,"text":"Vite 常用插件","children":[{"id":"vitejsplugin-vue","depth":3,"text":"@vitejs/plugin-vue"},{"id":"vitejsplugin-vue-jsx","depth":3,"text":"@vitejs/plugin-vue-jsx"},{"id":"vitejsplugin-legacy","depth":3,"text":"@vitejs/plugin-legacy"},{"id":"vitejsvite-plugin-vue2","depth":3,"text":"@vitejs/vite-plugin-vue2"},{"id":"vite-plugin-components","depth":3,"text":"@vite-plugin-components"}]},{"id":"配合-vue3x-搭建工程化项目","depth":2,"text":"配合 Vue3.x 搭建工程化项目","children":[{"id":"搭建基础工程","depth":3,"text":"搭建基础工程"},{"id":"简单修改-vite-配置","depth":3,"text":"简单修改 vite 配置"},{"id":"整理目录结构","depth":3,"text":"整理目录结构"},{"id":"整合部分工具","depth":3,"text":"整合部分工具"},{"id":"代码规范","depth":3,"text":"代码规范"},{"id":"单元测试","depth":3,"text":"单元测试"}]},{"id":"小结","depth":2,"text":"小结"}]}},"_type":"markdown","_id":"content:posts:vite migration plan.md","_source":"content","_file":"posts/vite migration plan.md","_extension":"md","storageMeta":{"atime":"2023-06-16T10:26:05.626Z","mtime":"2023-06-16T10:26:05.626Z","size":42907},"readingMins":5,"path":"/blog/vite-migration-plan","renderer":"post","schemaOrg":{"modifiedAt":"2023-06-16T10:26:05.626Z"},"modifiedAt":"2023-06-16T10:26:05.626Z"},{"_path":"/posts/vue-automatic-component-imports","_draft":false,"_partial":false,"_empty":false,"title":"Building a Vue Auto Component Importer - A Better Dev Experience","description":"Components magically being imported into your app is the latest developer experience trend in Vue. Why does it exist and how does it work?","excerpt":"Having component folders auto-magically imported into your app is the latest craze. How does it work and is it good?","publishedAt":"2020-12-22","tags":["webpack","vue"],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"toc","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When first learning Vue, you are taught you need to import and add components to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" in the script block."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"\n\n\n![\"Vue](\"./assets/logo.png\"){kind=logo}
\n \n \n \n
\n\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" bar"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C3E88D"}},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F07178"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C792EA"}},"children":[{"type":"text","value":"v-my-directive"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#EEFFFF"}},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#89DDFF"}},"children":[{"type":"text","value":""}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We could imagine that we could write some code which would inject the directive such as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import MyDirective from \"@/directives/MyDirective\""}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"progressive-images"},"children":[{"type":"text","value":"Progressive Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We hook into the compiling again and replace the source of our images with compile-time low-resolution versions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Input"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"\n