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

2021-07-14 09:57:51 阅读：155 来源： 互联网

浏览文章前

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

被反复使用的代码
这样的代码是一个软件的重点函数，一个大神的写法有很多精华值得学习。
穿越时间的代码
如果一段代码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",
            },

标签：Vue,项目,html,全栈,文件夹,重载,脚手架
来源： https://blog.csdn.net/weixin_44519496/article/details/118693321

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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