vite+vue3+ts从0到1搭建企业级项目(2)

简介: vite+vue3+ts从0到1搭建企业级项目

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

目录
相关文章
|
8天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
21 4
|
13天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
8 0
|
1天前
|
JavaScript
vue知识点
vue知识点
12 6
|
4天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
11天前
|
JavaScript
|
13天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
26 6
|
10天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2
|
13天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
32 4