vite+Vue3实现购物车

已于 2022-09-20 11:24:25 修改
阅读量936 收藏 7
点赞数 1
分类专栏： vue学习 文章标签： javascript vue.js 前端
于 2022-09-16 17:10:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43547255/article/details/126887353
版权
一、购物车页面绘制

在这里插入图片描述
创建vite项目

 npm init vite-app item_vite

安装less

npm i less less-loader -D

导入

bootstrap.css

bootcss

在App.vue中导入头部尾部以及内容区域

<template>
  <div id="mater container">
    <Head></Head>
    <BodyShop :listDate="listDate"></BodyShop>
    <FootShop></FootShop>
  </div>
</template>

<script>
import Head from "./components/header.vue";
import BodyShop from "./components/body.vue";
import FootShop from "./components/footer.vue";
import bus from "./EventBus/event";
export default {
  name: "App",
  components: {
    Head,
    BodyShop,
    FootShop,
  },
  data() {
    return {
      listDate: [
        {
          id: 1,
          picurl:
            "http://img14.360buyimg.com/n7/jfs/t1/28128/7/18573/161061/62e14d6cE1e18d640/3cf8ed57a7dabd5a.jpg",
          descript: "女士风衣",
          price: "188",
          count: 1,
          check: true,
        },
        {
          id: 2,
          picurl:
            "http://img12.360buyimg.com/n2/jfs/t1/29308/30/19373/53535/6308aebdE40f8ccb3/0b7c29e0e1623fdb.jpg",
          descript: "女士冲锋衣",
          price: "288",
          count: 1,
          check: false,
        },
      ],
    };
  },
  created() {
    bus.on("countChange", (count) => {
      console.log("数值发生变化");
    });
  },
};
</script>
<style lang="less" scoped>
#mater {
  height: 500px;
}
</style>

分别创建三个组件
body.vue


<template>
  <div class="cart-by-body">
    <ul>
      <li v-for="item in listDate" :key="item.id">
        <div class="picItem">
          <div class="left-check">
            <label class="radio-inline group_allcheck">
              <input type="checkbox" class="inputcheck" v-model="item.check" />
            </label>
          </div>
          <div class="pic">
            <img :src="item.picurl" alt="" />
          </div>
          <div class="right-box">
            <div class="top-title">{{ item.descript }}</div>
            <div class="bottom-bar">
              <div class="price">
                ￥<span>{{ item.price }}</span>
              </div>
              <ShopCount class="ev-num"></ShopCount>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import ShopCount from "./shopCountBtn.vue";
export default {
  props: {
    listDate: {
      type: Array,
      required: true,
      default: [
        {
          id: 1,
          picurl:
            "http://img14.360buyimg.com/n7/jfs/t1/28128/7/18573/161061/62e14d6cE1e18d640/3cf8ed57a7dabd5a.jpg",
          descript: "女士风衣",
          price: "188",
          count: 1,
          check: true,
        },
      ],
    },
  },
  data() {
    return {};
  },
  components: {
    ShopCount,
  },
};
</script>
<style lang="less">
.picItem {
  margin: 0 auto;
  margin-left: 0;
  margin-right: 0;
  margin-top: 40px;
  width: 95%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .pic {
    width: 30%;
    height: 100%;
    img {
      max-width: 100%;
      height: 100%;
    }
  }
}
.left-check {
  overflow: hidden;
  width: 10%;
  .inputcheck {
    margin: 0px;
  }
}

.right-box {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  .top-title {
    height: 60px;
    padding: 0 5px;
    text-align: left;
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    word-wrap: break-word;
    font-weight: 600;
  }
  .bottom-bar {
    height: 40px;
    bottom: 0;
    left: 0;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ev-num {
      width: 50%;
    }
    .price {
      color: rgb(230, 43, 43);
      font-weight: 700;
    }
  }
}

.group_allcheck {
  padding-left: 0px !important;
  margin: 0;
}
</style>

footer.vue

<template>
  <div class="foot_container">
    <div class="box">
      <ul>
        <li>
          <label class="radio-inline group_allcheck">
            <input
              type="checkbox"
              value="全选"
              v-model="check"
              class="inputcheck"
            />
            全选
          </label>
        </li>
        <li>
          合计:
          <span class="redcolor">￥232.00</span>
        </li>
        <li>
          <button
            type="button"
            class="btn btn-primary resetbtn"
            @clink="submitPrice(totalPrice)"
          >
            结算(<span>{{ totalPrice }}</span
            >)
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      totalPrice: 55,
      check: false,
    };
  },
  methods: {
    submitPrice(totalPrice) {
      console.log(totalPrice);
    },
  },
};
</script>
<style lang="less" scoped>
.foot_container {
  background-color: #fff;
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-top: 1px solid #ccc;
}
.box {
  margin: 0 auto;
  width: 95%;
  font-size: 13px;
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    li {
      float: left;
      height: 50px;
    }
  }
}

