浏览文章前

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

被反复使用的代码

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

穿越时间的代码

如果一段代码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. CF #781 (Div. 2), (C) Tree Infection

    Problem - C - Codeforces Example input 5 7 1 1 1 2 2 4 5 5 5 1 4 2 1 3 3 1 6 1 1 1 1 1 output 4 4 2 ...

  2. 【简单dfs】Bubble Cup 14 - Finals Online Mirror (Unrated, ICPC Rules, Teams Preferred, Div. 2), problem: (J) Robot Factory,

    传送门  Problem - 1600J - Codeforces 题目   题意 给定n行m列, 求每个连通块由多少格子组成,并将格子数从大到小排序输出 对于每个格子都有一个数(0~15),将其转化 ...

  3. 2021.08.16 P1260 工程规划（差分约束）

    2021.08.16 P1260 工程规划(差分约束) 重点: 1.跑最短路是为了满足更多约束条件. P1260 工程规划 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意: 造 ...

  4. Android第十一、十二周作业

    图片一 用内部存储实现文件写入和读取功能 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...

  5. 数据建模软件Chiner，颜值与实用性并存

    目录 一.chiner介绍 二.值得关注的功能点 2.1. 兼容各种格式的数据建模文件 2.2. 支持多数据库.代码生成 2.3. 支持逻辑视图与物理视图设计 2.4. 自动生成数据库文档 三.总结 ...

  6. 一种O(n)时间复杂度的计数排序算法和Top N热词算法

    排序算法是研究非常广泛且超级经典的算法,主流排序算法的时间复杂度基本都在O(nlogn). 今天就介绍一种以hash表为基础的,时间复杂度能够达到O(n)的排序算法--计数排序: 同时基于它的思想,完 ...

  7. Day 005：PAT练习--1047. 编程团体赛(20)

    编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜.现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正整 ...

  8. Git&Gitee

    目录 Git Git介绍 安装 命令学习 Git的作用 git与svn比较 Git,GitHub,GitLab,Gitee Git工作流程 Git常用命令 在仓库目录终端下 - 设置全局用户 在仓库目 ...

  9. EntityFramwork常见问题

    1.常用的语句有哪些 添加migration      dotnet ef migrations add [MIgrationName] 删除刚添加的migration      dotnet ef ...

  10. Java SE 01

    强类型语言 要求变量的使用要严格符合规定,所有变量都必须先定义后使用 Java的数据类型分为两大类 基本类型(promitive type) 数值类型 ① 整数类型 byte 占1个字节范围:-128 ...