前端基础知识

前端基础知识

1.Node.js 安装配置

Node.js 安装配置 本章节我们将向大家介绍在 ** Windows、Linux 和 macOS** 上安装 Node.js 的方法。

Node.js 安装包及源码下载地址为：nodejs.org/en/download

官方网站提供两个版本：

LTS（Long Term Support）：长期支持版本，推荐用于生产环境 Current：当前最新版本，包含最新特性 建议选择 LTS 版本，因为它更稳定且有长期技术支持。 Node.js 历史版本下载地址：nodejs.org/dist/

1.1 Windows 上安装 Node.js

你可以采用以下两种方式来安装。

1.1.1 Windows安装包(.msi)

一路next,安装完成后，我们可以在命令行或 Windows Powershell 中执行以下命令来测试：

bash
 体验AI代码助手
 代码解读
复制代码
node -v
npm -v

1.1.2 Windows 二进制文件 (.exe)安装

点击 "Standalone Binary (.zip)" 选项下载二进制文件： 安装步骤

步骤 1 : 双击下载的安装包 Node.exe ，将出现如下界面 : 点击 Run（运行）按钮将出现命令行窗口：

安装完成后，我们可以在命令行或 Windows Powershell 中执行以下命令来测试：

node -v
npm -v

如果你获得以上输出结果，说明你已经成功安装了Node.js。

使用命令行安装 我们也可以在 PowerShell 执行以下命令来安装：

bash
 体验AI代码助手
 代码解读
复制代码
# 安装 fnm（快速 Node 管理器）
winget install Schniz.fnm

# 配置 fnm 环境，使其在每次目录变更时自动使用
fnm env --use-on-cd | Out-String | Invoke-Expression

# 下载并安装 Node.js 版本 22
fnm use --install-if-missing 22

# 验证环境中 Node.js 的版本是否正确，输出应为 `v22.11.0`
node -v # 应该输出 `v22.11.0`

# 验证环境中 npm 的版本是否正确，输出应为 `10.9.0`
npm -v # 应该输出 `10.9.0`

1.2 Linux 上安装 Node.js

1、使用官方提供的安装脚本

本例以 fnm 安装包管理器位说明（也可以使用 nvm等），命令如下：

bash
 体验AI代码助手
 代码解读
复制代码
# 安装 fnm（快速 Node 管理器）
curl -fsSL https://fnm.vercel.app/install | bash

# 激活 fnm
source ~/.bashrc

# 下载并安装 Node.js
fnm use --install-if-missing 22

# 验证环境中的 Node.js 版本是否正确
node -v # 应该输出 `v22.11.0`

# 验证环境中的 npm 版本是否正确
npm -v # 应该输出 `10.9.0`

2、直接使用已编译好的包 点击 "Prebuilt Binaries" 选项下载二进制文件：

Node 官网已经把 linux 下载版本更改为已编译好的版本了，我们可以直接下载解压后使用：

c
 体验AI代码助手
 代码解读
复制代码
# wget https://nodejs.org/dist/v22.11.0/node-v22.11.0-linux-arm64.tar.xz    // 下载
# tar xf  node-v22.11.0-linux-arm64.tar.xz       // 解压
# cd node-v22.11.0-linux-arm64/                  // 进入解压目录
# ./bin/node -v                                  // 执行node命令 查看版本

解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接：

bash
 体验AI代码助手
 代码解读
复制代码
ln -s /usr/software/nodejs/bin/npm   /usr/local/bin/ 
ln -s /usr/software/nodejs/bin/node   /usr/local/bin/

3、源码安装 Node.js 以下部分我们将介绍在 Ubuntu Linux 下使用源码安装 Node.js 。 其他的 Linux 系统，如 Centos 等类似如下安装步骤。

在 Github 上获取 Node.js 源码：

bash
 体验AI代码助手
 代码解读
复制代码

$ sudo git clone https://github.com/nodejs/node.git
Cloning into 'node'...

修改目录权限：

bash
 体验AI代码助手
 代码解读
复制代码
$ sudo chmod -R 755 node

使用 ./configure 创建编译文件，并按照：

bash
 体验AI代码助手
 代码解读
复制代码
$ cd node
$ sudo ./configure
$ sudo make
$ sudo make install

查看 node 版本：

bash
 体验AI代码助手
 代码解读
复制代码
$ node --version
v0.10.25

1.3 Mac OS 上安装

1、使用官方提供的安装脚本 本例以 nvm 安装包管理器位说明（也可以使用 fnm 等），命令如下：

bash
 体验AI代码助手
 代码解读
复制代码
# Download and install Homebrew
curl -o- https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash

# Download and install Node.js:
brew install node@20

# Verify the Node.js version:
node -v # Should print "v20.19.4".

# Verify npm version:
npm -v # Should print "10.8.2".

2、使用预编译等安装工具 下载的 .pkg 文件，双击 .pkg 文件以启动安装向导。

3、直接使用已编译好的包 下载后，解压下载包，进入压缩包的 bin 目录，就可以看到已经编译好的 node 和 npm 了，可以直接在命令使用。

1.4 nvm 安装

NVM 是 Node.js 版本管理器，它允许你安装多个版本的 Node.js 并在需要的时候切换版本。

!!! 如果你的电脑已经安装了 node，那么在安装 nvm 之前要先卸载掉，避免后面产生不必要的冲突

