VUE3项目配置

用户9381691255360
111 阅读9分钟

一、安装ESLint

ESLint的目标是提供一个插件化的javascript代码检测工具，包含JS语法以及少部分代码格式问题。

1、安装ESLint

  1. 下载并安装ESLint。

pnpm create @eslint/config@latest

执行命令后，命令运行窗口会要求回答几个问题，回答完成后，就会在当前目录下生成eslint.config.ts配置文件，并且安装eslint相关的插件和依赖包。可以看到package.json文件发生了变化。

2、配置校验规则

  1. 打开eslint.config.ts配置文件。配置全局忽略文件。
import { defineConfig, globalIgnores } from "eslint/config";

export default defineConfig([
  // 默认忽略node_modules
  globalIgnores(['dist/']),
  
  ...其他配置...
])

2. 如果有个别需要校验的规则，可以放在rules模块中。

export default defineConfig([
...其他配置...
    {
        rules: {
          "no-undef": "warn", //未定义的变量
          "no-var": "error", //要求使用let或const, 而不是var
        }
    }
    
])

3、校验并修复

  1. 在package.json文件中，找到scripts模块，增加如下配置：
"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix"
  },

2. 在某个src文件夹下的vue文件或者ts文件中，写一段错误代码，比如 var a = 123。 3. 执行命令 pnpm lint，会对src文件夹下的所有文件按照eslint.config.ts配置文件中配置的校验规则进行校验，在控制台打印出校验不通过的信息。

  1. 执行命令 pnpm fix会对部分错误代码进行自动修正。

并不是所有错误都能被自动修正。可以访问官网查看哪些错误能够被自动修正。

二、安装Prettier

Prettier属于格式化工具，它看不惯格式不统一，保证代码美观。

1、安装Prettier

pnpm add --save-dev --save-exact prettier

2、配置格式化规则

  1. 在项目根目录下，创建.prettierrc配置文件，使用JSON或者YAML格式。
  2. 在.prettierrc文件中，录入以下规则：
{
    "singleQuote": true,
    "semi": false,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto",
    "trailingComma": "all",
    "tabWidth": 2
}

3. 在项目根目录下，创建.prettierignore配置文件，该文件中指出的路径或文件都会被Prettier忽略。

**/*.html
**/*.svg
**/*.sh
/dist/*
/html/*
/public/*
.local
/node_modules/*
/eslint.config.ts

4. 如果项目中已经安装了ESLint，则需要将实现ESLint与Prettier集成，Prettier就能用lint方式执行。

（1）安装插件eslint-config-prettier、eslint-plugin-prettier

> `pnpm add -D eslint-config-prettier eslint-plugin-prettier`
>
> eslint-config-prettier 可以关闭ESLint中不必要的或者与Prettier冲突的规则。
> eslint-plugin-prettier 像ESLint规则似的运行Prettier并已单独的ESLint 问题形式输出Prettier检测结果。

（2）打开eslint.config.ts配置文件，配置Prettier推荐的规则

import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default defineConfig([
    // 要放在所有规则的后面
    eslintPluginPrettierRecommended
])

3、校验

  1. 在某个src文件夹下的vue文件或者ts文件中，写一段错误代码，比如 const a = "123"。
  2. 执行命令 pnpm lint，会对src文件夹下的所有文件按照eslint.config.ts配置文件中配置的校验规则进行校验，在控制台打印出校验不通过的信息。

三、安装Stylelint

Stylelint为css的lint工具，可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等。

1、安装

我们的项目中使用scss作为预处理器，安装以下依赖：

// 安装Stylelint以及相关配置包
pnpm add -D sass sass-loader postcss postcss-scss postcss-html stylelint stylelint-scss stylelint-order stylelint-config-standard stylelint-config-standard-vue stylelint-config-standard-scss stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss

2、配置校验规则

  1. 在项目根目录下，创建配置文件.stylelintrc.cjs，规定了stylelint的校验规则。
module.exports = {
  extends: [
    'stylelint-config-standard', // 配置stylelint扩展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
    'stylelint-config-standard-scss', // 配置 stylelint scss插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中scss样式格式化
    'stylelint-config-recess-order', // 配置 stylelint css属性书写顺序插件
    'stylelint-config-prettier', // 配置 stylelint 和 prettier 兼容
  ],
  overrids: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html',
    },
  ],
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.ts',
    '**/*.tsx',
    '**/*.json',
    '**/*.md',
    '**/*.yaml',
  ],
  /**
   * null => 关闭该规则
   * always => 必须
   */
  rules: {
    'value-keyword-case': null, // 在css 中使用v-bind 不报错
    'no-descending-specificity': null, // 禁止在具有较高优先级选择器后出现被其覆盖的较低优先级的选择器
    'function-url-quotes': 'always', // 要求或禁止url的引号--always: 必须加上引号；never: 没有引号
    'no-empty-source': null, //关闭禁止空源码
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
    'property-no-unknown': null, // 禁止未知的属性（true为不允许）
    'block-opening-brace-space-before': 'always', // 大括号之前必须有一个空格或者不能有空白符
    'value-no-vendor-prefix': null, // 关闭属性值前缀
    'property-no-vendor-prefix': null, // 关闭属性前缀
    'selector-pseudo-class-no-unknown': [
      // 不允许未知的选择器
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'] //忽略属性，修改element默认样式的时候能用到
      },
    ],
  },
}
  1. 在项目根目录下，创建配置文件.stylelintignore，规定了stylelint执行校验时会忽略的文件。
