搭建
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 Html
WebpackPlugin = 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 Html
WebpackPlugin({
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 的
项目搭建。
扫一扫
3228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
