<think>嗯，用户之前问过Webpack是什么，现在又问如何不用
Vue CLI创建
Vue项目。看来他们可能对
Vue CLI的底层机制感兴趣，或者想要更自定义的配置。用户可能已经了解
Vue CLI是基于Webpack封装的，现在想自己手动配置，以更深入理解
项目结构，或者避免
Vue CLI的一些默认设置带来的限制。
首先，我需要确保回答覆盖手动创建
项目的步骤，可能包括初始化
项目、安装依赖、配置Webpack和Babel，以及基本的
项目结构。用户可能希望有
一个逐步的指南，所以分步骤讲解会比较清晰。此外，用户可能关心为什么需要手动配置，比如更灵活的控制、学习目的或者特定需求，所以需要简要说明优点和适用场景。
同时，用户可能对比过
Vue CLI的便捷性和手动配置的复杂性，需要强调两者的区别，比如配置时间、维护成本，以及手动配置带来的自由度。可能需要提到使用Vite作为替代方案，因为Vite也是
一个热门工具，但用户明确问的是不用
Vue CLI，所以重点还是在Webpack手动配置。
另外，用户可能对依赖的版本有疑问，比如
Vue 3需要不同的loader或插件，所以需要明确指出各个依赖的作用和版本兼容性。比如
vue-loader需要与
Vue版本对应，可能需要提醒用户注意版本问题。
还需要考虑潜在的问题，比如如何处理静态资源、CSS预处理器、热更新等，所以在步骤中加入相关配置示例会有帮助。例如，配置Webpack的loader来处理.
vue文件、CSS和图片资源，以及使用webpack-dev-
server来启动开发服务器。
最后，可能需要总结手动配置的优缺点，帮助用户决定是否适合他们的
项目。如果用户是新手，可能需要提醒他们手动配置的复杂性，建议在熟悉
Vue生态后再尝试；如果是进阶用户，可以强调灵活性和深度定制的优势。</think>以下是不使用
Vue CLI 手动创建
Vue 项目的完整方案，通过 7 个步骤实现工程化配置：
---
### 一、**基础环境准备**
1. **初始化
项目**
```bash
mkdir my-
vue-project && cd my-
vue-project
npm init -y # 生成 package.json
```
2. **安装核心依赖**
```bash
npm install
vue@next #
Vue 3 核心库
npm install webpack webpack-
cli webpack-dev-
server --save-dev # 构建工具链
npm install
vue-loader@next @
vue/compiler-sfc --save-dev # 单文件组件处理器
```
---
### 二、**
项目结构搭建**
```text
├── src/
│ ├── App.
vue # 根组件
│ ├── main.js # 入口文件
│ └── components/ # 组件目录
├── public/
│ └── index.html # HTML 模板
├── webpack.config.js # Webpack 配置
└── babel.config.json # Babel 配置
```
---
### 三、**关键配置文件实现
1. **Webpack 配置** (`webpack.config.js`)
```javascript
const {
VueLoaderPlugin } = require('
vue-loader')
const path = require('path')
module.exports = {
mode: '
development',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.
vue$/,
loader: '
vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['
vue-style-loader', 'css-loader']
}
]
},
plugins: [
new
VueLoaderPlugin()
],
dev
Server: {
static: {
directory: path.join(__dirname, 'public')
},
port: 8080,
hot: true
}
}
```
2. **Babel 配置** (`babel.config.json`)
```json
{
"presets": ["@babel/preset-env"]
}
```
---
### 四、**核心文件编写
1. **入口 HTML** (`public/index.html`)
```html
<!DOCTYPE html>
<html>
<head>
<title>Manual
Vue Setup</title>
</head>
<body>
<div id="app"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>
```
2. **
Vue 根组件** (`src/App.
vue`)
```
vue
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: '手动创建的
Vue 项目'
}
}
}
</script>
```
3. **入口 JS** (`src/main.js`)
```javascript
import { createApp } from '
vue'
import App from './App.
vue'
createApp(App).mount('#app')
```
---
### 五、**扩展功能配置（可选）
1. **添加 CSS 预处理器**
```bash
npm install sass sass-loader --save-dev
```
```javascript
// 在 Webpack 配置中增加：
{
test: /\.scss$/,
use: ['
vue-style-loader', 'css-loader', 'sass-loader']
}
```
2. **配置生产环境优化**
```javascript
// webpack.prod.js
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [new TerserPlugin()]
}
}
```
---
### 六、**运行与构建命令
```json
// package.json
"scripts": {
"dev": "webpack serve --config webpack.config.js",
"build": "webpack --config webpack.prod.js"
}
```
---
### 七、**手动配置 vs
Vue CLI 对比
| 维度 | 手动配置 |
Vue CLI |
|--------------------|----------------------------|---------------------------|
| 初始配置时间 | 30
+ 分钟 | <1 分钟 |
| 维护成本 | 高（需自行管理所有依赖） | 低（官方封装最佳实践） |
| 灵活性 | 完全控制每个配置项 | 受限于预设配置 |
| 更新升级 | 需手动处理版本兼容 | 官方统一维护升级 |
| 适用场景 | 需要深度定制/学习原理 | 快速启动标准
项目 |
---
### 进阶建议：
1. **使用 Vite 替代方案**（非 Webpack 体系）
```bash
npm create vite@latest
```
2. **逐步添加功能**
- 按需安装 `
vue-router`, `pinia` 等生态库
- 配置 `ESLint`
+ `Prettier` 代码规范
- 添加 `TypeScript` 支持
通过这种手动配置方式，您可以深度理解
Vue 项目的底层运行机制，但需注意后续依赖管理和版本升级的维护成本。
扫一扫
7803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
