从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么
浏览文章前
这一期，我分享给大家三点看源码的小技巧，这也是从别的大佬那总结的。
被反复使用的代码
这样的代码是一个软件的重点函数，一个大神的写法有很多精华值得学习。
穿越时间的代码
如果一段代码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
