从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么?

简介: 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么?

浏览文章前


这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的。


  • 被反复使用的代码


这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习。


  • 穿越时间的代码


如果一段代码10年甚至15年,都还在使用。说明它的设计思想一定很棒。


  • 好调试的代码


一个程序的代码很容易就调试成功,说明作者的项目结构能力很强,值得学习。


前言


今天,我们来搞一个新东西,名字叫基于Vue技术栈的全栈热重载生产环境脚手架。实话说,这个名字我想了很久。最终,还是以这个名字作为文章标题。我先拆分解释下:全栈的意思是支持前后端;热重载这个名词相信大家很熟悉,就是页面每次改动,不需要手动去刷新,可自动刷新;生产环境这里你可以理解成线上环境,用户使用的环境。


缘起


为什么会想到开发这样的一款项目呢?我们平时可能更多地使用VueCLI或者Vite来开发Vue项目,但是如果就单纯开发一个简单的网页,未免有点小题大作了。


这时,我们可能会用到Vue的生产环境版本。但是,这样的话我们就不能用VueCLI、Vite那样的热重载功能,就需要不停的刷新网页。如果在编辑器中对html文件增加或删除了元素,或者是在css文件中修改了某个元素的某个样式,然后想在浏览器中看到效果,通常的步骤是:把窗口切换到浏览器,然后按键盘上的F5刷新页面。在制作页面的时候这个动作可能会重复很多次。我们开发效率就大大地减少了。


所以,我们有必要开发一款可热重载的生产环境脚手架。如果增加模拟数据接口服务,那就更完美了。光说不练假把式,我们就开发一款基于Vue技术栈的全栈热重载生产环境脚手架。


实战


一、初始化项目


首先,我们建一个空文件夹,名字可以叫gulp-vue-cli,这就是项目根文件夹。相信聪明的小伙伴可以看出,我们今天的主角是gulp。建完项目根文件夹之后,我们会使用命令快速生成package.json文件。


npm init -y


二、创建前端项目与后端项目


下一步,我们会在创建好的项目根文件夹内创建一个前端项目文件夹,名字可以叫src。另外,后端项目文件夹名字叫server


下一步,我们先在src文件夹下创建一个前端项目,以下为目录详情:


css ---存放样式目录
js ---存放逻辑文件目录
imgs ---存放图片目录
index.html ---项目主页面


