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

月影WEB
365 阅读4分钟

在

[零基础学习Vue2+webpack项目]的基础依赖项的安装详解（1） juejin.cn/post/711616…

和

[零基础学习Vue2+webpack项目]的webpack对vue2进行编码打包的详解（2） juejin.cn/post/711653…

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

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

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

如下图：

图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>Vue2</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

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

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

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

如下图：

图2：

2.png

代码如下：

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

【import App from './App.vue'】表示引入的组件，目前App这个组件还没有新建，这个在后面会详细的进行讲解。

而代码中的

new Vue({
    el: '#app',
    render: h => h(App)
})

表示创建一个vue2的应用实例，并把App这个组件放入到id为app的DOM元素上，

也就是以上新增的模板页面index.html中的<div id="app"></div>；

【vue2】：创建一个vue 实例是通过new Vue()来实现的；

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

新建的组件文件为App.vue，

如下图：

图3

3.png

开发代码如下：

<template>
    <div>
        {{ welcome }}
    </div>
</template>

<script>

export default {
    data(){
        const welcome = "月影WEB 欢迎大家来学习各种技术知识！"
        return {
            welcome: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

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

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

5.使用webpack来启动vue2项目的服务。

在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:8080/

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

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

如下图：

图9

9.png

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

浏览器效果如下图：

图10

10.png

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

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

之前发的两篇文章加上这一篇文章就已经把vue2+webpack的基础内容给讲清楚了，如果有对这些内容不清楚的位置也可以提出来，在后面的文章之中会给出解答。

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

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

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

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

avatar
文章
阅读
粉丝