三分钟快速搭建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
代码:

<!DOCTYPE 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),了解更多的前后端知识;
欢迎大家关注互相交流学习;

Logo

前往低代码交流专区

更多推荐