1.4.1 Mac 卸载 Node.js 和 nvm

• Mac 卸载：

  ini
   体验AI代码助手
   代码解读
  复制代码
  # 删除全局 node_modules 目录
  sudo rm -rf /usr/local/lib/node_modules
  # 删除 node
  sudo rm /usr/local/bin/node 
  # 删除全局 node 模块注册的软链
  cd /usr/local/bin && ls -l | grep "../lib/node_modules/" | awk '{print $9}'| xargs rm
  

• Mac 安装 nvm：

sh
 体验AI代码助手
 代码解读
复制代码
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

或者

sh
 体验AI代码助手
 代码解读
复制代码
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

• 安装完成后，在命令行窗口输入 nvm 回车，安装成功会出现满满一页的各种信息，如果只有 nvm: command not found，就说明没安装成功
• 没安装成功的话，执行 echo $0 命令，看下当前的 shell 是 bash 还是 zsh 如果是 bash 安装失败基本是没有 .bash_profile 这个文件，可以使用 open .bash_profile 命令打开这个文件试下，打不开就说明没有，那么执行下面命令创建一个，再重新执行上面的安装命令即可

sh
 体验AI代码助手
 代码解读
复制代码
# 创建 .bash_profile 文件
touch ~/.bash_profile

如果是 zsh，那就打开 open .zshrc 文件，在里面添加一行 source ~/.bash_profile，如果打不开这个文件，就先创建一个，再添加，再重新执行上面的安装命令即可

sh
 体验AI代码助手
 代码解读
复制代码
# 创建 .zshrc 文件
touch ~/.zshrc
# 创建完成，再打开，在里面添加这个
source ~/.bash_profile

1.4.2 Window 卸载 Node.js 和 nvm

nvm 下载地址：github.com/coreybutler…

1.4.3 nvm 常用命令

操作类型	命令	示例	备注
安装Node版本	nvm install 版本号	nvm install 20	安装指定版本（如20.x.x）
安装Node版本	nvm install --lts	nvm install --lts	安装最新长期支持版本
查看版本	nvm ls	nvm ls	列出本地已安装版本
查看远程版本	nvm ls-remote	nvm ls-remote	列出远程可用版本
切换版本	nvm use 版本号	nvm use 18.19.1	切换到指定版本
切换到最新LTS版	nvm use --lts	nvm use --lts	切换到最新LTS版本
设置默认版本	nvm alias default 版本号	nvm alias default 20	设置默认Node版本
卸载版本	nvm uninstall 版本号	nvm uninstall 16.20.2	删除指定版本
当前版本	nvm current	nvm current	显示当前使用的Node版本
执行命令	nvm exec 版本号 命令	nvm exec 18 node app.js	用指定版本执行Node.js
重新加载nvm	nvm rebind	nvm rebind	修复nvm命令绑定（如升级后）

⚠️ 注意事项：

1. 安装前需卸载已有的Node.js
2. Windows用户需使用nvm-windows
3. 版本号支持别名：node（最新）/lts（最新LTS）
4. 多用户环境需使用nvm use --silent避免提示

2.包和npm

2.1 包的介绍

• 可以理解为是插件或模块，这种模块都是个人或公司开发的，被称为第三方模块。
• 个人或公司开发完模块，然后发布到npm网站，我们可以下载并使用这些第三方模块。

2.2 包的分类

特性	dependencies	devDependencies	全局包
安装位置	node_modules/	node_modules/	系统路径（如/usr/local/bin）
是否打包	✅ 是	❌ 否	❌ 否
安装命令	npm install 包名	npm install 包名 --save-dev	npm install -g 包名
典型场景	项目功能实现	开发工具链	系统级工具
版本控制	严格版本控制	开发环境可放宽版本	无版本控制
是否需要提交Git	✅ 是	✅ 是（需版本锁定）	❌ 否
用途示例	express, axios	eslint, jest	nodemon, typescript

2.3 npm的介绍

通俗的讲，npm是一个下载、卸载、发布、… 包的工具 npm是nodejs内置的工具，node存在的话则无需下载

npm 版本查看命令：npm -v

操作	npm	yarn	pnpm
初始化项目 (创建package.json文件)	npm init / npm init -y	yarn init / yarn init -y	pnpm init
安装生产依赖 (添加到dependencies)	npm i 包名	yarn add 包名	pnpm add 包名
安装指定版本依赖 (精确控制依赖版本)	npm i 包名@版本号	yarn add 包名@版本号	pnpm add 包名@版本号
安装开发依赖 (添加到devDependencies)	npm i 包名 -D	yarn add 包名 -D	pnpm add 包名 -D
安装所有依赖 (根据package.json安装)	npm i	yarn install / yarn	pnpm install / pnpm i
移除项目依赖 (从项目中删除包)	npm un 包名	yarn remove 包名	pnpm remove 包名
安装全局包 (系统级安装命令行工具)	npm i 包名 -g	yarn global add 包名	pnpm global add 包名
移除全局包 (卸载系统级工具)	npm un 包名 -g	yarn global remove 包名	pnpm global remove 包名

2.4 npm命令

2.4.1 初始化

csharp
 体验AI代码助手
 代码解读
复制代码
npm init -y
# 或
npm init
# 然后一路回车

