首先是对应的文件目录src下存放css文件index.css,项目的入口文件main.js以及vue模板app.vue

1.项目基本依赖

使用webpack搭建vue项目,一定少不了webpack的依赖包

具体安装 npm i webpack webpack-cli -D

自然也少不了vue3的下载,因为npm i vue默认下载的2.6的版本,所以下载vue3的话需要指定安装

具体安装:npm install vue @next 3.0.11

有了vue3与webpack基本目标需求后,开始进行项目搭建,在项目总目录下创建index.html,作为项目打开的网页文件,这里不使用插件自动生成。在html中引用之后打包的目标文件main.js,同时编写div,这里命名就直接用vue中的小案例的counter当作div的命名,在之前使用较多也广为人知的命名可能就是app。

有了html文件后需要考虑./dist/main.js,可以知道./dist/main.js是打包后的目标文件,但在打包前main.js该如何配置,以及webpack如何去处理main.js中的内容就需要相对的考虑。

2.配置打包环境

webpack.config.js中首要的就是配置入口文件,将src下的main.js作为打包的入口文件,而打包后的结果存放就放在index.js中所引用到的dist中,到这js文件在webpack中的处理已经告一段落,其次该处理对应的vue。

const path=require("path")
module.exports={
    entry:"./src/main.js",
    output:{
        path:path.join(__dirname,"dist"),
        filename:"main.js"
    }
    mode:"development"
}

 3.vue相关配置

项目到1,2为止,运行webpack已经可以达到使用的目的,但实际上这个程度与vue没有任何关系,接下来就要开始处理相关的静态资源文件。

在src下的main.js中,传统的vue-cli生成的vue2.x项目中,在入口文件中经常可以看到

i

import Vue from 'vue'

但在vue3的项目依旧使用将会导致一个警告

需要处理该警告的方式就是使用解构赋值按需将模块导入,如下所示:

import { createApp } from 'vue'

而vue3中vue的挂载方式也与vue2中有所区别,改为了

import { createApp } from 'vue'
import App from './app.vue'
createApp(App).mount('#counter')

在这里,出现了app.vue文件,首先webpack本身是没有处理vue文件的能力,所以在webpack.config.js中配置对应的loader,使其能够解析vue文件

想要vue3的项目,对应的vue-loader版本是16.0.0-beta.4,而相关的安装,需要指定版本具体安装为

npm i vue-loader@16.0.0-beta.4 -D

而在vue2项目中,template编译使用的是vue-template-compiler,但是vue3项目再使用这个,将会提示版本不匹配

所以处理vue3项目的使用,vue-template-compiler已经被替代为@vue/compiler-sfc,具体的安装为:

npm i @vue/compiler-sfc -D

下载完成后自然少不了对应的配置,在webpack.config.js中有以下配置,到这里就完成了在webpack中对于vue解析已经完成,接下来顺便把css文件也一并处理了。

下载css-loader,style-loader

npm i style-loader css-loader -D

并在webpack的module中做相应的配置

const path=require("path")
const { VueLoaderPlugin }=require("vue-loader")
module.exports={
    entry:"./src/main.js",
    output:{
        path:path.join(__dirname,"dist"),
        filename:"main.js"
    },
    plugins:[
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            },
            {
                test:/\.vue$/,
                use:["vue-loader"]
            }
        ]
    },
    mode:"development"
}

到次为止,已经完成对于vue,css文件的相应处理,最后就可以编写对应的css,vue的内容啦,以下随便编写些内容,App.vue中如下

<template>
    <div>
        {{ welcomeLanguage }}
    </div>
</template>
<script>
import { setup } from 'vue'
export default {
    name:"firstVueProJectInVue3",
    setup() {
        var welcomeLanguage="welcome to use Vue3 in Webpack"
        return { welcomeLanguage }       
    },
}
</script>

css文件中:

body{
    background-color: yellow;
}

最后的项目结构如1所示,在命令行中运行npx webpack后完成打包

 

最后查看index.html的运行结果

配置成功,能正常显示出结果。最后附带上所需要包的依赖版本:

  "dependencies": {
    "vue": "^3.0.11"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.11",
    "css-loader": "^5.2.6",
    "style-loader": "^2.0.0",
    "vue-loader": "^16.0.0-beta.4",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0"
  }

 

Logo

前往低代码交流专区

更多推荐