.group_allcheck {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .inputcheck {
    margin: 0px;
    margin-right: 4px;
  }
}
.redcolor {
  color: rgb(241, 123, 12);
  font-weight: 700;
}
.resetbtn {
  background: orange;
  border: none;
  height: 35px;
  border-radius: 19px;
  font-size: 12px;
}
</style>

header.vue

<!--
 * @Author: wangxue 3208230974@qq.com
 * @Date: 2022-09-15 16:35:16
 * @LastEditors: wangxue 3208230974@qq.com
 * @LastEditTime: 2022-09-15 17:57:14
 * @FilePath: \code-shopping-car\src\components\header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :style="{backgroundColor:bgcolor,color:color,fontSize:fsize+'px'}" class="header_container">{{title}}</div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "购物车",
    },
    color: {
      type: String,
      default: "white",
    },
     bgcolor: {
      type: String,
      default: "#f1bb55",
    },
    fsize: {
      type: Number,
      default: "12",
    },
  },
};
</script>
<style lang="less" scoped>
.header_container{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
</style>

按钮单独分离一个模板
shopCountBtn.vue

<template>
  <div class="numBtn">
    <div class="cutBtn btn" @click="cutFn">-</div>
    <div class="goodCount">
      <span>{{count}}</span>
    </div>
    <div class="addBtn btn" @click="addFn">+</div>
  </div>
</template>
<script>
import bus from "../EventBus/event";
export default {
  name: "shopCount",
  props: {
   goodAccount:{
       type: Number,
       default:{
           account: 1
       }
   }
  },
  data() {
    return {
      count: this.goodAccount.account,
    };
  },
  created(){
  },
  methods: {
    cutFn() {
      if (this.count >= 2) {
        this.count = this.count - 1;
        bus.emit("countChange", this.count);
      }
    },
    addFn() {
      this.count = this.count + 1;
      bus.emit("countChange", this.count);
    },
  },
};
</script>
<style scoped lang="less">
.numBtn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  .goodCount {
    width: 40%;
    height: 80%;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: rgb(114, 112, 112);
    line-height: 29px;
  }
  .btn {
    width: 30%;
  }
}
</style>

github

功能逻辑实现
全选非全选

    //全选功能
    updataAlllist(check) {
      this.listDate.forEach((v) => (v.check = !check));
    },

<template>
  <div class="foot_container">
    <div class="box">
      <ul>
        <li>
          <label class="radio-inline group_allcheck">
            <input
              type="checkbox"
              value="全选"
              v-model="check"
              class="inputcheck"
              @click="allCheck"
            />
            全选
          </label>
        </li>
        <li>
          合计:
          <span class="redcolor">￥{{totalAmount}}</span>
        </li>
        <li>
          <button
            type="button"
            class="btn btn-primary resetbtn"
            @clink="submitPrice(totalPrice)"
          >
            结算(<span>{{ goodCount }}</span
            >)
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ["totalAmount","goodCount"],
  data() {
    return {
      check: false,
    };
  },
  emits:["updataAlllist"],
  methods: {
    submitPrice(totalPrice) {
      console.log(totalPrice);
    },
      //全选功能实现
      //修改父元素中的list值
      allCheck(){
        console.log(this.check)
        this.$emit("updataAlllist",this.check)
      }
  },
};
</script>
<style lang="less" scoped>
.foot_container {
  background-color: #fff;
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-top: 1px solid #ccc;
}
.box {
  margin: 0 auto;
  width: 95%;
  font-size: 13px;
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    li {
      float: left;
      height: 50px;
    }
  }
}

.group_allcheck {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .inputcheck {
    margin: 0px;
    margin-right: 4px;
  }
}
.redcolor {
  color: rgb(241, 123, 12);
  font-weight: 700;
}
.resetbtn {
  background: orange;
  border: none;
  height: 35px;
  border-radius: 19px;
  font-size: 12px;
}
</style>