2.4.2 安装及卸载命令

安装命令

bash
 体验AI代码助手
 代码解读
复制代码
建议在安装第三方模块之前，先执行如下命令。
下面的命令只需要执行一次即可（不管以后重启vscode还是重启电脑，都不需要执行第二次）
此命令会将下载地址修改为国内下载，加快下载速度
npm config set registry https://registry.npmmirror.com

# 正常的下载安装 【默认安装最新版本】
npm install 模块名

# 简写install为i 【默认安装最新版本】
npm i 模块名

# 一次性安装多个模块 【默认安装最新版本】
npm i 模块名 模块名 模块名

# 指定版本安装
npm i 模块名@版本号

# 安装项目真正所需的包
npm i 包名 --save   【老版本的node才需要加 --save，加它的目的是把记录添加到 package.json】
npm i 包名 -S       【--save 简写为 -S】

# 安装开发阶段用的包【包只在开发阶段有用；项目做完，这个包就没用了】
npm i 包名 --save-dev  【--save-dev 表示这个包只在开发阶段使用】
npm i 包名 -D          【--save-dev 简写为 -D】

# 一次性安装全部的依赖包
npm i

卸载命令

bash
 体验AI代码助手
 代码解读
复制代码
npm uninstall 模块名
npm un 模块名
npm un 模块名 模块名 模块名

2.6 package.json文件

2.6.1 创建 package.json

在包管理器（npm、yarn、pnpm）初始化之后，会生成一个 package.json 文件

bash
 体验AI代码助手
 代码解读
复制代码
npm init -y
# 或
npm init

2.6.2 解读 package.json

json
 体验AI代码助手
 代码解读
复制代码
{
  // 1. 基础配置
  "name": "my-project",          // 项目名称（必填，全小写+连字符）
  "version": "1.0.0",            // 项目版本号（遵循语义化版本规范）
  "description": "A demo project", // 项目描述（会发布到npm）
  "private": true,               // 设为true防止意外发布到npm
  "license": "MIT",              // 开源许可证类型（MIT/ISC/Apache-2.0等）

  // 2. 项目入口文件配置
  "main": "dist/index.js",       // 项目主入口文件（CommonJS模块）
  "module": "src/index.js",      // ES模块入口（现代打包工具优先使用）
  "types": "dist/index.d.ts",    // TypeScript类型声明文件路径
  "exports": {                   // 条件导出（Node 12+）
    ".": {
      "import": "./src/index.js", // ES模块导入时使用
      "require": "./dist/index.js" // CommonJS导入时使用
    }
  },

  // 3. 脚本命令（npm run <script>）
  "scripts": {
    "dev": "vite",               // 启动开发服务器
    "build": "vite build",       // 生产环境构建
    "preview": "vite preview",   // 预览生产构建
    "test": "jest",              // 运行测试
    "lint": "eslint .",          // 代码检查
    "prepare": "husky install"   // npm install时自动执行的钩子
  },

  // 4. 生产环境依赖（会被打包到最终产物中）
  "dependencies": {
    "react": "^18.2.0",          // 主依赖（^表示允许小版本升级）
    "react-dom": "~18.2.0",      // ~表示只允许补丁版本升级
    "lodash": "4.17.21"          // 固定版本（不自动升级）
  },

  // 5. 开发环境依赖（不会打包到最终产物）
  "devDependencies": {
    "vite": "^4.0.0",            // 构建工具
    "eslint": "^8.0.0",          // 代码检查
    "typescript": "5.0.0"        // 类型检查
  },

  // 6. 依赖版本管理配置
  "engines": {
    "node": ">=16.0.0",          // 指定Node.js版本要求
    "npm": ">=8.0.0"             // 指定npm版本要求
  },

  // 7. 浏览器兼容性配置
  "browserslist": [
    ">0.2%",                    // 全球使用率>0.2%的浏览器
    "not dead",                 // 排除已停止维护的浏览器
    "not ie 11"                 // 排除IE11
  ],

  // 8. 项目文件配置
  "files": [                    // 发布到npm时包含的文件
    "dist",
    "src",
    "README.md"
  ],

  // 9. 仓库信息
  "repository": {
    "type": "git",
    "url": "https://github.com/user/repo.git"
  },

  // 10. 关键词（npm搜索用）
  "keywords": [
    "javascript",
    "react"
  ],

  // 11. 作者信息
  "author": "Your Name <email@example.com>",
  "contributors": [
    "Contributor 1 <c1@example.com>"
  ],

  // 12. 自定义配置（工具专用）
  "eslintConfig": {
    "extends": "eslint:recommended"
  },
  "jest": {
    "testEnvironment": "jsdom"
  }
}

2.6.3 package.json中scripts

它允许开发者定义一系列可执行的命令脚本，用于项目的开发、构建、测试等流程

json
 体验AI代码助手
 代码解读
复制代码
"scripts": {
  "dev": "vue-cli-service serve",       // 启动开发服务器
  "build": "vue-cli-service build",     // 生产环境构建
  "build:staging": "vue-cli-service build --mode staging", // 预发环境构建
  "lint": "vue-cli-service lint",       // ESLint 代码检查
  "analyze": "vue-cli-service build --report" // 分析包体积
}

• 启动本地服务：npm run dev
• 生产环境构建：npm run build
• ESLint 代码检查：npm run lint