/node_modules/*
/dist/*
/html/*
/public/*

3、配置脚本

在package.json文件的scripts脚本模块中，增加如下配置：

{
  "scripts": {
    ...其他配置...
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
    "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
  }
  
  format命令：执行prettier校验并修正错误
  lint:eslint: eslint 校验src文件下的ts\vue文件并修正错误
  lint:style: stylelint 校验src文件下的css\scss\vue文件并修正错误

4、校验

下面这段css代码，两个大括号前都没有空格。违反了规则。

<style scoped>
.box{
  width: 600px;
  height: 400px;
  background-color: black;
  h1{
    color: white;
  }
}
</style>

执行命令pnpm run format后，错误代码处被修正。

四、安装Husky

在上面我们已经集成好了代码校验工具，但是需要每次手动的去执行命令才会格式化代码。如果有人没有格式化就提交到了远程仓库中，那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。

要做到这件事情，需要利用husky在代码提交之前触发git hook(git在客户端的钩子)，然后执行pnpm run format来自动的格式化代码。

1、安装husky

pnpm add --save-dev husky

2、初始化husky

init命令简化了项目中的husky设置。它会在.husky/中创建pre-commit脚本，并更新package.json中的prepare脚本。随后可根据你的工作流进行修改。

pnpm exec husky init

3、配置pre-commit文件

pre-commit文件内容如下：

pnpm run format

4、自动校验

当我们对代码进行commit操作的时候，会执行命令，对代码进行格式化，然后再提交。

五、统一包管理器工具

团队开发项目的时候，需要统一包管理器工具，因为不同包管理器工具下载同一个依赖，可能版本不一样，导致项目出现bug问题。

如何强制使用pnpm包管理器工具呢？

  1. 在根目录创建scripts/preinstall.js文件，添加下面的内容：
if (!/pnpm/.test(process.env.npm_execpath || '')) {
  console.warn(
    `\u001b[33mThis repository must using pnpm as the package manager for scripts to work properly.\u001b[39m\n`)
  process.exit(1)
}
  1. 配置命令 在package.json文件中，配置命令preinstall。
"scripts": {
    "preinstall": "node ./scripts/preinstall.js"
  }

原理是：在install的时候，会触发preinstall（npm提供的生命周期钩子）这个文件里面的代码。

六、src别名的配置

在开发项目的时候，文件之间的关系可能很复杂。当存在大量文件时，文件的寻找路径会变的很复杂，可能出现“../../../compoents/project/”这种情况，写起来很麻烦。如果能够在文件寻找时都能从src/下开始找文件，这样就会简单很多。因此需要给src文件夹配置一个别名。

1. 在vite.config.ts文件中配置别名

// vite.config.ts

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      // 相对路径别名配置，使用@代替src
      '@': path.resolve('./src')
    }
  }
})

2. TypeScript编译配置

在tsconfig.app.json中配置别名

// tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": "./", //解析非相对模块的基地址，默认是当前目录
    "paths": {
      // 路径映射，相当于baseUrl
      "@/*": ["src/*"]
    }
  }
}

3. src别名的使用

image.png

文件结构如上图所示。

在App.vue文件中导入Test.vue文件时，import语句可以使用别名‘@’。

import Test from '@/components/Test.vue'

七、环境变量的配置

项目开发过程中，至少会经历开发环境、测试环境和生产环境三个阶段。不同阶段请求的状态（如接口地址等）不尽相同，若手动切换接口地址是相当繁琐且容易出错的。于是环境变量配置的需求便应运而生，我们只需做简单的配置，把环境切换的工作交给代码。

该VUE3项目使用Vite作为构建工具，支持通过环境变量配置项目，以便在不同的环境下使用不同的配置。

参考官网：cn.vitejs.dev/guide/env-a…

1、环境变量

Vite自动将环境变量暴露在import.meta.env下，作为字符串。

为了防止意外的将一些环境变量泄露到客户端，只有以VITE_ 为前缀的变量才会暴露给经过Vite处理的代码。

环境变量解析

VITE_SOME_KEY=123 VITE_BOOL_KEY = true

VITE_SOME_KEY是一个数字，在解析时会返回一个字符串。布尔类型的变量也会发生同样的情况。在代码使用时，请注意确保转换为所需的类型。

2、.env文件

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

.env                   # 所有情况下都会加载，优先级最低
.env.local             # 所有情况下都会加载，但会被 git 忽略，优先级第三
.env.[mode]            # 只在指定模式下加载，优先级第二
.env.[mode].local      # 只在指定模式下加载，但会被 git 忽略，优先级最高

3、配置环境变量

  1. 在项目根目录分别添加开发、生产和测试环境的文件。

.env.development

.env.test

.env.production

.env

  1. 文件内容如下：
// .env

VITE_APP_TITLE = '好物运营平台'

// .env.development

# 变量必须以VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_BASE_URL = '/dep-api'
VITE_SERVE = 'https://xxxxx.com'

// .env.test

# 变量必须以VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_BASE_URL = '/test-api'
VITE_SERVE = 'https://yyyyyy.com'

// .env.production

# 变量必须以VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'production'
VITE_APP_BASE_URL = '/pro-api'
VITE_SERVE = 'https://zzzz.com'

4、配置运行命令

在package.json文件中，在脚本中添加如下命令：

"scripts": {
   "build:test": "vue-tsc -b && vite build --mode test",
   "build:pro": "vue-tsc -b && vite build --mode production",
}

通过import.meta.env获取环境变量。

avatar
文章
阅读
粉丝