Vue 2 项目搭建

Vue 2 项目通常使用 Vue CLI 搭建，适合维护存量系统、后台管理平台或依赖旧生态的项目。新项目若没有历史包袱，建议优先使用 Vue 3。

环境要求

建议使用 Node.js 14 或 16 维护 Vue 2 项目。过新的 Node 版本可能会让旧版 Webpack、node-sass 等依赖出现兼容问题。

bash

node -v
npm -v

如果本机需要同时维护多个项目，建议使用 nvm 管理 Node 版本。

安装 Vue CLI

npmpnpmyarn

bash

npm install -g @vue/cli

bash

pnpm add -g @vue/cli

bash

yarn global add @vue/cli

安装后确认版本：

bash

vue --version

创建项目

bash

vue create your-project

如果需要手动选择 Babel、Router、Vuex、CSS 预处理器、ESLint 等配置，选择 Manually select features。

常见选择：

Babel：兼容旧浏览器时启用。
Router：多页面业务系统通常需要。
Vuex：中大型 Vue 2 项目常用状态管理。
CSS Pre-processors：可选择 Sass/Less。
Linter：建议启用 ESLint，统一代码质量。

常用配置

在项目根目录创建或编辑 vue.config.js：

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  productionSourceMap: false,
  devServer: {
    port: 8080,
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true
      }
    }
  }
});

接口层封装

建议把请求实例和业务接口分开，避免在页面里直接拼接请求。

// src/api/request.js
import axios from "axios";

const request = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 10000
});

request.interceptors.response.use(
  response => response.data,
  error => Promise.reject(error)
);

export default request;

// src/api/user.js
import request from "./request";

export function getUserList(params) {
  return request.get("/users", { params });
}

后台模板

如果要快速搭建后台管理系统，可以参考 vue-admin-template：

bash

git clone https://github.com/PanJiaChen/vue-admin-template.git
cd vue-admin-template
npm install
npm run dev

建议不要直接在模板上长期堆业务。落地项目时应尽快梳理权限、路由、接口、主题和构建配置。

维护建议

锁定 Node 和包管理器版本，减少环境漂移。
谨慎升级 Webpack、Babel、Sass 相关依赖。
新增页面时保持路由、菜单、权限和接口定义同步。
把公共逻辑抽到 mixins、utils 或业务组件中，但避免滥用全局 mixin。
对核心业务逐步补充单元测试或关键流程 E2E 测试。

迁移到 Vue 3 的准备

减少对旧插件和全局 API 的依赖。
梳理 Vuex 模块，为迁移到 Pinia 做准备。
逐步替换不维护的 UI 组件库。
提前处理过滤器、事件总线、this 上挂载过多工具等问题。

Vue 2 项目搭建 ​

环境要求 ​

安装 Vue CLI ​

创建项目 ​

推荐目录结构 ​

常用配置 ​

接口层封装 ​

后台模板 ​

维护建议 ​

迁移到 Vue 3 的准备 ​

Vue 2 项目搭建

环境要求

安装 Vue CLI

创建项目

推荐目录结构

常用配置

接口层封装

后台模板

维护建议

迁移到 Vue 3 的准备