3.目录结构

下边以 vue2 的网关项目为例

bash
 体验AI代码助手
 代码解读
复制代码
根目录/
├── build/                     # 打包配置文件
├── dist/                      # 打包文件
├── mock/                      # mock假数据
├── node_modules/              # 提供给整个工作区的npm包
├── public/                    # 公共文件
│   ├── favicon.ico            # 网页ico
│   └── index.html             # 入口文件
├── src/                       # 工作区目录
│   ├── api/                   # API
│   ├── assets/                # 静态文件-图片
│   ├── components/            # 组件库
│   │   ├── BackToTop/         # 返回顶部组件
│   │   ├── Charts/            # ECharts组件
│   │   ├── el-drag-dialog/    # 表格偏移指令组件
│   │   ├── permission/        # 权限指令组件
│   │   ├── waves/             # 按钮样式特效组件
│   │   └── ReasonDialog/      # 描述dialog弹窗组件
│   ├── directive/             # 常用指令
│   │   ├── clipboard/         # copy指令
│   │   ├── el-drag-dialog/    # 拖拉弹窗指令
│   │   ├── permission/        # 权限指令
│   │   ├── waves/             # 按钮样式特效指令
│   │   └── throttle/          # 节流指令
│   ├── filters/               # 常用过滤器
│   ├── icons/                 # 图标文件
│   ├── layout/                # 布局组件
│   ├── router/                # 路由配置
│   ├── store/                 # Vuex状态管理
│   ├── styles/                # 样式文件
│   │   ├── btn.scss           # 按钮样式
│   │   ├── element-ui.scss    # 全局自定义element-ui样式
│   │   ├── index.scss         # 全局通用样式
│   │   ├── mixin.scss         # 全局mixin
│   │   ├── sidebar.scss       # sidebar样式
│   │   ├── transition.scss    # vue transition动画
│   │   └── variables.scss     # 全局变量
│   ├── utils/                 # 工具函数
│   │   ├── auth.js            # 权限-token相关操作
│   │   ├── clipboard.js       # copy插件
│   │   ├── get-page-title.js  # 获取页面标题
│   │   ├── index.js           # 时间处理方法
│   │   ├── validate.js        # 校验处理方法
│   │   ├── request.js         # 封装axios请求
│   │   └── permission.js      # 权限判断
│   ├── views/                 # 页面组件
│   │   ├── charts/            # Echarts图表页
│   │   ├── dashboard/         # 首页
│   │   ├── error-page/        # 错误页面(401/404)
│   │   ├── excel/             # excel导出demo
│   │   ├── redirect/          # 重定向页
│   │   ├── service/           # API告警页
│   │   └── workorder/         # 服务申请页
│   ├── App.vue                # 主应用组件
│   ├── main.js                # 应用入口文件
│   └── settings.js            # 全局配置文件
├── .editorconfig              # 代码编辑器配置
├── .env.development           # 开发环境配置
├── .env.production            # 生产环境配置
├── .env.staging               # 预发环境配置
├── .eslintignore              # eslint忽略配置
├── .gitignore                 # git忽略配置
├── vue.config.js              # Vue CLI配置
├── package.json               # 项目依赖配置
└── package-lock.json          # 依赖版本锁定文件

3.1 vue.config.js 配置说明

vue.config.js是Vue CLI的配置文件，用于对项目进行 various配置，如：打包路径、代理、别名、loader、plugin等。

js
 体验AI代码助手
 代码解读
复制代码
// vue.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 基础配置
  // ==============================
  // 项目部署目录
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/your-project-name/'  // 生产环境路径
    : '/',                    // 开发环境路径

  // 打包输出目录
  outputDir: 'dist', 

  // 放置静态资源的目录
  assetsDir: 'static', 

  // 是否在开发环境下启用 eslint
  lintOnSave: process.env.NODE_ENV !== 'production', 

  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false, 

  // 配置 webpack-dev-server 行为
  devServer: {
    host: '0.0.0.0',       // 允许外部访问
    port: 8080,            // 端口号
    open: true,            // 自动打开浏览器
    overlay: {             // 编译错误显示
      warnings: false,
      errors: true
    },
    // 代理配置（解决跨域）
    proxy: {
      '/api': {
        target: 'http://dev-api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

  // webpack 配置扩展
  // ==============================
  configureWebpack: {
    // 别名配置
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        'assets': path.resolve(__dirname, 'src/assets'),
        'components': path.resolve(__dirname, 'src/components')
      },
      // 扩展名自动解析
      extensions: ['.js', '.vue', '.json', '.scss']
    },

    // 模块规则
    module: {
      rules: [
        // 处理 SCSS 文件
        {
          test: /.scss$/,
          use: [
            process.env.NODE_ENV !== 'production' 
              ? 'vue-style-loader' 
              : MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]
        },
        // 处理 SVG 图标
        {
          test: /.svg$/,
          loader: 'svg-sprite-loader',
          options: {
            symbolId: 'icon-[name]'
          }
        }
      ]
    },

    // 插件配置
    plugins: [
      // Vue Loader 插件
      new VueLoaderPlugin(),

      // 定义环境变量
      new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: false
      }),

      // HTML 模板生成
      new HtmlWebpackPlugin({
        template: 'public/index.html',
        filename: 'index.html',
        inject: true
      })
    ]
  },

  // CSS 配置
  // ==============================
  css: {
    // 将 CSS 提取为独立文件（生产环境）
    extract: process.env.NODE_ENV === 'production',

    // 是否启用 CSS source map
    sourceMap: false,

    // CSS Modules 配置
    modules: {
      localIdentName: '[name]_[local]_[hash:base64:5]'
    }
  },

  // Babel 配置
  // ==============================
  transpileDependencies: [
    // 需要转译的第三方依赖
    'element-ui',
    'some-es6-library'
  ],

  // 插件配置
  // ==============================
  pluginOptions: {
    // Babel 多语言支持
    i18n: {
      locale: 'zh',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableLegacy: true,       // 启用 Vue 2 兼容模式
      runtimeOnly: false
    }
  }
};
### 3.2 .editorconfig配置

