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

月影WEB
445 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在 [零基础学习Vue+webpack]之vue+webpack项目的基础依赖项的安装详解（1）：juejin.cn/post/709910…

和 [零基础学习Vue+webpack]之vue3+webpack项目的webpack对vue3进行编码打包的详解（2）： juejin.cn/post/709942…

中已经对vue3+webpack进行了一些讲解，准备工作也已经做好了，现在正式开始vue3的代码编写了。

1.新增模板页面index.html。

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

如下图：

图1

1.png

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：

2.png

代码如下：

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

3.png

开发代码如下：

<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

4.png

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

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

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

图5

5.png

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

图6

6.png

浏览器上面就显示了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

7.png

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

图8

8.png

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

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

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

如下图：

图9

9.png

然后关闭之前的服务之后，重新在终端中输入：npm run dev-server

浏览器效果如下图：

图10

10.png

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

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

之后我也会将这次零基础学习Vue3+webpack的代码上传到资源中去，有兴趣的人可以去下载。

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

关注公众号（月影WEB），了解更多的前后端知识；

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

avatar
文章
阅读
粉丝