前端工程化教程 — 现代前端开发必备

编程教程 管理员 2026年06月23日 217 次阅读 1141 字 约 4 分钟
适用人群：前端开发者
学习时长：约2-3天
工具：Vite、Webpack、ESLint、Prettier
重要程度：★★★★☆（团队协作必备）

一、什么是前端工程化？

前端工程化是将软件工程的方法应用到前端开发，提高开发效率、代码质量和团队协作。

方面工具作用
构建Vite/Webpack打包、压缩、转译
代码规范ESLint检查代码错误
代码格式Prettier统一代码风格
版本控制Git代码管理
包管理npm/pnpm依赖管理
测试Jest/Vitest自动化测试
CI/CDGitHub Actions自动化部署

二、包管理器

2.1 npm

# 初始化项目
npm init -y

# 安装依赖
npm install axios          # 生产依赖
npm install -D vite        # 开发依赖

# 卸载依赖
npm uninstall axios

# 更新依赖
npm update

# 运行脚本
npm run dev
npm run build
npm run test

# 查看依赖
npm list
npm list --depth=0

2.2 pnpm（推荐）

# 安装pnpm
npm install -g pnpm

# 初始化
pnpm init

# 安装依赖
pnpm add axios
pnpm add -D vite

# 运行脚本
pnpm dev
pnpm build

# 优势：更快、更省空间、严格依赖管理

2.3 package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.ts,.tsx",
    "format": "prettier --write .",
    "test": "vitest"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "axios": "^1.6.0",
    "pinia": "^2.1.0"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "eslint": "^8.50.0",
    "prettier": "^3.0.0",
    "vitest": "^1.0.0"
  }
}

三、Vite 构建工具

3.1 创建项目

# Vue项目
npm create vite@latest my-vue-app -- --template vue

# React项目
npm create vite@latest my-react-app -- --template react

# TypeScript项目
npm create vite@latest my-ts-app -- --template vue-ts

3.2 配置文件

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  
  // 路径别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  
  // 开发服务器
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          vendor: ['axios']
        }
      }
    }
  }
})

四、ESLint 代码检查

4.1 安装配置

# 安装
npm install -D eslint @eslint/js

# 初始化配置
npx eslint --init

4.2 配置文件

// eslint.config.js (Flat Config)
import js from '@eslint/js'

export default [
  js.configs.recommended,
  {
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'warn',
      'eqeqeq': 'error',
      'curly': 'error',
      'no-var': 'error',
      'prefer-const': 'error'
    }
  }
]

// .eslintrc.cjs (传统配置)
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'warn',
    'vue/multi-word-component-names': 'off'
  }
}

# 检查代码
npx eslint .

# 自动修复
npx eslint . --fix

五、Prettier 代码格式化

5.1 安装配置

npm install -D prettier

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

// .prettierignore
dist
node_modules
*.md

# 格式化代码
npx prettier --write .

# 检查格式
npx prettier --check .

5.2 VS Code 配置

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

六、Git Hooks

6.1 husky + lint-staged

# 安装
npm install -D husky lint-staged

# 初始化husky
npx husky init

# 配置pre-commit hook
echo "npx lint-staged" > .husky/pre-commit

// package.json
{
  "lint-staged": {
    "*.{vue,js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss}": [
      "prettier --write"
    ]
  }
}

七、环境变量

# .env                # 所有环境
VITE_API_BASE_URL=https://api.example.com

# .env.development    # 开发环境
VITE_API_BASE_URL=http://localhost:8080

# .env.production     # 生产环境
VITE_API_BASE_URL=https://api.example.com

// 使用环境变量
const apiUrl = import.meta.env.VITE_API_BASE_URL
console.log(apiUrl)

八、项目结构最佳实践

src/
├── api/                # API请求
│   ├── index.js
│   ├── user.js
│   └── post.js
├── assets/             # 静态资源
│   ├── images/
│   └── styles/
├── components/         # 公共组件
│   ├── Button.vue
│   ├── Modal.vue
│   └── Table.vue
├── composables/        # 组合式函数
│   ├── useAuth.js
│   └── useFetch.js
├── layouts/            # 布局组件
│   ├── DefaultLayout.vue
│   └── AdminLayout.vue
├── pages/              # 页面
│   ├── Home.vue
│   ├── Login.vue
│   └── admin/
│       ├── Dashboard.vue
│       └── Users.vue
├── router/             # 路由
│   └── index.js
├── stores/             # 状态管理
│   ├── user.js
│   └── app.js
├── utils/              # 工具函数
│   ├── request.js
│   ├── auth.js
│   └── helpers.js
├── App.vue
└── main.js

九、TypeScript配置

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

学习建议

  1. 先学会Vite，这是现代前端的标配
  2. 配置ESLint和Prettier，保证代码质量
  3. 使用Git Hooks，提交前自动检查
  4. 理解环境变量，区分开发和生产环境
  5. 组织好项目结构，方便维护和扩展

下一步学习

返回首页