以下是一个使用Webpack 5和Vue 3快速搭建HTML构建静态页面项目的基本示例。
首先，确保你已经安装了Node.js和npm。
- 创建一个新的项目文件夹并初始化为npm项目：
mkdir vue-static-site
cd vue-static-site
npm init -y
- 安装Vue和Webpack及其相关依赖：
npm install vue@next vue-loader@next vue-template-compiler@next @vue/compiler-sfc webpack webpack-cli webpack-dev-server html-webpack-plugin -D
- 在项目根目录下创建一个名为
src的文件夹，并在其中创建main.js作为入口文件：
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
- 同样在
src文件夹中创建App.vue作为Vue应用的根组件：
<template>
<div id="app">
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
- 在项目根目录下创建
webpack.config.js配置文件：
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
})
]
};
- 创建一个HTML模板文件
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Static Site</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- 在项目根目录下创建
package.json中的scripts部分：
"scripts": {
"serve": "webpack serve",
"build": "webpack"
}
- 运行以下命令以启动开发服务器：
npm run serve
- 要构建生产版本的静态页面，运行：
npm run build
这个快速开始向你展示了如何使用Webpack 5和Vue 3来构建一个基本的静态页面项目。你可以根据需要添加更多的Vue组件和路由，以及其他Webpack插件来优化项目。