三分钟快速搭建Vue3+webpack项目

最新推荐文章于 2024-05-14 15:38:41 发布

月影WEB

最新推荐文章于 2024-05-14 15:38:41 发布

阅读量2.6k

点赞数 8

分类专栏： Vue3+webpack 文章标签： vue.js vue 前端 webpack javascript

本文链接：https://blog.csdn.net/qq_34297287/article/details/124733067

版权

Vue3+webpack 专栏收录该内容

11 篇文章 8 订阅

订阅专栏

三分钟快速搭建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），了解更多的前后端知识；
欢迎大家关注互相交流学习；

月影WEB

关注

8
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
8
评论
三分钟快速搭建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 sp
复制链接

扫一扫