[零基础学习Vue3+webpack项目]的vue3代码的开发编译及其启动项目服务的详解（3）

月影WEB

已于 2022-05-11 21:41:25 修改

阅读量852

点赞数 5

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

于 2022-05-10 20:42:18 首次发布

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

版权

Vue3+webpack 专栏收录该内容

11 篇文章 8 订阅

订阅专栏

在
[零基础学习Vue+webpack]之vue+webpack项目的基础依赖项的安装详解（1）https://blog.csdn.net/qq_34297287/article/details/124656994?spm=1001.2014.3001.5501

和

[零基础学习Vue+webpack]之vue3+webpack项目的webpack对vue3进行编码打包的详解（2）https://blog.csdn.net/qq_34297287/article/details/124677916?spm=1001.2014.3001.5501
中已经对vue3+webpack进行了一些讲解，准备工作也已经做好了，现在正式开始vue3的代码编写了。

1.新增模板页面index.html。
在项目根目录的src文件夹下新建一个index.html的网页文件，这个网页是用来作为项目的模板页面使用的，
vue3代码所编译的文件均会被注入到index.html这个模板页面之中，同时它也是vue3项目的入口主页面，
如下图：
图1

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>

其中的<div id="app"></div>中id的app是给vue3使用的，就是vue3会将写好的代码放入到id为app的标签内；

注意：配置文件webpack.dev.config.js中plugins下的HtmlWebpackPlugin中的template属性后面的路径要和模板路径保持一直（这一点在上一篇文章中有代码）。

2.对项目根目录的src文件夹下的index.js文件进行代码的开发。
图2：

代码如下：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

import App from './App.vue'表示引入的组件，目前App这个组件还没有新建，这个在后面会详细的进行讲解。
而代码中的createApp(App).mount('#app')表示创建一个vue3的应用实例，并把App这个组件放入到id为app的DOM元素上，
也就是以上新增的模板页面index.html中的<div id="app"></div>；

注意：这是vue3的代码写法，与vue2是有区别的，这点一定要记住。
vue2：创建一个vue 实例是通过new Vue()来实现的；
vue3：通过使用createApp这个API返回一个应用实例，并且可以通过链条的方式继续调用其他的方法；

3.在项目根目录的src文件夹下新建App组件。
新建的组件文件为App.vue，
图3

开发代码如下：

<template>
    <div>
        {{ welcomeLanguage }}
    </div>
</template>
<script>
import { setup } from 'vue'
export default {
    name:"firstVueProJectInVue3",
    setup() {
        var welcome = "月影WEB 欢迎大家来学习各种技术知识！"
        return { welcome }       
    },
}
</script>

组件代码的开发根据项目需要来做。

4.使用webpack来编译vue3项目代码。
在终端中输入：

npm run dev-build-server

这样就执行了package.json中scripts的dev-build-server

这样项目的根目录就会多出一个build这个文件夹，而编译好的代码就在build这个文件夹下的development这个文件夹下；
如下图：
图4

编译的bundle.js文件也被注入到了index.html之中，也能在index.html中看到引用了bundle.js；

之所以编译文件会在这个目录文件夹下是因为在配置文件webpack.dev.config.js中对编译文件进行了配置；
也就是如下代码：

    output:{
        path:path.resolve(__dirname,'./build/development'),         // 动态获取出口路径(绝对路径)-文件编译后的位置
        filename:'bundle.js'                                            // 出口文件名
    },

图5

然后可以直接打开这个index.html网页，如下图：
图6

浏览器上面就显示了vue所编写的代码内容："月影WEB 欢迎大家来学习各种技术知识！"

注意：网页文件以浏览器的方式打开的地址栏路径为本地的绝对路径。

5.使用webpack来启动vue3项目的服务。
在package.json中的scripts属性中加入："dev-server": "webpack-dev-server --open chrome --config ./webpack.dev.config.js --progress"
webpack-dev-server --open chrome 表示在谷歌浏览器里面启动服务；
--config ./webpack.dev.config.js --progress 表示项目是根据webpack.dev.config.js这个配置文件进行配置来启动服务的；

在终端中输入：

npm run dev-server

图7

这样就启动了该项目服务了，浏览器效果如下图：
图8

注意：以服务方式启动的项目地址栏的路径是localhost加端口号，而当前启动的服务器地址为：http://localhost:8082/

如果你需要自己配置服务的端口号的话，只需要在webpack.dev.config.js 这个配置文件中加入以下代码：

    devServer:{
        port:8888,     // 设置端口号，如果没有设置，会默认端口号
    }

如下图：
图9

然后关闭之前的服务之后，重新在终端中输入：

npm run dev-server

浏览器效果如下图：
图10

从图中可以看到端口号已经变为了设置的8888了。

这样一个完整的vue3+webpack项目的基础就完成了，接下去就是根据项目需求来补充和完善依赖项、配置项、页面内容等等了。

之后我也会将这次上传到资源中去，

这几次文章的零基础学习Vue3+webpack的项目代码下载地址如下：

vue3+webpack项目代码

有兴趣的人可以去下载。

另外后面的文章也会对vue3的项目进行进一步完善。

关注公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；

月影WEB

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
8
评论
[零基础学习Vue3+webpack项目]的vue3代码的开发编译及其启动项目服务的详解（3）

在[零基础学习Vue+webpack]之vue+webpack项目的基础依赖项的安装详解（1）https://blog.csdn.net/qq_34297287/article/details/124656994?spm=1001.2014.3001.5501和[零基础学习Vue+webpack]之vue3+webpack项目的webpack对vue3进行编码打包的详解（2）https://blog.csdn.net/qq_34297287/article/details/124677916?spm
复制链接

扫一扫