三分钟快速搭建Vue3+webpack项目
三分钟快速搭建Vue3+webpack项目
项目目录
如下图：
其中：
package.json：对项目进行描述，包括项目的基本信息、依赖模块的版本信息等等；
注意：可以手动创建或者通过npm init自动创建。
代码：
{ "name": "yydpt_vue_base", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev-build-server": "webpack --config ./webpack.dev.config.js --progress", "dev-server": "webpack-dev-server --open chrome --config ./webpack.dev.config.js --progress" }, "author": "", "license": "ISC", "devDependencies": { "vue": "^3.2.33", "vue-loader": "^16.0.0-beta.4", "@vue/compiler-sfc": "^3.2.33", "webpack": "^4.46.0", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.11.0", "babel-loader": "^8.0.5", "@babel/core": "^7.17.8", "@babel/preset-env": "^7.16.11", "style-loader": "^1.2.1", "css-loader": "^3.5.3", "html-webpack-plugin": "^4.3.0" }, "dependencies": { "vue": "^3.2.33", "vue-loader": "^16.0.0-beta.4", "@vue/compiler-sfc": "^3.2.33", "webpack": "^4.46.0", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.11.0", "babel-loader": "^8.0.5", "@babel/core": "^7.17.8", "@babel/preset-env": "^7.16.11", "style-loader": "^1.2.1", "css-loader": "^3.5.3", "html-webpack-plugin": "^4.3.0" }}代码写好之后执行下npm install，这样才能下载项目的依赖模块；
node_modules：存放依赖模块的文件夹；
注意：执行npm install 之后会自动生产node_modules这个文件，并将下载的依赖模块放入此文件中。
package-lock.json：锁定依赖模块的版本；
注意：执行npm install 之后自动生成的文件。
webpack.dev.config.js：webpack的配置文件，用来编译项目、打包项目、启动服务等等；
注意：自己手动创建，此项目的该配置文件主要是开发环境使用。
代码：
const path = require('path');const { VueLoaderPlugin }=require("vue-loader")var HtmlWebpackPlugin = require('html-webpack-plugin'); // 把打包后的文件直接注入到html模板中module.exports = { mode:'development', // 设置开发模式 output:{ path:path.resolve(__dirname,'./build/development'), // 动态获取出口路径(绝对路径)-文件编译后的位置 filename:'bundle.js' // 出口文件名 }, devServer:{ port:8888, // 设置端口号，如果没有设置，会默认端口号 }, module: { rules: [ { test: /\.(js)$/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env'], } }, exclude: /node_modules/ },{ test:/\.(css)$/, use:[{ loader:"style-loader" // 将所有的计算后的样式加入页面中,html页面中插入css代码 },{ loader:"css-loader", // 解析CSS样式,可以用模块的方式手动对象形式写样式,style-loader自动处理了这个注入 },//能够使用类似@import 和 url(...)的方法实现 require()的功能 ] },{ test:/\.(vue)$/, use:{ loader:"vue-loader" } } ], }, plugins:[ new VueLoaderPlugin(), new HtmlWebpackPlugin({ // 把打包后的文件直接注入到html模板中 title:'月影WEB', template:path.join(__dirname, "./src/index.html"), // 指定模板页面 filename: 'index.html', // 模板的名称 inject: 'body', // 将编译的vue的js文件注入到模板页面的body内 }) ],}webpack.prod.config.js：和webpack.dev.config.js文件一样的，只不过这个文件是在生产环境使用；
src：这个文件夹下面一般放的是项目代码；
注意：自己手动创建。
在src文件夹下分别创建
index.html
代码：
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue</title> </head> <body> <div id="app"></div> </body></html>index.js
代码：
import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue
代码：
<template> <div> {{ welcome }} </div></template><script>import { setup } from 'vue'export default { name:"firstVueProJectInVue3", setup() { var welcome = "月影WEB 欢迎大家来学习各种技术知识！" return { welcome } },}</script>build：发布版本的时候，项目编译打包的文件所放的目录；
注意：文件是在编译打包的过程之中自动生成，该文件的名称是webpack.dev.config.js这个配置文件之中的配置设置的。
以上就是一个基础的Vue3+webpack项目的相关代码了；
如果需要对项目进行编译打包只需要执行：npm run dev-build-server
就会将这个项目编译打包到build 这个文件夹下了。
如果需要启动这个项目的服务只需要执行：npm run dev-server
就能启动该项目的服务了。
这一篇文章是快速的搭建一个简单的vue3+webpack项目，因此没有非常详细的写每一步的代码，如果需要从头跟着每一步进行开发的话，可以去看
https://blog.csdn.net/qq_34297287/category_11806124.html?spm=1001.2014.3001.5482
这个专栏的文章，里面从头到尾的详细的写了每一步的过程。
项目源码地址：
https://download.csdn.net/download/qq_34297287/85351290?spm=1001.2014.3001.5503
关注公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；