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

代码:

<!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项目,因此没有非常详细的写每一步的代码,如果需要从头跟着每一步进行开发的话,可以去看

//www.greatytc.com/nb/52671509

这个专栏的文章,里面从头到尾的详细的写了每一步的过程。


关注公众号(月影WEB),了解更多的前后端知识;

欢迎大家关注互相交流学习;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容