浏览文章前

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

被反复使用的代码

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

穿越时间的代码

如果一段代码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",

            },

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118693321

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

  1. PLUTO平台是由美林数据技术股份有限公司下属西安交大美林数据挖掘研究中心自主研发的一款基于云计算技术架构的数据挖掘产品，产品设计严格遵循国际数据挖掘标准CRISP-DM（跨行业数据挖掘过程标准），具备完备的数据准备、模型构建、模型评估、模型管理、海量数据处理和高纬数据可视化分析能力。

    http://www.meritdata.com.cn/article/90 PLUTO平台是由美林数据技术股份有限公司下属西安交大美林数据挖掘研究中心自主研发的一款基于云计算技术架构的数据挖掘产品, ...

  2. 如何开发一款基于 Vite+Vue3 的在线表格系统（上）

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了 ...

  3. 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

    写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...

  4. 使用 Flask 和 Vue.js 来构建全栈单页应用

    在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来. 简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的. 但在实际中存在一个明显的问题就是 Fla ...

  5. VBox 一款基于vue开发的音乐盒 序章

    己基于vue写了一个 Mplayer, github地址:https://github.com/xiangwenhu/MPlaer, 演示地址:http://babydairy2017.cloudap ...

  6. 一款基于Vue的扩展性组件库 VV-UI

    github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...

  7. 推荐几款基于vue的使用插件

    1.muse-ui ★6042 - 三端样式一致的响应式 UI 库 2.vuetify ★11169 - 为移动而生的Vue JS 2组件框架 3.Vux ★12969- 基于Vue和WeUI的组件库 ...

  8. mk-js，一个基于react、nodejs的全栈框架

    前言 在这个前端技术爆炸的时代,不自己写套开源框架出门都不好意思跟别人说自己搞前端.去年年初接触的react,16年7月份在github开源了一套针对react.redux探索的项目,近期和伙伴们一起 ...

  9. 一个关于vue+mysql+express的全栈项目（一）

    最近学了mysql数据库,寻思着能不能构思一个小的全栈项目,思来想去,于是就有了下面的项目: 先上几张效果图吧       目前暂时前端只有这几个页面,后端开发方面,有登录,注册,完善用户信息,获取用 ...

随机推荐

  1. Python数据展示 - 生成表格图片

    前言 前一篇文章介绍了推送信息到企业微信群里,其中一个项目推送的信息是使用Python自动生成的表格,本文来讲讲如何用Python生成表格图片. 选一个合适库 Python最大的优点就是第三方库丰富, ...

  2. 初识gradle, idea+springboot Demo

    写在前面; 使用maven管理写过几个springboot的系统, 此篇博客纯属记录整理学习的过程. 另外, 源码分享地址在最后. Java: 1.8.0_281 tomcat: 1.8 IDE: I ...

  3. 【Electron】Electron Icon 图标说明、及常见问题

    [Electron]Electron Icon 图标说明.及常见问题 其实各种打包模块都有相关的文档说明,相关链接如下: electron-builder:https://www.electron.b ...

  4. Java实现负载均衡算法--轮询和加权轮询

    1.普通轮询算法 轮询(Round Robin,RR)是依次将用户的访问请求,按循环顺序分配到web服务节点上,从1开始到最后一台服务器节点结束,然后再开始新一轮的循环.这种算法简单,但是没有考虑到每 ...

  5. Java语言学习day34--8月09日

    ##13Math类的方法_1 A:Math类中的方法 /* * static double sqrt(double d) * 返回参数的平方根 */ public static void functi ...

  6. 聊聊 node 如何优雅地获取 mac 系统版本

    背景 今天突然碰到了一个兼容性需求,需要根据不同 macOS 版本,进行不同的兼容性处理. 没想到看似简单的需求,中间也经历了一番波折,好在最后解决了问题. 在此记录一下解决问题的过程,也方便其他有类 ...

  7. 服务器安全加固 - Linux

    一.账号和口令 1.1 禁用或删除无用账号 查看 /etc/passwd 文件查看是否有无用的账号,如果存在则删除,降低安全风险. 操作步骤: 使用命令 userdel <用户名> 删除不 ...

  8. MyBatisPlus 入门教程，这篇很赞

    在之前的文章中我们经常使用MybatisPlus进行增删改查,可能有些小伙伴对mybatisplus不是很熟悉,今天特意出了一般入门级的教程,我自己也是一边学习一边写的,有什么地方写的不好的地方请留意 ...

  9. UDP协议、操作系统、同步与异步、阻塞与非阻塞

    UDP协议 # 客户端 import socket server = socket.socket(type=socket.SOCK_DGRAM) server.bind(('127.0.0.1', 8 ...

  10. RocketMq 完整部署

    目录 RocketMq 部署 环境 物理机部署 自定义日志目录 自定义参数和数据存放位置 服务启动 启动name server 启动broker 关停服务 尝试发送消息 常见报错 部署 rockerm ...