如果你不想使用 Vue CLI，也可以直接通过 npm 安装 Vue，然后手动配置项目。
- 创建项目目录
创建一个新的项目目录，例如my-vue-project，并进入该目录。
- 初始化项目
在项目目录下运行以下命令初始化项目：
npm init -y
这会生成一个package.json文件，用于定义项目的依赖和脚本。
- 安装 Vue
在项目目录下运行以下命令安装 Vue：
npm install vue@2
这里安装的是 Vue 2。如果你需要安装 Vue 3，可以改成vue@next 即为vue3
- 配置项目（以 Webpack 为例）
安装 Webpack 和相关依赖：
npm install webpack webpack-cli
确保 vue-loader 和 vue-template-compiler 的版本匹配
vue-loader 和 vue-template-compiler 的版本需要保持一致，否则可能会导致兼容性问题。确保你安装的版本与 Vue 的版本匹配。例如，如果你使用的是 Vue 3，应该安装对应的 vue-loader 和 vue-template-compiler 版本。
- vue-loader 的版本：
vue-loader@17.4.2。vue-loader v17 是专为 Vue 3 设计的，我们使用的是 Vue 2 (vue 和 vue-template-compiler 的版本是 ^2.7.16)。
Vue 2 项目应该使用 vue-loader v15 或 v16，而不是 v17。
- vue 和 vue-template-compiler 的版本：
Vue 2 (^2.7.16) 与 vue-template-compiler ^2.7.16 匹配，但需要确保 vue-loader 的版本与之兼容。
Vue 项目中，vue-loader 和 vue-template-compiler 的版本需要匹配，否则可能会导致兼容性问题。如果发现版本不匹配，可以通过以下命令更新它们：
npm install vue-loader@15.10.0 vue-template-compiler@2.7.0 --save-dev
如果你使用 Vue 3，确保安装与 Vue 3 兼容的版本：
npm install vue-loader@16 vue-template-compiler@3 --save-dev
- Webpack 的版本：
Webpack 5 (^5.99.8)，这是最新的版本，通常与 Vue 3 项目更兼容。
如果你的项目是基于 Vue 2，建议使用 Webpack 4，因为 Vue 2 项目通常与 Webpack 4 的兼容性更好。
降级 vue-loader 到兼容 Vue 2 的版本
如果你的项目是基于 Vue 2，应该使用 vue-loader v15 或 v16。以下是降级 vue-loader 的步骤：
npm uninstall vue-loader
//如果你不用降级直接用下面这句安装
npm install vue-loader@15 --save-dev
或者，如果你希望使用 vue-loader v16（虽然 v16 主要用于 Vue 3，但也可以兼容 Vue 2）：
npm uninstall vue-loader
//如果你不用降级直接用下面这句安装
npm install vue-loader@16 --save-dev
如果你的项目是基于 Vue 2，建议使用 Webpack 4，因为 Vue 2 项目通常与 Webpack 4 的兼容性更好。以下是降级 Webpack 的步骤：
npm uninstall webpack webpack-cli
//如果你不用降级直接用下面这句安装
npm install webpack@4 webpack-cli@3 --save-dev
建议：
Vue 2 项目：建议使用 vue-loader v15 或 v16，以及 Webpack 4。
Vue 3 项目：建议使用 vue-loader v17 和 Webpack 5。
4.安装必要的加载器
你需要安装 css-loader 和 vue-style-loader，以确保 Webpack 能够正确处理 .vue 文件中的
- 确认 css-loader 和 vue-style-loader 的版本
对于 Vue 2.7 项目，css-loader 和 vue-style-loader 的版本也需要确保兼容。通常，以下版本是兼容的：
css-loader: ^5.0.0（适用于 Webpack 4）
vue-style-loader: ^4.0.0（适用于 Webpack 4）
运行以下命令来安装这些依赖：
npm install css-loader@5 vue-style-loader@4 --save-dev
- 安装 babel-loader
运行以下命令来安装 babel-loader 及其相关依赖
npm install babel-loader@8 --save-dev
babel-loader v8 是与 Webpack 4 兼容的版本。
- 确保安装了 @babel/core 和 @babel/preset-env
babel-loader 依赖于 @babel/core，并且通常需要一个预设（preset）来转换 ES6+ 代码。确保你已经安装了这些依赖：
npm install @babel/core @babel/preset-env --save-dev
最后webpakc.config.js的配置文件应该是这样的
const path=require('path');
const {VueLoaderPlugin}=require('vue-loader');
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$/,
loader:'babel-loader',
exclude:'/node_modules/',
options:{
presets:['@babel/preset-env']
}
},
{
test:/\.css$/,
use:[
'vue-style-loader',
'css-loader'
]
}
]
},
plugins:[
new VueLoaderPlugin()
],
resolve:{
extensions:['.js','.vue'],
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
}
在package.js文件中添加"build": “webpack”,如下：
{
"name": "xuevue",
"version": "1.0.0",
"main": "/src/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev":"vite"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"vue": "^2.7.16",
"vue-template-compiler": "^2.7.16"
},
"devDependencies": {
"@babel/core": "^7.27.1",
"@babel/preset-env": "^7.27.2",
"babel-loader": "^8.4.1",
"css-loader": "^5.2.7",
"vue-loader": "^15.11.1",
"vue-style-loader": "^4.1.3",
"webpack": "^4.47.0",
"webpack-cli": "^3.3.12"
}
}
运行 Webpack
运行 Webpack 构建命令：
在运行命令之前将你的代码如：.vue后缀的文件，即主文件main.js放入src中
npm run build
运行后即在dist文件夹中生成了bundle.js，将这个文件写入一个html中,就可以访问你用webpack打包编译后的文件，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/dist/bunble.js"></script>
</body>
</html>
当然在开发中一般用vite来热重载，不必用webpack去编译后才能看到效果