> editorconfig配置是一个用于统一代码风格的配置文件，它可以帮助开发团队在不同编辑器和 IDE 中保持一致的编码风格

-   跨编辑器统一风格：解决不同开发者使用不同编辑器（VSCode/Sublime/IntelliJ 等）导致的风格差异
-   减少代码冲突：统一换行符、缩进等基础格式，降低 Git 合并冲突概率
-   零依赖：无需安装插件即可被主流编辑器原生支持（部分编辑器需插件）

使用方法 **1.创建文件**

-   在项目根目录新建 `.editorconfig` 文件

**2.编辑器支持**

-   VSCode：需安装 `EditorConfig for VS Code` 插件
-   IntelliJ：2017+ 版本已内置支持
-   其他编辑器：参考 `editorconfig.org` **3.优先级规则**
-   就近原则：子目录的配置会覆盖父目录配置
-   文件类型匹配：[ *.vue] 的规则会覆盖 [* ] 的通用规则

**典型配置示例**

ini 体验AI代码助手 代码解读 复制代码

editorconfig.org

顶层配置文件声明

root = true

通用规则（适用于所有文件）

[*] charset = utf-8 # 文件编码 end_of_line = lf # 换行符类型（lf/unix | crlf/windows） indent_style = space # 缩进方式（space/tab） indent_size = 2 # 缩进空格数 trim_trailing_whitespace = true # 自动删除行尾空格 insert_final_newline = true # 文件末尾自动加空行

针对特定文件类型的规则

[*.{js,vue,ts}] indent_size = 2 # JS/Vue/TS 文件用2空格缩进

[*.html] indent_size = 4 # HTML 文件用4空格缩进

[*.md] trim_trailing_whitespace = false # Markdown 文件保留行尾空格（某些MD语法需要）

### 3.3 .eslintrc.js配置

> `eslintrc.js`是 ESLint 的配置文件，用于定义 JavaScript/TypeScript 代码的质量检查规则

-   代码规范检查：自动检测代码中的潜在错误和风格问题
-   团队统一风格：强制团队使用统一的编码规范
-   自动修复：部分规则可自动修复（如缩进/引号）
-   集成支持：与 VSCode、WebStorm 等编辑器深度集成

**基础配置示例**

js 体验AI代码助手 代码解读 复制代码 // .eslintrc.js /**