总额

  totalprice() {
      var total = 0;
      this.listDate.forEach((v) => {
        if (v.check) {
          total = v.price * v.count + total;
        }
      });
      return total;
    },

商品选择数量

   goodNum() {
    var total = 0;
    this.listDate.forEach((v) => {
      if (v.check) {
        total = total + 1;
      }
    });
    this.goodNum= total;
    return total;
  },

eventBus更改count值

  created() {
    bus.on("countChange", (map) => {
       console.log(map.goodId)
      this.listDate.forEach((v) => {
        if(v.id==map.goodId){
          this.listDate[map.goodId-1].count= map.goodCount
          // map.goodCount
        }
      });
    });
  },

在这里插入图片描述
商品管理
ui绘制
header

<template>
  <div
    :style="{ backgroundColor: bgcolor, color: color, fontSize: fsize + 'px' }"
    class="header_container"
  >
    <span>{{ title }}</span
    ><button v-if="openManage" type="button" class="btn btn-warning manage" @click="manageBtnFn" >
     完成
    </button>
    <button v-else type="button" class="btn btn-warning manage" @click="manageBtnFn" >
    管理
    </button>
  </div>
</template>
<script>
import bus from "../EventBus/event";
export default {
  data(){
    return {
      openManage:false
    };
  },
  methods: {
    manageBtnFn() {
      this.openManage = !this.openManage;
      bus.emit("changeManageBtn", this.openManage);
    },
  },
  props: {
    title: {
      type: String,
      default: "购物车",
    },
    color: {
      type: String,
      default: "white",
    },
    bgcolor: {
      type: String,
      default: "#f1bb55",
    },
    fsize: {
      type: Number,
      default: "12",
    },
  },
};
</script>
<style lang="less" scoped>
.header_container {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  .manage {
    position: absolute;
    margin-right: 7px;
    margin-top: 7px;
    right: 0;
    height: 26px;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    background-color: #f1bb55;
    &:hover {
      background-color: #ec971f;
    }
  }
}
</style>

footer

<template>
  <div class="foot_container">
    <div class="box">
      <ul>
        <li>
          <label class="radio-inline group_allcheck">
            <input
              type="checkbox"
              value="全选"
              v-model="check"
              class="inputcheck"
              @click="allCheck"
            />
            全选
          </label>
        </li>
        <li v-show="!controlDel">
          合计:
          <span class="redcolor">￥{{ totalAmount }}</span>
        </li>
        <li v-show="controlDel">
          <button type="button" class="btn btn-warning delBtn">删除</button>
        </li>
        <li v-show="!controlDel">
          <button
            type="button"
            class="btn btn-primary resetbtn"
            @click="submitPrice"
          >
            结算(<span>{{ goodCount }}</span
            >)
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import bus from "../EventBus/event";
export default {
  props: ["totalAmount", "goodCount"],
  data() {
    return {
      check: false,
      controlDel: false,
    };
  },
  created() {
    bus.on("changeManageBtn", (v) => {
      this.controlDel = v;
    });
  },
  emits: ["updataAlllist"],
  methods: {
    submitPrice() {
      console.log(this.totalAmount);
      if (this.totalAmount == 0 || this.totalAmount == "") {
        alert("请选择商品");
      } else {
        alert("当前支付金额为" + this.totalAmount);
      }
    },
    //全选功能实现
    //修改父元素中的list值
    allCheck() {
      console.log(this.check);
      this.$emit("updataAlllist", this.check);
    },
  },
};
</script>
<style lang="less" scoped>
.foot_container {
  background-color: #fff;
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-top: 1px solid #ccc;
}
.box {
  margin: 0 auto;
  width: 95%;
  font-size: 13px;
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    li {
      float: left;
      height: 50px;
    }
    .delBtn {
      width: 100px;
    }
  }
}

.group_allcheck {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .inputcheck {
    margin: 0px;
    margin-right: 4px;
  }
}
.redcolor {
  color: rgb(241, 123, 12);
  font-weight: 700;
}
.resetbtn {
  background: #f0ad4e;
  border: none;
  height: 35px;
  border-radius: 19px;
  font-size: 12px;
}
</style>

在这里插入图片描述进阶版
使用在线api以及more，filter优化

<template>
  <div>
    <Head></Head>
    <BodyShop :listDate="list"></BodyShop>
    <FootShop
      @delGoodlist="delList"
      @updataAlllist="updataAlllist"
      :totalAmount="totalprice"
      :goodCount="goodNum"
      :isFull="fullState"
    ></FootShop>
  </div>
