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

 浏览文章前

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

1.被反复使用的代码

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

2.穿越时间的代码

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

3.好调试的代码

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

前言

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

缘起

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

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

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

实战

一、初始化项目

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

 
 
 
 
    
  
  
  
  
  1. npm init -y 
    2.

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

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

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

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

index.html

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.      
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.     Simple Vue 
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.    
    11.   
  
  
  
  11.    
    12.   
  
  
  
  12.      
    13.   
  
  
  
  13.        
    14.   
  
  
  
  14.       {{ message }}
     
    15.   
  
  
  
  15.       {{txt}}
     
    16.   
  
  
  
  16.       {{status}}
     
    17.   
  
  
  
  17.       send 
    18.   
  
  
  
  18.       
    {{resTxt}}
     
    19.   
  
  
  
  19.     
 
  •    
  •    
  •    
  •     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); 
  •           }); 
  •       }, 
  •     }); 
  •    
  •  

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

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

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

    app.js

     
 
 
 
      
  
  
  
  
    1. const express = require('express'); 
      2.   
  
  
  
    2. const bodyParser = require('body-parser') 
      3.   
  
  
  
    3. const app = express();    
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. app.use(express.static("./src")); 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. app.use(bodyParser.urlencoded({ extended: true })); 
      8.   
  
  
  
    8. app.use(bodyParser.json()); 
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11. // 跨域 
      12.   
  
  
  
    12. app.all('*', function (req, res, next) { 
      13.   
  
  
  
    13.     res.header("Access-Control-Allow-Origin", "*"); 
      14.   
  
  
  
    14.     res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
      15.   
  
  
  
    15.     res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); 
      16.   
  
  
  
    16.     res.header("X-Powered-By", ' 3.2.1'); 
      17.   
  
  
  
    17.     res.header("Content-Type", "application/json;charset=utf-8"); 
      18.   
  
  
  
    18.     next(); 
      19.   
  
  
  
    19. }); 
      20.   
  
  
  
    20.  
      21.   
  
  
  
    21. //自定义接口 
      22.   
  
  
  
    22. app.get("/mes", function (request, response) { 
      23.   
  
  
  
    23.     response.send({ 
      24.   
  
  
  
    24.         status:"success", 
      25.   
  
  
  
    25.         mes:"渲染页面成功！" 
      26.   
  
  
  
    26.     }); 
      27.   
  
  
  
    27. }) 
      28.   
  
  
  
    28.  
      29.   
  
  
  
    29. app.post("/send",function(request,response){ 
      30.   
  
  
  
    30.     response.send(request.body); // echo the result back 
      31.   
  
  
  
    31. }) 
      32.   
  
  
  
    32.  
      33.   
  
  
  
    33. app.listen(3000, function () { 
      34.   
  
  
  
    34.     console.log("服务器运行中"); 
      35.   
  
  
  
    35. }); 
      36.

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

    在此之前，你需要安装以下两个依赖：

     
 
 
 
      
  
  
  
  
    1. npm install express 
      2.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. npm install body-parser -D 
      2.

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

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

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

    gulp

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

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

    browser-sync

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

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

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

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

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

     
 
 
 
      
  
  
  
  
    1. npm install -g browser-sync 
      2.

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

     
 
 
 
      
  
  
  
  
    1. npm install --save-dev browser-sync 
      2.

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

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

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

    gulp-nodemon

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

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

     
 
 
 
      
  
  
  
  
    1. const gulp = require('gulp'); 
      2.   
  
  
  
    2. const browserSync = require('browser-sync').create(); 
      3.   
  
  
  
    3. const nodemon = require('gulp-nodemon'); 
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. gulp.task('server', function() { 
      6.   
  
  
  
    6.     nodemon({ 
      7.   
  
  
  
    7.         script: 'server/app.js', 
      8.   
  
  
  
    8.         ignore: ["gulpfile.js", "node_modules/"], 
      9.   
  
  
  
    9.         env: { 
      10.   
  
  
  
    10.             'NODE_ENV': 'development' 
      11.   
  
  
  
    11.         } 
      12.   
  
  
  
    12.     }).on('start', function() { 
      13.   
  
  
  
    13.         browserSync.init({ 
      14.   
  
  
  
    14.             proxy: 'http://localhost:3000', 
      15.   
  
  
  
    15.             files: ["src/**"], 
      16.   
  
  
  
    16.             port:8080 
      17.   
  
  
  
    17.         }, function() { 
      18.   
  
  
  
    18.             console.log("browser refreshed."); 
      19.   
  
  
  
    19.         }); 
      20.   
  
  
  
    20.     }); 
      21.   
  
  
  
    21. }); 
      22.

    在此之前，你需要安装以下三个依赖：

     
 
 
 
      
  
  
  
  
    1. npm install gulp -D 
      2.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. npm install browser-sync -D 
      2.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. npm install gulp-nodemon -D 
      2.

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

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

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

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

    nodemon中是一个配置对象。

    这里，我们通过gulp-nodemon的start事件来触发browser-sync的启动。

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

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

    浏览效果

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

     
 
 
 
      
  
  
  
  
    1. "scripts": { 
      2.   
  
  
  
    2.   "dev": "gulp server" 
      3.   
  
  
  
    3. }, 
      4.

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

     
 
 
 
      
  
  
  
  
    1. npm run dev 
      2.

    在浏览器上。

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

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

    结语

    谢谢阅读，希望没有浪费你的时间。如果觉得有帮助!

    源码地址：

    https://gitee.com/maomincoding/gulp-vue-cli

    网站栏目：从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么？
    当前网址：http://www.mswzjz.cn/qtweb/news13/370563.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    静态网站知识

    分类信息网

    混凝土密封固化剂　　 　自适应网站　　 　重庆网站营销　　 　成都服务器托管　　 　乐山服务器托管　　 　简阳做网站　　 　成都成品网站　　 　服务器租用　　 　兴久牧业　　 　免备案虚拟主机空间　　 　软文发稿　　 　郫都区消防器材　　 　电信成都枢纽中心　　 　成都h5建站开发　　 　平昌做网站　　 　新都四新网站建设　　 　成都网站建设公司　　 　成都网站建设公司　　 　成都网站建设公司　　 　成都网站建设公司