• ESLint 配置文件
• 该配置用于 Vue.js 项目的代码规范检查
• 基于 eslint:recommended 和 plugin:vue/recommended 规则集扩展 */ module.exports = { // 指定 ESLint 的根目录（配置文件所在目录） root: true,

// 解析器配置 parserOptions: { // 使用 babel-eslint 解析器 parser: 'babel-eslint', // 使用 ECMAScript 模块 sourceType: 'module' },

// 指定代码运行环境 env: { browser: true, // 浏览器全局变量 node: true, // Node.js 全局变量 es6: true // 启用 ES6 语法支持 },

// 扩展的规则集 extends: [ 'plugin:vue/recommended', // Vue.js 官方推荐规则 'eslint:recommended' // ESLint 推荐规则 ],

// 自定义规则配置 rules: { /* Vue.js 相关规则 */ // 每行最多属性数量限制 "vue/max-attributes-per-line": [2, { "singleline": 10, // 单行元素最多10个属性 "multiline": { // 多行元素 "max": 1, // 每行最多1个属性 "allowFirstLine": false // 不允许属性与标签名同行 } }], // 关闭单行HTML元素内容换行检查 "vue/singleline-html-element-content-newline": "off", // 关闭多行HTML元素内容换行检查 "vue/multiline-html-element-content-newline":"off", // 组件名称必须使用PascalCase命名 "vue/name-property-casing": ["error", "PascalCase"], // 允许使用v-html指令 "vue/no-v-html": "off",

/* JavaScript 基本规则 */
// 强制 getter/setter 成对出现
'accessor-pairs': 2,
// 箭头函数箭头前后必须有空格
'arrow-spacing': [2, { 'before': true, 'after': true }],
// 代码块花括号内必须有空格
'block-spacing': [2, 'always'],
// 强制使用一致的括号风格
'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
// 不强制驼峰命名
'camelcase': [0, { 'properties': 'always' }],
// 禁止使用拖尾逗号
'comma-dangle': [2, 'never'],
// 逗号后必须有空格，前不能有空格
'comma-spacing': [2, { 'before': false, 'after': true }],
// 逗号必须放在行尾
'comma-style': [2, 'last'],
// 派生类构造函数必须调用super()
'constructor-super': 2,
// 强制多行代码使用花括号
'curly': [2, 'multi-line'],
// 点操作符必须与属性在同一行
'dot-location': [2, 'property'],
// 文件末尾必须有空行
'eol-last': 2,
// 必须使用 === 和 !==
'eqeqeq': ["error", "always", {"null": "ignore"}],
// generator 函数星号前后必须有空格
'generator-star-spacing': [2, { 'before': true, 'after': true }],
// 回调函数必须处理错误
'handle-callback-err': [2, '^(err|error)$'],
// 使用2个空格缩进
'indent': [2, 2, { 'SwitchCase': 1 }],
// JSX属性必须使用单引号
'jsx-quotes': [2, 'prefer-single'],
// 对象字面量键值对冒号后必须有空格，前不能有空格
'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
// 关键字前后必须有空格
'keyword-spacing': [2, { 'before': true, 'after': true }],
// 构造函数名必须大写字母开头
'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
// new操作符后必须有括号
'new-parens': 2,
// 禁止使用Array构造函数
'no-array-constructor': 2,
// 禁止使用arguments.caller或arguments.callee
'no-caller': 2,
// 允许使用console
'no-console': 'off',
// 禁止修改类声明的变量
'no-class-assign': 2,
// 禁止在条件语句中使用赋值语句
'no-cond-assign': 2,
// 禁止修改const声明的变量
'no-const-assign': 2,
// 允许在正则表达式中使用控制字符
'no-control-regex': 0,
// 禁止删除变量
'no-delete-var': 2,
// 禁止函数参数重复
'no-dupe-args': 2,
// 禁止类成员重复
'no-dupe-class-members': 2,
// 禁止对象字面量键重复
'no-dupe-keys': 2,
// 禁止case语句重复
'no-duplicate-case': 2,
// 禁止正则表达式使用空字符集
'no-empty-character-class': 2,
// 禁止使用空解构模式
'no-empty-pattern': 2,
// 禁止使用eval
'no-eval': 2,
// 禁止对catch子句的参数重新赋值
'no-ex-assign': 2,
// 禁止扩展原生对象
'no-extend-native': 2,
// 禁止不必要的函数绑定
'no-extra-bind': 2,
// 禁止不必要的布尔转换
'no-extra-boolean-cast': 2,
// 禁止不必要的括号（仅针对函数）
'no-extra-parens': [2, 'functions'],
// 禁止case语句贯穿
'no-fallthrough': 2,
// 禁止浮点小数
'no-floating-decimal': 2,
// 禁止函数重载
'no-func-assign': 2,
// 禁止隐式eval
'no-implied-eval': 2,
// 禁止在嵌套块中声明函数
'no-inner-declarations': [2, 'functions'],
// 禁止无效的正则表达式
'no-invalid-regexp': 2,
// 禁止不规则的空白
'no-irregular-whitespace': 2,
// 禁止使用__iterator__属性
'no-iterator': 2,
// 禁止标签与变量同名
'no-label-var': 2,
// 禁止使用标签语句
'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }],
// 禁止不必要的嵌套块
'no-lone-blocks': 2,
// 禁止混用空格和制表符
'no-mixed-spaces-and-tabs': 2,
// 禁止使用多个空格
'no-multi-spaces': 2,
// 禁止多行字符串
'no-multi-str': 2,
// 禁止多行空行（最多1行）
'no-multiple-empty-lines': [2, { 'max': 1 }],
// 禁止修改原生对象
'no-native-reassign': 2,
// 禁止在in操作符左边使用否定
'no-negated-in-lhs': 2,
// 禁止使用Object构造函数
'no-new-object': 2,
// 禁止使用require创建新实例
'no-new-require': 2,
// 禁止使用Symbol构造函数
'no-new-symbol': 2,
// 禁止使用原始包装器
'no-new-wrappers': 2,
// 禁止将全局对象作为函数调用
'no-obj-calls': 2,
// 禁止使用八进制字面量
'no-octal': 2,
// 禁止使用八进制转义序列
'no-octal-escape': 2,
// 禁止使用__dirname和__filename进行路径拼接
'no-path-concat': 2,
// 禁止使用__proto__属性
'no-proto': 2,
// 禁止重复声明变量
'no-redeclare': 2,
// 禁止正则表达式字面量中出现多个空格
'no-regex-spaces': 2,
// 禁止在return语句中使用赋值语句（除非用括号括起来）
'no-return-assign': [2, 'except-parens'],
// 禁止自我赋值
'no-self-assign': 2,
// 禁止自我比较
'no-self-compare': 2,
// 禁止使用逗号操作符
'no-sequences': 2,
// 禁止使用保留字作为变量名
'no-shadow-restricted-names': 2,
// 禁止函数名和括号之间有空格
'no-spaced-func': 2,
// 禁止稀疏数组
'no-sparse-arrays': 2,
// 在调用super()之前禁止使用this
'no-this-before-super': 2,
// 禁止抛出字面量
'no-throw-literal': 2,
// 禁止行尾空格
'no-trailing-spaces': 2,
// 禁止未声明的变量
'no-undef': 2,
// 禁止将变量初始化为undefined
'no-undef-init': 2,
// 禁止意外的多行表达式
'no-unexpected-multiline': 2,
// 禁止循环条件不变
'no-unmodified-loop-condition': 2,
// 禁止不必要的三元表达式
'no-unneeded-ternary': [2, { 'defaultAssignment': false }],
// 禁止不可达代码
'no-unreachable': 2,
// 禁止在finally块中使用return/throw/break/continue
'no-unsafe-finally': 2,
// 禁止未使用的变量（参数除外）
'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }],
// 禁止不必要的.call()和.apply()
'no-useless-call': 2,
// 禁止不必要的计算属性
'no-useless-computed-key': 2,
// 禁止不必要的构造函数
'no-useless-constructor': 2,
// 允许不必要的转义字符
'no-useless-escape': 0,
// 禁止属性前有空格
'no-whitespace-before-property': 2,
// 禁止使用with语句
'no-with': 2,
// 强制变量声明方式（初始化过的变量必须单独声明）
'one-var': [2, { 'initialized': 'never' }],
// 操作符换行规则
'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
// 禁止块内填充
'padded-blocks': [2, 'never'],
// 强制使用单引号（允许模板字符串和避免转义）
'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
// 禁止使用分号
'semi': [2, 'never'],
// 分号前后空格规则
'semi-spacing': [2, { 'before': false, 'after': true }],
// 块前必须有空格
'space-before-blocks': [2, 'always'],
// 函数名后不能有空格
'space-before-function-paren': [2, 'never'],
// 括号内不能有空格
'space-in-parens': [2, 'never'],
// 中缀操作符周围必须有空格
'space-infix-ops': 2,
// 一元操作符空格规则
'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
// 注释必须有空格
'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }],
// 模板字符串内不能有空格
'template-curly-spacing': [2, 'never'],
// 必须使用isNaN()检查NaN
'use-isnan': 2,
// typeof必须与有效字符串比较
'valid-typeof': 2,
// 立即执行函数表达式必须用括号包裹
'wrap-iife': [2, 'any'],
// yield*表达式星号前后必须有空格
'yield-star-spacing': [2, 'both'],
// 禁止Yoda条件
'yoda': [2, 'never'],
// 建议使用const声明不会被修改的变量
'prefer-const': 2,
// 生产环境禁止使用debugger
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// 对象字面量花括号内必须有空格
'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
// 数组括号内不能有空格
'array-bracket-spacing': [2, 'never']

} }