</template>

<script>
import axios from "axios";
import Head from "./components/header.vue";
import BodyShop from "./components/body.vue";
import FootShop from "./components/footer.vue";
import bus from "./EventBus/event";
export default {
  name: "App",
  components: {
    Head,
    BodyShop,
    FootShop,
  },
  data() {
    return {
      totalprice: 0,
      goodNum: 0,
      list: [],
      fullState: false,
    };
  },
  created() {
    this.initCartList();
    bus.on("countChange", (map) => {
      this.list.some((v) => {
        if (v.id == map.goodId) {
          this.list[v.id - 1].goods_count = map.goodCount;
        }
      });
      //   this.list.forEach((v) => {
      //     if (v.id == map.goodId) {
      //       this.list[v.id - 1].goods_count = map.goodCount;
      //     }
      //   });
    });
  },
  methods: {
    async initCartList() {
      const { data: res } = await axios.get("https://www.escook.cn/api/cart");
      if (res.status === 200) {
        this.list = res.list;
      }
    },
    //全选功能
    updataAlllist(check) {
      this.list.forEach((v) => (v.goods_state = !check));
    },
    delList() {},
  },
  computed: {
    totalprice() {
      return this.list
        .filter((item) => item.goods_state)
        .reduce((t, item) => (t += item.goods_price * item.goods_count), 0);
      //   var total = 0;
      //   this.list.forEach((v) => {
      //     if (v.goods_state) {
      //       total = v.goods_price * v.goods_count + total;
      //     }
      //   });
      //   return total;
    },
    //是否是全选状态
    fullState() {
      return this.list.every((item) => item.goods_state === true);
    },
    goodNum() {
      return this.list
        .filter((item) => item.goods_state)
        .reduce((t, item) => (t += item.goods_count), 0);
    },
  },
};
</script>
<style lang="less" scoped></style>
可可鸭~
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
前端Vue实现购物车案例
04-08
Vscode编译软件 + 使用Vue实现 购物车页面 使用步骤： 1、下载资源，使用vscode打开 2、在终端里安装所有包 npm i 3、运行项目 npm run serve 4、访问 http://localhost:8080/
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
基于Vite+Vue3+TS+Nuxt3的仿爱彼迎网站源码.zip
06-21
基于Vite+Vue3+TS+Nuxt3的仿爱彼迎网站源码.zip
vue商城项目vue shop vite
最新发布
代上老码的专栏
04-10 728
Vue Shop 是一个基于 Vue.js 框架构建的电子商务平台，它利用了 Vue 的响应式数据绑定和组件化的特点，为用户提供了一种快速开发和部署在线商店的解决方案。Vite 是一种现代化的前端构建工具，它提供了快速的冷启动、即时模块热更新（HMR）和真正的按需编译，从而极大地提高了开发效率和用户体验。在 Vue Shop 的开发过程中，Vite 可以作为一个强大的工具来帮助开发者更高效地构建和优化项目。
Vue Shop Vite、Vue Admin Plus、Vue Admin Pro官网、文档
qq_16622915的博客
06-10 1259
vue3是一个渐进式的前端框架，它在保持了vue2的易用性和灵活性的同时，引入了响应式系统的重构，组合式API，模板编译的优化等等。vite是一个基于ESM的轻量级前端工具，它利用浏览器原生支持的模块系统，实现了无需打包的快速开发，同时也支持生产环境的优化构建。axios是一个基于promise的HTTP库，它可以在浏览器和node.js中使用，提供了简洁的API，拦截器，取消请求等功能。vue shop vite是一个基于vue3和vite的前端快速开发平台，它使用了最新的前端技术和架构。
vue3项目的vite改造及其配置源码
weixin_46544034的博客
10-19 1097
将原本的vue3商城项目，使用vite进行改造，提升了10倍的开发与调试速度，打包压缩体积减少到1/5
推荐6款超级好看的开源中后台前端框架
tigerhhzz的博客
10-08 829
Vue-Vben-Admin是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。Soybean Admin是一个基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版，它使用了最新流行的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于文件的路由系统以及基于 Mock 的动态权限路由，开箱即用的中后台前端解决方案。📦️ 后端路由动态渲染。
Vue的新型前端构建工具Vite怎么用
倚栏听风
10-27 1132
Vite
Vue3 —— Pinia 的学习指南以及案例分享
Bonsoir777的博客
12-09 3214
本文主要介绍pinia的使用方法
electron+vite+vue3+sqlite3基础框架
12-14
这是一个electron+vite+vue3+sqlite3基础框架，里面都已配置好，开箱即用，压缩包中写了详细的使用说明
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs...一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
最新完整Vite+Vue3+TypeScript项目实战.zip
05-10
最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新...
vue3实现简单购物车
qq_60839348的博客
03-18 863
vue3实现简单购物车
Vue3+Vite+Vant3 购物车（单选全选，数量增减，金额计算，左滑删除，空状态，结算跳转）
weixin_62918410的博客
11-07 2181
无接口，本地缓存存储购物车数据——单选全选，数量增减，金额计算，左滑删除，空状态，结算跳转
Vue学习--基础（3）--购物车案例
sinat_28753227的博客
03-01 688
使用Vue父子组件传值，实现购物车的简单功能 **1.**使用+、- 按钮控制商品数量 点击+号按钮实现每种商品数量的加1 点击-号按钮实现每种商品数量的减1，当商品数量减为0时，不能再减 **2.**通过文本框改变商品数量 在文本框中直接输入数量，当文本框失去焦点时，总价发生改变 文本框中输入数值后，点击+、- 按钮在该数值的基础上进行商品数量的加减 点击删除按钮，删除该商品 2.css部分代码 <style type="text/css"> .container
Vue3案例——使用监听器设计购物车效果
brucexia的专栏
03-14 585
在Chrome浏览器中运行程序，输入商品名称后多次单击“加一个”按钮，然后单击“加入购物车”按钮，结果如图5-25所示。本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。（2）对购物车数据进行侦听，每次单击“加入购物车”按钮，会显示商品名称和数量。【例5.18】 设计购物车效果（源代码\ch05\5.18.html）。（1）当用户每次修改预购买商品的名称的时候，都需要清空购买数量。Vue3案例——使用监听器设计购物车效果。
下一代前端开发利器——Vite（原理源码解析）
qq_31870737的博客
01-04 1748
因为js在设计之初并没有模块化的概念，随着前端业务复杂度不断提高，模块化越来越受到开发者的重视，社区开始涌现多种模块化解决方案，它们相互借鉴，也争议不断，形成多个派系，从。近些年前端工程化发展迅速，各种构建工具层出不穷，我按 npm 发版的时间列出的开发者比较熟知的一些构建工具，目前在前端构建工具中。等构建工具的诞生给前端开发带来了极大的便利，但随着前端业务的复杂化，js代码量呈指数增长，打包构建时间越来越久，发起请求，服务器简单处理后，将该模块返回给浏览器，实现真正意义的按需加载。
vue3简单购物车
m0_64590669的博客
02-12 170
vue3简单购物车
Vue.js 3.0快速入门（附电影购票APP开发实战源码）
mest的博客
04-27 3915
文章目录前言一、概述Vue是什么？MVVM是什么？MVVM模式的实现者为什么要使用MVVM二、Here we go！1、第一个Vue程序（基于idea安装vus插件开发）1.1引用vue.js 使用cdn导入1.2创建一个空项目，创建一个文件夹，new一个HTML文件2、熟悉ES 6的语法2.1为什么要使用ES 62.2块作用域构造let和const1、const常量，只能一次赋值2、对象常量3、冻结对象2.3模板字面量2.3.1 Mul....
electron+vite+vue3
07-27
Electron + Vite + Vue3 是一个强大的组合，可以用于开发跨平台的桌面应用程序。 Electron 是一个基于 Chromium 和 Node.js 的开源框架，它允许使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用程序。Vite 是一个由 Vue.js 核心团队开发的新一代前端构建工具，它具有快速的冷启动和热模块替换等优势。Vue3 是 Vue.js 的最新版本，带来了许多令人兴奋的新特性和性能优化。 使用 Electron + Vite + Vue3 可以让你轻松地构建高性能、现代化的桌面应用程序。你可以使用 Vite 来快速搭建项目结构，并且利用其快速的热重载功能进行开发。Vue3 则提供了更好的性能和开发体验，你可以使用其全新的 Composition API 来编写组件逻辑。 在使用 Electron 开发桌面应用时，你可以将 Vite 构建出的静态文件作为 Electron 的前端部分，然后使用 Electron 的主进程来控制程序的逻辑和与操作系统进行交互。 总之，Electron + Vite + Vue3 提供了一个高效且现代化的开发环境，使你能够快速构建功能丰富、高性能的桌面应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可可鸭~

想吃糖~我会甜

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值