vue3 + webpack
时间: 2023-07-25 18:48:24 浏览: 234
搭建 Vue3 项目需要以下步骤:
1. 新建一个项目文件夹,比如 my-project,进入该文件夹,使用 `npm init` 初始化项目。
2. 安装 webpack、webpack-cli、vue-loader、vue-template-compiler、webpack-dev-server、css-loader、style-loader、postcss-loader、autoprefixer、babel-loader 和相关的 preset 和 plugin,比如:
```
npm install webpack webpack-cli vue-loader vue-template-compiler webpack-dev-server css-loader style-loader postcss-loader autoprefixer babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
```
3. 在项目根目录下新建一个 webpack.config.js 文件,配置 webpack:
```javascript
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
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|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime'],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html',
}),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
}),
],
devServer: {
contentBase: path.join(__dirname, 'public'),
compress: true,
port: 9000,
},
};
```
4. 在项目根目录下新建一个 public 文件夹,其中包含一个 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>My App</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
```
5. 在项目根目录下新建一个 src 文件夹,其中包含一个 main.js 文件,比如:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
```
6. 在 src 文件夹下新建一个 App.vue 文件,比如:
```html
<template>
<div class="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello, Vue3!',
};
},
};
</script>
<style scoped>
.app {
text-align: center;
}
</style>
```
7. 在 package.json 中添加以下脚本:
```json
"scripts": {
"dev": "webpack serve --mode development",
"build": "webpack --mode production"
}
```
然后使用 `npm run dev` 启动开发服务器,使用 `npm run build` 打包项目。
这样就完成了 Vue3 + webpack 的项目搭建。
阅读全文