用 vue-cli 手脚架建立一个 webpack 模板 vue 项目_webpack 手写vue手脚-优快云博客

本文链接：https://blog.youkuaiyun.com/steven_cw/article/details/100537957

本文详细介绍如何使用Vue CLI和Webpack快速搭建一个Vue项目。从环境准备，包括Node.js、npm及cnpm的安装，到使用Vue CLI生成项目模板，再到项目的启动与打包流程，最后介绍如何修改配置以适应本地环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 vue-cli 脚手架搭建基于 Webpack 模板的 Vue2 项目

一、环境准备

1：安装 Node.js

需 Node.js 8.9+ 版本（推荐 12.x+），官网下载安装包：https://nodejs.org 验证安装成功：

node -v  # 查看 Node.js  版本 
npm -v   # 查看 npm 版本

2：设置 npm 镜像加速

使用淘宝镜像提升依赖安装速度：

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

3：全局安装 vue-cli

Vue2 项目需使用旧版脚手架工具：

npm install -g @vue/cli-init

二、创建 Webpack 模板项目

1：初始化项目

执行以下命令创建基于 webpack 模板的 Vue2 项目：

vue init webpack vue2-demo

2：配置项目选项

根据提示选择配置（参考典型配置）：

Project name vue2-demo 
Project description A Vue.js  project 
Author yourname <your@email.com> 
Vue build standalone  # 选择 Runtime + Compiler 模式 
Install vue-router? Yes  # 安装路由 
Use ESLint? No          # 新手建议关闭 ESLint 格式校验
Set up unit tests No    # 不安装单元测试 
Setup e2e tests No      # 不安装端到端测试 
Should we run npm install  Yes

3：安装依赖

cd vue2-demo 
npm install  # 或使用 cnpm 加速

三、项目结构解析

vue2-demo/
├── build/       # Webpack 配置（开发/生产环境）
├── config/      # 项目参数（端口、代理等）
├── src/         # 源码目录 
│   ├── assets/  # 静态资源（图片、字体等）
│   ├── components/ # Vue 组件 
│   ├── router/  # 路由配置 
│   └── main.js   # 入口文件 
├── static/      # 纯静态文件（不经过 Webpack 处理）
└── package.json  # 依赖和脚本配置

四、运行与调试

1：启动开发服务器

npm run dev  # 默认访问 http://localhost:8080

五、项目构建与部署

生产环境打包

npm run build  # 生成 dist/ 目录

六、扩展开发配置（可选）

1：安装 CSS 预处理器

npm install less less-loader --save-dev

2：配置代理解决跨域

修改
config/index.js
中的
proxyTable: {
  '/api': {
    target: 'http://your-api-domain.com', 
    changeOrigin: true 
  }
}

以上就是简单并有效的使用流程，还有不懂的和其他问题的，留言吧 =_=