浏览文章前

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

被反复使用的代码

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

穿越时间的代码

如果一段代码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. Mysql 8 使用过程中的命令记录

    Mysql 8 使用过程中的命令记录 注: 当前 MySQL 数据库的版本 8.0.27 修改密码 1. 使用其他用户修改root 密码 ALTER USER 'root'@'localhost' I ...

  2. QT-notepad++仿写

    最近小忙,准备学习下FFMPEG 涉及:工具栏使用,QAction,文件基本读写操作 Github地址:https://github.com/wsdassssss/notepad-

  3. 约定编程与Sping AOP

    一.约定编程 Spring AOP是一种约定流程的编程,咱们可以先通过动态代理模式的实现来理解Spring AOP的概念. 代理的逻辑很简单,例如,当你需要采访一名儿童时,首先需要经过他父母的同意,在 ...

  4. petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive

    本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现. Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是 ...

  5. C/C++指针、函数、结构体、共用体

    指针 变量与地址 变量给谁用的? 变量是对某一块空间的抽象命名. 变量名就是你抽象出来的某块空间的别名. 指针就是地址.指向某个地址. 指针与指针变量 指针是指向某块地址.指针(地址)是常量. 指针变 ...

  6. 4.18-token验证

    在postman编写的每一个叫测试用例,既然收测试用例,那么就会有结果对比 API测试断言tests(判断一个接口测试用例是否成功,或者说是通过,是根据断言的三个条件都成立的情况下得到的结果) 协议状 ...

  7. HMS Core分析服务助您掌握用户分层密码，实现整体收益提升

    随着市场愈发成熟,开发者从平衡收益和风险的角度开始逐步探索混合变现的优势,内购+广告就是目前市场上混合变现的主要方式之一. 对于混合变现模式,您是否有这样的困惑: 如何判断哪些用户更愿意看广告.哪些用 ...

  8. JS 一些概念

    JS 内存机制 基本类型: String | Boolean | Undefined | Number | Nll | Symbol 数据保存在"栈"--先进后出. 数据类型: A ...

  9. arts-week11

    Algorithm 69. Sqrt(x) - LeetCode Review Building a network attached storage device with a Raspberry ...

  10. 167. Two Sum II - Input array is sorted - LeetCode

    Question 167. Two Sum II - Input array is sorted Solution 题目大意:和Two Sum一样,这里给出的数组是有序的 思路:target - nu ...