index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Vue</title>
    <link rel="icon" href="/imgs/favicon.ico" />
    <link rel="stylesheet" href="/css/index.css" />
  </head>
  <body>
    <div id="app">
      <img src="/imgs/logo.png" alt="" />
      <p class="mes">{{ message }}</p>
      <p class="author">{{txt}}</p>
      <p class="status">{{status}}</p>
      <button @click="sendData">send</button>
      <p>{{resTxt}}</p>
    </div>
  </body>
  <script src="/js/vue.js"></script>
  <script type="module">
    import {addTxt} from './js/utils.js';
    const app = new Vue({
      el: "#app",
      data: {
        message: "Hello Simple Vue!",
        resTxt:"",
        status:"",
        txt:addTxt()
      },
      methods: {
        sendData() {
          fetch("http://localhost:3000/send/", {
            method: "POST",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            body: `username=maomincoding&url=https://www.maomin.club`,
          })
            .then((response) => response.json())
            .then((response) => {
              this.resTxt = response;
            })
            .catch((err) => {
              console.error(err);
            });
        },
      },
      mounted() {
        fetch("http://localhost:3000/mes/", {
          method: "GET",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
          .then((response) => response.json())
          .then((response) => {
            this.status = response;
          })
          .catch((err) => {
            console.error(err);
          });
      },
    });
  </script>
</html>


这个页面很简单,主要使用Vue.js渲染文本以及调用接口后渲染文本。调用接口的方法我们这里使用fetch方法,使用详情大家可以到MDN网址查看:


https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API


建立完前端项目了,我们下一步就开始建立后端项目,我们这里使用的是Node.js技术栈。server文件夹下只有一个主文件app.js


app.js


const express = require('express');
const bodyParser = require('body-parser')
const app = express();   
app.use(express.static("./src"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// 跨域
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
//自定义接口
app.get("/mes", function (request, response) {
    response.send({
        status:"success",
        mes:"渲染页面成功!"
    });
})
app.post("/send",function(request,response){
    response.send(request.body); // echo the result back
})
app.listen(3000, function () {
    console.log("服务器运行中");
});


这里,我们也简单地介绍一下里面涉及的知识点。express相信接触Node的伙伴们一定知道。Express 是一个保持最小规模的灵活的Node.js,Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。这里,我们主要使用它创建几个API接口,供前台调用。body-parser是在处理程序之前在中间件中解析传入的请求体,可以在request.body中获取从前台传来的数据。


在此之前,你需要安装以下两个依赖:


npm install express


npm install body-parser -D


三、开发前后端热重载功能


前后端项目我们已经建立完成,下面我们将把重点放到如何开发热重载功能上。


我会先在项目根目录下创建一个gulpfile.js文件。然后,我会列出我们需要了解的知识点有哪些。


  • gulp
  • browser-sync
  • gulp-nodemon


gulp


gulp是基于Node.js的前端自动化构建工具,能自动化地完成 JavaScript/sass/html/image/css 等文件的的测试、检查、合并、压缩混淆、格式化、浏览器自动刷新、部署文件生成等操作,同时可以对文件进行监听,如果文件有改动,可以自动处理生成新的文件。所以gulp解决了开发效率(修改代码后自动更新页面)、资源整合(代码的压缩合并)、代码质量(代码的检查 自动化测试)、代码转换(es6-->es5)等问题


这里,我们需要知道gulp是怎样创建任务的。


const gulp =  require('gulp');
// 创建任务
// 第一个参数: 任务名
// 第二个参数: 回调函数,当我们执行任务时就会执行这个函数
gulp.task('test', function(){
    console.log('test');
})


//执行任务: gulp 任务名
gulp test


browser-sync


这里,我们可以重点介绍下它,它就是我们今天要找的主角。


在找它之前,我也找到其他可以实现自动刷新浏览器的插件,如:LiveReload,它也可以自动刷新页面,实时预览html效果。但是,我为什么没用LiveReload呢?最痛心的一点是你需要在浏览器上安装LiveReload插件,另外在本地你也得安装一个LiveReload软件。如果你是用的是VScode编辑器,需要在插件中心安装LiveReload插件。默认情况下,浏览器和编辑器并不会自动为你激活LiveReload的功能,你需要手动配置一些东西。所以这么麻烦,干脆看看还有没有别的解决方案。


最终,我找到了它——browser-sync,以下是官方对它的解释:


Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。


当然,学习它之前,你需要注意browser-sync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js。


然后,你可以全局安装它。


npm install -g browser-sync


也可以在本地项目下安装它。


npm install --save-dev browser-sync


如果你想更加深度地了解它,可以在浏览器上搜索以下网址:


http://www.browsersync.cn/docs/


browser-sync可以单独使用,也可以集成到gulp和grunt这样的构建工具中使用,在Node.js项目中还能结合gulp-nodemon实现全栈的自动刷新。


gulp-nodemon


nodemon是一款非常实用的工具,用来监控你 Node.js 源代码的任何变化和自动重启你的服务器。 gulp-nodemon几乎和普通gulp-nodemon完全一样,但它是为执行Gulp任务而设计的。


介绍完我们需要了解的知识点之后,我们就深入到gulpfile.js文件中,看看是如何实现前后端热重载的。


const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const nodemon = require('gulp-nodemon');
gulp.task('server', function() {
    nodemon({
        script: 'server/app.js',
        ignore: ["gulpfile.js", "node_modules/"],
        env: {
            'NODE_ENV': 'development'
        }
    }).on('start', function() {
        browserSync.init({
            proxy: 'http://localhost:3000',
            files: ["src/**"],
            port:8080
        }, function() {
            console.log("browser refreshed.");
        });
    });
});


在此之前,你需要安装以下三个依赖:


npm install gulp -D


npm install browser-sync -D


npm install gulp-nodemon -D


安装完依赖之后,我们就来解读下以上代码。


require('browser-sync').create();这行代码的意思是创建browser-sync实例,并允许您创建多个服务器或代理。


gulp.task()代码段作用是创建任务。


// 创建任务
// 第一个参数: 任务名
// 第二个参数: 回调函数,当我们执行任务时就会执行这个函数
gulp.task('test', function(){
    console.log('test');
})


nodemon中是一个配置对象。


  • script:指向服务器文件地址。
  • ignore:忽略部分对程序运行无影响的文件的改动,nodemon只监视js文件,可用ext项来扩展别的文件类型。
  • env:运行环境 development 是开发环境,production 是生产环境。


这里,我们通过gulp-nodemonstart事件来触发browser-sync的启动。


browserSync.init()这行代码的init方法中,第一个参数我们需要传入一个配置对象,第二个参数我们需要定义一个回调方法。


  • proxy:代理服务端的接口地址。
  • files:需要监听的文件目录。
  • port:端口号。


这里需要注意的是,如果是修改了服务端的js文件,会先通过nodemon重启应用,这时浏览器不会刷新,要再保存一下修改的文件,browser-sync才会显示出修改后的效果。


浏览效果


至此,我们的项目就大功告成了,在浏览之前呢!我们需要这样一个操作。打开package.json文件。定义一个启动命令,方便我们每次启动。


"scripts": {
    "dev": "gulp server"
  },


之后,我们就可以这样启动项目了。


npm run dev


微信截图_20220506145641.png


在浏览器上。


微信截图_20220506145652.png



打开成功,现在我们改动下代码,看看是否可以热重载。


微信截图_20220506145702.png


测试成功,这样我们就安心地开发自己的代码了,效率自然就提高了。之前那样不停地F5,有没有觉得这个动作对程序员来说很没有创造力呢?现在可以减轻左手和F5键的负担了。


结语


谢谢阅读,希望没有浪费你的时间。
微信截图_20220506145641.png

相关文章
|
11天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
10天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
3天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
3天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
11天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
30 9
|
10天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
9天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
14 2
|
9天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
9天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
10天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。