使用webpack创建vue3项目
时间: 2023-12-09 14:34:01 浏览: 40
使用webpack创建Vue3项目的步骤如下:
1. 首先,需要安装Node.js和npm包管理器。
2. 创建一个新的项目文件夹,并在其中打开终端。
3. 在终端中运行以下命令来初始化npm:
```
npm init -y
```
4. 接下来,需要安装Vue.js和Vue-loader:
```
npm install vue@next vue-loader@next @vue/compiler-sfc --save-dev
```
5. 然后,安装webpack和webpack-cli:
```
npm install webpack webpack-cli --save-dev
```
6. 创建一个名为webpack.config.js的文件,并将以下代码复制到其中:
```javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
};
```
7. 在package.json文件中添加以下脚本:
```json
"scripts": {
"build": "webpack --mode production"
}
```
8. 创建一个名为src的文件夹,并在其中创建一个名为main.js的文件。在main.js中添加以下代码:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
```
9. 创建一个名为public的文件夹,并在其中创建一个名为index.html的文件。在index.html中添加以下代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 App</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
```
10. 最后,在终端中运行以下命令来构建项目:
```
npm run build
```
运行成功后,将在dist文件夹中生成一个bundle.js文件,该文件包含了所有的Vue组件和依赖项。