webpack5 + vue3快速开发html构建静态页面项目（快速开发html模板）

以下是一个使用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插件来优化项目。

webpack5 + vue3快速开发html构建静态页面项目（快速开发html模板）

评论已关闭

推荐阅读