搭建
Vue3
项目需要以下步骤：
1. 新建一个
项目文件夹，比如 my-project，进入该文件夹，使用 `npm init`
初始化项目。
2. 安装 webpack、webpack-cli、
vue-loader、
vue-template-compiler、webpack-dev-server、
css-loader、style-loader、post
css-loader、autoprefixer、babel-loader 和相关的 preset 和 plugin，比如：
```
npm install webpack webpack-cli
vue-loader
vue-template-compiler webpack-dev-server
css-loader style-loader post
css-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', 'post
css-loader'],
},
],
},
plugins: [
new
VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html',
}),
new webpack.DefinePlugin({
__
VUE_OPTIONS_API__: true,
__
VUE_PROD_DEVTOOLS__: false,
}),
],
devServer: {
content
Base: 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 的
项目搭建。
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
