浏览文章前

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

被反复使用的代码

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

穿越时间的代码

如果一段代码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. 查域名对应ip，测试端口是否可访问通

    根据命令查询软件包名称 yum provides */nslookup 根据域名解析ip nslookup 域名 示例:nslookup smtp.163.com 测试端口 telnet ip 端口 ...

  2. Postman大势已去

    作为一名前端,日常开发过程中除了写业务代码,前后端联调更是重要的一环.但这一环却往往是整个开发中最繁琐也最累人的一环.任谁都想早点下班,然而提升联调效率并不是个纯技术相关的问题,而是需要有良好工作流程 ...

  3. js逆向之AES加密

    故事背景: 在获取某网站接口数据时,发现其请求的 headers 中的参数 使用了 AES算法加密 ,并对其进行校验,在此简单记录下自己的踩坑历程. AES简介: 高级加密标准(AES,Advance ...

  4. vscode golang 不能自动补全问题

    问题描述: 使用vscode编辑go语言时,有时候会莫名其妙的代码不能自动补全,struct的属性值不能自动提示,这时候如果重新启动vscode也没有效果,就可能是gocode插件出了问题或者有了更新 ...

  5. 企业应用架构研究系列二十八：身份认证 Beginning Out With IdentityServer4

    在.Netcore 技术栈中,一直在使用了开源组件IdentityService4进行身份管理,其功能的强大和易用性的确很受开发者喜欢,但是最近其开源组织Duende Software 开始对其进行商 ...

  6. 面试官：Kafka是什么，它有什么特性与使用场景？

    哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 不知不觉进入了五月份了,天气越 ...

  7. 1903021121-刘明伟-java十一周作业-java面向对象编程

    项目 内容 课程班级博客链接 19级信计班(本) 作业要求链接 第十一周作业 博客名称 1903021121-刘明伟-java十一周作业-java面向对象 要求 每道题要有题目,代码(使用插入代码,不 ...

  8. MinGW 和 TDM 的问题

    目前遇到的一个小问题就是批量声明时的初始化. mingw gcc 9.2:不支持int a,b,c=5; 所得数为a=0 b=0 c=5. 而在TDM gcc 5.1中,可以同时赋值. 第二个问题,T ...

  9. 10┃音视频直播系统之 WebRTC 中的数据统计和绘制统计图形

    一.数据统计 在视频直播中,还有一项比较重要,那就是数据监控 比如开发人员需要知道收了多少包.发了多少包.丢了多少包,以及每路流的流量是多少,才能评估出目前用户使用的音视频产品的服务质量是好还是坏 如 ...

  10. 脚踏实地的Netty源码研究笔记——开篇

    1. 脚踏实地的Netty源码研究笔记--开篇 1.1. Netty介绍 Netty是一个老牌的高性能网络框架.在众多开源框架中都有它的身影,比如:grpc.dubbo.seata等. 里面有着非常多 ...