vite+vue3+ts从0到1搭建企业级项目（1）https://developer.aliyun.com/article/1540136
3. 代码质量风格的统一
集成 eslint
eslint是可组装的javascript和JSX检查工具。就是说它可以帮我们检查我们的javascript代码，来保证代码的一致性和避免错误。当然，通过其他的解释器，它也能帮我们检查typescript。可组装的意思是eslint是插件化的，每一个规则都是插件，我们可以根据自己的需要去组装出不同的规则集合满足自己项目的需求。官网地址
- 安装
yarn add eslint eslint-plugin-vue --save-dev
- 由于 ESLint 默认使用 Espree进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装 @typescript-eslint/parser 替代掉默认的解析器
yarn add @typescript-eslint/parser --save-dev
- 安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。
yarn add @typescript-eslint/eslint-plugin --save-dev
- 创建配置文件：
.eslintrc.js
// 这是一个 CommonJS 模块，可以导入到其他的 JavaScript 文件中使用 module.exports = { // 指定解析器为 'vue-eslint-parser'，这是一个专门为 Vue.js 设计的 ESLint 解析器 parser: 'vue-eslint-parser', // 定义解析器的选项 parserOptions: { // 指定 'vue-eslint-parser' 的解析器为 '@typescript-eslint/parser'，这是一个为 TypeScript 设计的 ESLint 解析器 parser: '@typescript-eslint/parser', // 设置 ECMAScript 的版本为 2020 ecmaVersion: 2020, // 设置源代码的类型为 'module'，对应 ECMAScript 6 中的模块 sourceType: 'module', // 开启 JSX 的解析功能 ecmaFeatures: { jsx: true } }, // 扩展或继承一些现有的配置 extends: [ // 使用 Vue.js 3 推荐的 ESLint 规则 'plugin:vue/vue3-recommended', // 使用 TypeScript 推荐的 ESLint 规则 'plugin:@typescript-eslint/recommended', ], // 自定义或覆盖一些规则 rules: { // 在这里添加或覆盖规则，例如: // 'no-console': 'off' // 禁用 'no-console' 规则 } };
- 创建忽略文件：
.eslintignore
node_modules/ dist/ index.html
- 命令行式运行：修改package.json
{ ... "type": "commonjs", ... "scripts": { ... "eslint:comment": "使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件", "eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src", } ... }
- 注意：在这里需要将修改 “type”:“moudle"改为"commonjs” 。.eslintrc.js文件被视为ES模块文件，因为它是一个.js文件，其最近的父package.json包含"type": “module”，这声明了该包范围内的所有.js文件都作为ES模块。如果不修改运行 yarn eslint 将会报如下错误：
- 请注意 typescript的版本是否兼容，如过报如下错误，你需要修改你的typescript版本：
解决方案：在这里我卸载了typescript然后安装了适配的typescript@5.1.3版本。由于每个人的版本下载不一样，所以可能存在差异。
yarn remove typescript yarn add typescript@5.1.3 --dev
- 此时运行成功：
集成 Prettier
Prettier 是一个用来格式化代码的工具，或者称为包或插件。它的作用就是”格式化代码“，使代码更加整齐、易读 。官网地址
- 安装
yarn add prettier eslint-config-prettier eslint-plugin-prettier --save-dev
- 创建配置文件：
.prettierrc.js
module.exports = { // 一行最多 80 字符 printWidth: 80, // 使用 4 个空格缩进 tabWidth: 4, // 不使用 tab 缩进，而使用空格 useTabs: false, // 行尾需要有分号 semi: true, // 使用单引号代替双引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: 'as-needed', // jsx 不使用单引号，而使用双引号 jsxSingleQuote: false, // 末尾使用逗号 trailingComma: 'all', // 大括号内的首尾需要空格 { foo: bar } bracketSpacing: true, // 箭头函数，只有一个参数的时候，也需要括号 arrowParens: 'always', // 每个文件格式化的范围是文件的全部内容 rangeStart: 0, rangeEnd: Infinity, // 不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap: 'preserve', // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: 'css', // 换行符使用 lf endOfLine: 'auto' }
- 修改
.eslintrc.js配置
module.exports = { // ... extends: [ // 使用 Vue.js 3 的推荐配置，这会应用一套 Vue.js 3 的最佳实践规则 'plugin:vue/vue3-recommended', // 使用 TypeScript ESLint 插件的推荐配置，这会应用一套 TypeScript 的最佳实践规则 'plugin:@typescript-eslint/recommended', // 使用 Prettier 的 ESLint 配置，用于关闭所有与 Prettier 格式化冲突的规则 'prettier', // 使用 Prettier 插件的推荐配置，并设置 Prettier 为 ESLint 的格式化程序 'plugin:prettier/recommended' ], // ... };
- 修改
package.json
{ ... "scripts": { ... "prettier:comment": "自动格式化当前目录下的所有文件", "prettier": "prettier --write" } ... }
- 运行：
prettier --write ./src/
4. 集成 vue-router4
- 安装
yarn add vue-router --save
- 使用
在src目录下新建一个router目录并新建index.ts文件
// 导入 Vue Router 的创建函数和类型 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; // 定义路由数组，其中每一个对象都对应一个路由 const routes: Array<RouteRecordRaw> = [ { path: '/login', // 路由路径 name: 'Login', // 路由名称 meta: { // 路由元信息 title: '登录', // 页面标题 keepAlive: true, // 是否保持状态 requireAuth: false // 是否需要权限验证 }, component: () => import('@/views/login.vue') // 路由对应的组件 }, { path: '/', // 路由路径 name: 'Index', // 路由名称 meta: { // 路由元信息 title: '首页', // 页面标题 keepAlive: true, // 是否保持状态 requireAuth: true // 是否需要权限验证 }, component: () => import('@/views/index.vue') // 路由对应的组件 } ]; // 使用 createRouter 创建一个新的路由实例 const router = createRouter({ history: createWebHistory(), // 使用 HTML5 History API routes // 路由配置 }); // 导出路由实例，以便在其他地方使用 export default router;
- 其中
RouteRecordRaw是 Vue Router 中的一个接口，用于描述路由对象的类型。在 Vue Router 4.x 版本中，它被定义如下：
interface RouteRecordRaw { // 路由的路径 path: string; // 可选，路由的名称 name?: string; // 可选，应用于此路由的组件 component?: Component; // 可选，键为字符串且值为组件的对象，用于定义命名视图 components?: Record<string, Component>; // 可选，当用户访问此路由时应重定向到的路由 redirect?: RedirectOption; // 可选，可以是布尔值，对象或 `RoutePropsFunction` 类型，用于将路由的参数转换为组件的 props props?: boolean | Object | RoutePropsFunction; // 可选，用于定义嵌套的子路由的 `RouteRecordRaw` 数组 children?: RouteRecordRaw[]; // 可选，任何类型，可以用于存储关于路由的附加信息 meta?: any; // 可选，定义在导航到路由之前应运行的导航守卫 beforeEnter?: NavigationGuardWithThis<undefined>; }
- 在
main.ts中引入并修改App.vue
//main.ts import { createApp } from 'vue'; import './style.css'; import App from './App.vue'; import router from '@/router' const app=createApp(App) app.use(router) app.mount('#app');
<template> <RouterView /> </template> <script lang="ts" setup> </script> <style scoped></style>
vite+vue3+ts从0到1搭建企业级项目（3）https://developer.aliyun.com/article/1540140