### 3.4 babel.config.js

> babel.config.js 是 Babel 的核心配置文件，用于定义 JavaScript 代码的编译规则。以下是详细说明：

-   语法转换：将 ES6+/TypeScript/JSX 等新特性转换为向后兼容的 ES5 代码
-   polyfill 注入：自动添加缺失的 API（如 Promise/Array.from）
-   代码优化：删除冗余代码、压缩体积（需配合插件）
-   插件化扩展：支持自定义转换逻辑（如 React JSX 转换）

**基础配置示例**

js 体验AI代码助手 代码解读 复制代码 // babel.config.js module.exports = { // 1. 基础配置 presets: [ ['@babel/preset-env', { targets: { // 目标环境 chrome: '60', firefox: '60', ie: '11' }, useBuiltIns: 'usage', // 按需添加 polyfill corejs: 3, // 使用 corejs@3 作为 polyfill modules: 'commonjs' // 将 ES Modules 转换为 CommonJS }], '@babel/preset-react' // 支持 React JSX ],

// 2. 插件配置 plugins: [ '@babel/plugin-transform-runtime', // 避免重复代码 '@babel/plugin-proposal-class-properties' // 支持类属性 ],

// 3. 文件过滤 ignore: [ 'node_modules/', 'dist/' ] };

| 配置项         | 说明       | 常用值                                     |
| ----------- | -------- | --------------------------------------- |
| presets     | 预设规则集    | @babel/preset-env/@babel/preset-react   |
| plugins     | 自定义插件    | @babel/plugin-transform-arrow-functions |
| targets     | 目标环境     | { chrome: '60' }/{ esmodules: true }    |
| useBuiltIns | polyfill | 方式 'usage'（按需）/'entry'（手动引入）            |
| corejs      | polyfill | 实现 2（旧版）/3（推荐）                          |
| modules     | 模块化标准    | 'commonjs'/'umd'/'systemjs'             |
| ignore/only | 文件过滤     | ['node_modules/**']                     |

**.eslintignore** 忽略文件

