当前位置：首页 > news >正文

Vue2项目搭建指南（基于Vue CLI和Webpack）

news 2025/10/16 8:59:37

1. 环境准备

安装 Node.js（≥14.x）和 npm

验证安装：

node -v  # 检查Node版本
npm -v   # 检查npm版本

2. 安装Vue CLI和webpack

全局安装脚手架工具：

npm install webpack -g
npm install -g @vue/cli@4.5.19  # 指定Vue2兼容版本

配置 npm 镜像源（如淘宝源）：

npm config set registry https://registry.npmmirror.com

3. 创建项目

vue init webpack vue-demo

选择配置：

? Please pick a preset: Default ([Vue 2] babel, eslint)  # 选择Vue2默认配置Manually select features          # 或手动选择特性

4. 项目结构说明

├── public/               # 静态资源
├── src/
│   ├── assets/           # 模块资源
│   ├── components/       # 组件
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── babel.config.js       # Babel配置
├── vue.config.js         # Webpack扩展配置
└── package.json          # 依赖管理

5. 核心配置文件

vue.config.js（Webpack定制）：

module.exports = {devServer: {port: 8080,          // 开发服务器端口open: true           // 自动打开浏览器},configureWebpack: {plugins: []          // 添加Webpack插件},chainWebpack: config => {// 链式操作Webpack配置config.module.rule('svg').exclude.add(path.resolve(__dirname, 'src/icons'))}
}

6. 常用命令

npm run serve   # 启动开发服务器
npm run build   # 生产环境构建
npm run lint    # 代码规范检查

7. 关键依赖说明

"dependencies": {"vue": "^2.6.14",                 // Vue2核心库"vue-router": "^3.5.3",            // 路由"vuex": "^3.6.2"                   // 状态管理
},
"devDependencies": {"@vue/cli-plugin-babel": "^4.5.19", // Babel转换"@vue/cli-plugin-eslint": "^4.5.19",// 代码规范"sass-loader": "^10.0.0"            // CSS预处理器
}