ini 体验AI代码助手 代码解读 复制代码 build/*.js src/assets public dist

### 3.5 .env

> .env 文件用于在 Vue 项目中定义环境变量，这些变量可以通过 process.env 在代码中访问，常用于配置不同环境下的参数（如 API 地址、端口等）

-   存储环境变量：将配置参数（如 API 地址、端口、密钥等）集中管理，避免硬编码。
-   区分环境：通过不同环境文件（如 .env.development、.env.production）动态加载对应变量。
-   安全性：敏感信息（如密钥）可通过 .env.local 文件存储，避免提交到 Git。

**使用方法**

项目根目录创建 .env 文件（与 vue.config.js 同级）

| 版本   | 前缀要求                      | 示例                                       |
| ---- | ------------------------- | ---------------------------------------- |
| Vue2 | 必须以 VUE_APP_ 开头           | `VUE_APP_API_URL=http://api.example.com` |
| Vue3 | 若使用 Vite 构建工具，需以 VITE_ 开头 | `VITE_API_URL=http://api.example.com`    |

> 原因：Vue2 基于 Webpack，通过 process.env 读取变量，且 Webpack 默认只暴露 VUE_APP_ 开头的变量；Vue3 若使用 Vite，则通过 import.meta.env 读取，且默认识别 VITE_ 前缀。

**访问方式**

| 版本   | 读取方式                     | 示例                                                                           |
| ---- | ------------------------ | ---------------------------------------------------------------------------- |
| Vue2 | process.env.VUE_APP_变量名  | 需通过 process.env 对象访问`const api = process.env.VUE_APP_BASE_API`               |
| Vue3 | import.meta.env.VITE_变量名 | Vite 提供的 import.meta.env 对象直接读取 `const api = import.meta.env.VITE_BASE_API;` |

**假设项目结构如下：**

bash 体验AI代码助手 代码解读 复制代码 .env # 全局默认 .env.local # 全局本地（敏感信息） .env.development # 开发环境 .env.production # 生产环境

运行 npm run serve 时，加载顺序为：

bash 体验AI代码助手 代码解读 复制代码 .env .env.local（覆盖 .env） .env.development（覆盖前两者）

**运行时加载**

-   开发环境：npm run serve 会自动加载 `.env.development`
-   生产环境：npm run build 会加载 `.env.production`
-   测试环境：npm run test 会加载 `.env.test`

**不同 .env 文件的区别**

| 文件名                    | 用途           | 加载时机                              | 优先级 |
| ---------------------- | ------------ | --------------------------------- | --- |
| .env                   | 全局默认配置       | 所有环境                              | 最低  |
| .env.local             | 全局本地覆盖（敏感信息） | 所有环境，覆盖 .env                      | 较高  |
| .env.development       | 开发环境配置       | npm run serve                     | 中等  |
| .env.development.local | 开发环境本地覆盖     | npm run serve，覆盖 .env.development | 最高  |
| .env.production        | 生产环境配置       | npm run build                     | 中等  |
| .env.production.local  | 生产环境本地覆盖     | npm run build，覆盖 .env.production  | 最高  |
| .env.test              | 测试环境配置       | npm run test                      | 中等  |
| .env.test.local        | 测试环境本地覆盖     | npm run test，覆盖 .env.test         | 最高  |

## VSCode插件🔥

-   Chinese (Simplified) (简体中文)

> 将VS Code界面转换为简体中文版本 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DMS-CEINTL.vscode-language-pack-zh-hans "https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans")

-   EditorConfig for vs code

> 用于管理.editorconfig文件 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DEditorConfig.EditorConfig "https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig")

-   Vetur

> 提供Vue语法高亮、代码片段、Emmet和错误检查等功能 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Doctref.vetur "https://marketplace.visualstudio.com/items?itemName=octref.vetur")

-   Vue VSCode Snippets

> 快速生成Vue组件模板和常用代码片段 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dsdras.vue-vscode-snippets "https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets")

-   Bookmarks

> 在代码中创建书签标记，实现快速导航和位置标记 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dalefragnani.Bookmarks "https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks")

-   Vue 3 Snippets

> 提供Vue 3语法自动补全和代码片段生成 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dhollowtree.vue-snippets "https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets")

-   Auto Close Tag

> 自动闭合HTML/XML标签，提高标签编写效率 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dformulahendry.auto-close-tag "https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag")

-   Auto Rename Tag

> 修改HTML/XML开始标签时自动同步更新结束标签 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dformulahendry.auto-rename-tag "https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag")

-   HTML CSS Support

> 在HTML文件中智能提示CSS类名和ID选择器 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Decmel.vscode-html-css "https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css")

-   Material Icon Theme

> 提供Material Design风格的文件图标主题 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DPKief.material-icon-theme "https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme")

-   Element UI Snippets

> 提供Element UI组件库的代码补全和片段生成 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DSS.element-ui-snippets "https://marketplace.visualstudio.com/items?itemName=SS.element-ui-snippets")

-   Path Intellisense

> 文件路径自动补全和智能提示 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dchristian-kohler.path-intellisense "https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense")

-   Live Server

> 启动本地开发服务器并实时刷新页面预览效果 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dritwickdey.LiveServer "https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer")

-   vscode-icons

> 为不同文件类型提供分类图标标识 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dvscode-icons-team.vscode-icons "https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons")

-   Vue Language Features (Volar)

> Vue 3专用语言支持插件，提供TypeScript级性能 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DVue.volar "https://marketplace.visualstudio.com/items?itemName=Vue.volar")

-   ESLint插件

> 在编辑器中集成ESLint，实时检查JavaScript代码质量和规范 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddbaeumer.vscode-eslint "https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint")

-   代码格式化插件

> 使用Prettier+Standard规范自动格式化代码风格 [marketplace.visualstudio.com/items?itemN…](https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dnumso.prettier-standard-vscode "https://marketplace.visualstudio.com/items?itemName=numso.prettier-standard-vscode")

## 常用谷歌浏览器扩展程序

-   FeHelper(前端助手)

    > JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装！

-   React Developer Tools

    > React调试工具

-   Redux DevTools

    > 用于调试应用程序的状态变化

-   Vue.js devtools

    > Vue调试工具