VueCli+vuex+router+BootStrap实现购物商城部分

最新推荐文章于 2022-10-24 20:26:56 发布
置顶 最新推荐文章于 2022-10-24 20:26:56 发布
阅读量583 收藏 3
点赞数 10
分类专栏： BootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44364444/article/details/105023034
版权

1.工程目录

index.html 

<!doctype html>
<html lang="en">
  <head>
    <title>购物商城</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Nav.vue

<template>
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- <a class="navbar-brand" href="#">电商网站实例</a> -->
    <router-link class="navbar-brand" to="/">电商网站实例</router-link>

    <!-- <a class="navbar-brand" href="#">加入购物车</a> -->
    <router-link class="navbar-brand offset-10" to="/cart">
      购物车
      <!-- <span v-if="cartList.length">{{ cartList.length }}</span>
      -->
      <span
      v-if="cartList.length"
       class="badge badge-pill badge-danger">{{ cartList.length }}</span>
    </router-link>
  </nav>
</template>


<script>
import { mapState } from "vuex";
export default {
  name: "Nav",

  computed: {
    ...mapState(["cartList"])
  }
};
</script>

router的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Cart from '../views/Cart.vue'
import Product from '../views/Product.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'List',
    component: List
  },

  {
    path:'/product/:id',
    name:'Product',
    component:Product,
    props:true
  },
  
  {
    path: '/cart',
    name: 'Cart',
    component:Cart
   
  }
]

const router = new VueRouter({
  routes,
  // 去掉#
  mode:'history'
})

export default router

store的index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {


  // 购物车列表
  cartList: [],
  // 商品列表
  productList: [
    {
      id: 1,
      name: 'AirPods',
      brand: 'Apple',
      image: require('../assets/1.jpg'),
      sales: 10000,
      cost: 1288,
      color: '白色'
    },
    {
      id: 2,
      name: 'BeatsX 入耳式耳机',
      brand: 'Beats',
      image: require('../assets/2.jpg'),
      sales: 11000,
      cost: 1188,
      color: '白色'
    },
    {
      id: 3,
      name: 'Beats Solo3 Wireless 头戴式式耳机',
      brand: 'Beats',
      image: require('../assets/3.jpg'),
      sales: 5000,
      cost: 2288,
      color: '金色'
    },
    {
      id: 4,
      name: 'Beats Pill+ 便携式扬声器',
      brand: 'Beats',
      image: require('../assets/4.jpg'),
      sales: 3000,
      cost: 1888,
      color: '红色'
    },
    {
      id: 5,
      name: 'Sonos PLAY:1 无线扬声器',
      brand: 'Sonos',
      image: require('../assets/5.jpg'),
      sales: 8000,
      cost: 1578,
      color: '白色'
    },
    {
      id: 6,
      name: 'Powerbeats3 by Dr. Dre Wireless 入耳式耳机',
      brand: 'Beats',
      image: require('../assets/6.jpg'),
      sales: 12000,
      cost: 1488,
      color: '金色'
    },
    {
      id: 7,
      name: 'Beats EP 头戴式耳机',
      brand: 'Beats',
      image: require('../assets/7.jpg'),
      sales: 25000,
      cost: 788,
      color: '蓝色'
    },
    {
      id: 8,
      name: 'B&O PLAY BeoPlay A1 便携式蓝牙扬声器',
      brand: 'B&O',
      image: require('../assets/8.jpg'),
      sales: 15000,
      cost: 1898,
      color: '金色'
    },
    {
      id: 9,
      name: 'Bose® QuietComfort® 35 无线耳机',
      brand: 'Bose',
      image: require('../assets/9.jpg'),
      sales: 14000,
      cost: 2878,
      color: '蓝色'
    },
    {
      id: 10,
      name: 'B&O PLAY Beoplay H4 无线头戴式耳机',
      brand: 'B&O',
      image: require('../assets/10.jpg'),
      sales: 9000,
      cost: 2298,
      color: '金色'
    }
  ],

  // 数组排重
  getFilterArray(array) {
    const res = [];
    const json = {};
    for (let i = 0; i < array.length; i++) {
      const _self = array[i];
      if (!json[_self]) {
        res.push(_self);
        json[_self] = 1;
      }
    }
    return res;
  }
}


const getters = {
  // 去掉重复的品牌
  brands: state => {
    const brands = state.productList.map(item => item.brand);
    return state.getFilterArray(brands);
  },


  // 去掉重复的颜色
  colors: state => {
    const colors = state.productList.map(item => item.color);
    return state.getFilterArray(colors);
  }
}

const mutations = {

  // 将商品添加进购物车的方法
  addCart(state,id){
     // 先判断购物车是否已有，如果有，数量+1
     const isAdded = state.cartList.find(item => item.id === id);
     if (isAdded) {
         isAdded.count ++;
     } else {
         state.cartList.push({
             id: id,
             count: 1
         })
     }
  },

     // 修改商品数量
     editCartCount (state, payload) {
      const product = state.cartList.find(item => item.id === payload.id);
      product.count += payload.count;
  },

    // 删除商品
    deleteCart (state, id) {
     
      state.cartList.splice(id, 1);
  },

   // 清空购物车
   emptyCart (state) {
    state.cartList = [];
}

}
export default new Vuex.Store({
  state: state,
  mutations: mutations,

  actions: {
      // 购买
      buy (context) {
        // 真实环境应通过 ajax 提交购买请求后再清空购物列表
        return new Promise(resolve=> {
            setTimeout(() => {
                context.commit('emptyCart');
                resolve();
            }, 500)
        });
    }
  },
  modules: {
  },

  getters: getters
})

Cart.vue

<template>
  <div class="container-fluid mt-3">
    <h6>购物清单</h6>
    <!-- 表格 -->
    <table class="table table-striped">
      <thead>
        <tr>
          <th>商品信息</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="!cartList.length">
          <td class="text-center" colspan="5">购物车为空</td>
        </tr>
        <tr v-else v-for="(item, index) in cartList" :key="index">
          <td>
            <img :src="productList[item.id].image" alt height="50px" />
            {{productList[item.id].name}}
          </td>
          <td>{{productList[item.id].cost}}</td>
          <td>
            <button @click="handleCount(index,1)" type="button" class="btn">+</button>
            {{item.count}}
            <button
              @click="handleCount(index,-1)"
              type="button"
              class="btn"
            >-</button>
          </td>

          <td>¥ {{productList[item.id].cost * item.count }}</td>
          <td>
            <!-- 删除按钮 -->
            <button @click="deleteCart(index)" type="button" class="btn btn-danger">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-show="cartList.length" class="float-right">
      <div class="row px-5">
        <h6>共计{{ countAll }}件商品</h6>
        <h6>应付总额￥{{costAll}}</h6>
        <button
        @click="handleOrder()"
         type="button" class="btn btn-primary mx-2">现在结算</button>
      </div>
    </div>
  </div>
</template>


<script>
// 导入vuex
import { mapState, mapMutations } from "vuex";
export default {
  name: "Cart",

  methods: {
    ...mapMutations(["deleteCart", "editCartCount"," handleOrder"]),

    // 计算count变化的方法
    handleCount(index, count) {
      if (count < 0 && this.cartList[index].count === 1) return;
      this.$store.commit("editCartCount", {
        id: this.cartList[index].id,
        count: count
      });
    },

     handleOrder () {
                this.$store.dispatch('buy').then(() => {
                    window.alert('购买成功');
                })
            }
  },

  computed: {
    ...mapState(["cartList", "productList"]),

    // 计算商品的数量
    countAll() {
      let count = 0;
      this.cartList.forEach(item => {
        count += item.count;
      });
      return count;
    },
    // 计算总金额
    costAll() {
      let cost = 0;
      this.cartList.forEach(item => {
        cost += this.productList[item.id].cost * item.count;
      });
      return cost;
    }
  }
};
</script>

List.vue

// List.vue

<template>
  <div>
    <!-- 列表 -->
    <div class="mt-3">
      <div>
        <span>品牌：</span>
        <!-- 按钮 -->
        <button
          v-for="(item, index) in brands"
          :key="index"
          :class="{on: item === filterBrand}"
          type="button"
          class="btn btn-outline-primary mx-2"
          @click="handleFilterBrand(item)"
        >{{item}}</button>
      </div>
      <div class="my-2">
        <span>颜色：</span>
        <!-- 按钮 -->
        <button
          v-for="(item, index) in colors"
          :key="index"
          type="button"
          :class="{on: item === filterColor}"
          class="btn btn-outline-primary mx-2"
          @click="handleFilterColor(item)"
        >{{item}}</button>
      </div>
      <div>
        <span>排序：</span>
        <!-- 按钮 -->
        <button
          :class="{on: order === ''}"
          @click="handleOrderDefault"
          type="button"
          class="btn btn-outline-danger mx-2"
        >默认</button>
        <button
          :class="{on: order === 'sales'}"
          @click="handleOrderSales"
          type="button"
          class="btn btn-outline-danger mx-2"
        >销量</button>
        <button
          :class="{on: order.indexOf('cost') > -1}"
          @click="handleOrderCost"
          type="button"
          class="btn btn-outline-danger mx-2"
        >价格</button>
      </div>
    </div>
    <!-- 卡片 -->
    <div class="row mt-4" >
      <div v-for="(item, index) in   filteredAndOrderedList" :key="index" class="col-lg-3">
        <!-- <div class="card mt-3">
          <img class="card-img-top" :src="item.image" alt />
          <div class="card-body">
            <h4 class="card-title">{{item.name}}</h4>
            <h4 class="card-title">{{item.color}}</h4>
            <p class="card-text">￥：{{item.cost}}</p>
          </div>
        </div>-->
        <router-link class="card mt-3" :to="{name:'Product',params:{id:item.id}}">
          <img class="card-img-top" :src="item.image" />
          <div class="card-body">
            <h4 class="card-title">{{item.name}}</h4>
            <h4 class="card-title">{{item.color}}</h4>
            <p class="card-text">￥：{{item.cost}}</p>
          </div>
        </router-link>
      </div>
    </div>
    <div class="product-not-found" v-show="!filteredAndOrderedList.length">暂无相关商品</div>
  </div>
</template>


<script>
// 导入vuex
import { mapState, mapGetters } from "vuex";
export default {
  name: "List",
  data() {
    return {
      // 过滤后的品牌
      filterBrand: "",
      // 过滤后的颜色
      filterColor: "",
      // 排序
      order: ""
    };
  },
  methods: {
    // 过滤品牌的方法
    handleFilterBrand(brand) {
      if (this.filterBrand === brand) {
        this.filterBrand = "";
      } else {
        this.filterBrand = brand;
      }
    },
    // 过滤颜色的方法
    handleFilterColor(color) {
      if (this.filterColor === color) {
        this.filterColor = "";
      } else {
        this.filterColor = color;
      }
    },
    // 默认排序的方法
    handleOrderDefault() {
      this.order = "";
    },
    // 按照销量排序的方法
    handleOrderSales() {
      this.order = "sales";
    },
    // 按照价格排序的方法
    handleOrderCost() {
      if (this.order === "cost-desc") {
        this.order = "cost-asc";
      } else {
        this.order = "cost-desc";
      }
    }
  },

  computed: {
    // 映射
    ...mapState(["productList"]),

    ...mapGetters(["brands", "colors"]),

    //根据条件计算过滤后的list
    filteredAndOrderedList() {
      let list = this.productList;
      // 按品牌过滤
      if (this.filterBrand !== "") {
        list = list.filter(item => item.brand === this.filterBrand);
      }
      // 按颜色过滤
      if (this.filterColor !== "") {
        list = list.filter(item => item.color === this.filterColor);
      }
      // 排序
      if (this.order !== "") {
        if (this.order === "sales") {
          list = list.sort((a, b) => b.sales - a.sales);
        } else if (this.order === "cost-desc") {
          list = list.sort((a, b) => b.cost - a.cost);
        } else if (this.order === "cost-asc") {
          list = list.sort((a, b) => a.cost - b.cost);
        }
      }
      return list;
    }
  }
};
</script>

Product.vue

// 商品详情

<template>
  <!-- 卡片 -->
  <div class="row mt-3">
    <div class="col-lg-6">
      <img :src="product.image" alt  height="500px" width="500px"/>
    </div>

    <div class="col-lg-6">
      <div class="row">
        <div>
          <h4>{{product.name}}</h4>
          <p>￥：{{product.cost}}</p>
          <span class="mr-3">尺码</span>
          <!-- 按钮 -->
          <button
            v-for="(item, index) in sizeList"
            :key="index"
            type="button"
            class="btn btn-outline-danger mx-1"
          >{{item}}</button>
        </div>
      </div>

      <div>
        <div class="row mt-3">
          <span class="mr-3">数量</span>
          <div class="form-group">
            <select class="form-control" name id>
              <option v-for="(n, index) in 100" :key="index">{{n}}</option>
            </select>
          </div>
        </div>

        <div>
          <div class="row">
            <span class="mr-5">花呗分期</span>
            <div class="row">
              <!-- <button type="button" class="btn btn-primary">￥43.64x3期（包含手续费）</button> -->
              <p>登录后确认是否享有该服务</p>
              <a href>什么是花呗分期</a>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-6">
               <button type="button" class="btn btn-outline-primary my-2">￥43.64x3期（包含手续费）</button>
            <button type="button" class="btn btn-outline-primary">￥22.29x6期（包含手续费）</button>
            </div>
           <div class="col-lg-6 ">
            <button type="button" class="btn btn-outline-primary my-2">￥11.46x12期（包含手续费）</button>
            <button type="button" class="btn btn-outline-primary">￥5.046x24期（包含手续费）</button>
           </div>
          </div>

          <!-- 加入购物车 -->
          <div class="row mt-3">
            <div class="col-lg-6 col-sm-12">
              <button @click="buy()" type="button" name id class="btn btn-danger btn-lg btn-block">立即购买</button>
            </div>
            <div class="col-lg-6 col-sm-12">
              <button
                @click="handleAddToCart"
                type="button"
                name
                id
                class="btn btn-primary btn-lg btn-block"
              >加入购物车</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { mapState } from "vuex";
export default {
  name: "Product",
  //
  props: ["id"],

  data() {
    return {
      product: "",

      // 尺码
      sizeList: ["M", "L", "XL", "2XL", "3XL"]
    };
  },

  methods: {
    // 过滤productList
    getProduct() {
      //  console.log(this.id);

      this.product = this.productList.find(item => item.id === this.id);
      // console.log(this.product);
    },

    // 加入购物车
    handleAddToCart() {
      this.$store.commit("addCart", this.id);
    },

    // 立即购买的方法
    buy(){
      alert('购买成功,请返回')
    }
  },

  computed: {
    ...mapState(["productList"])
  },

  //
  mounted() {
    this.getProduct();
  }
};
</script>

App.vue

<template>
  <div id="app">
   <Nav/>
    <!-- 容器 -->
    <div class="container-fluid">
        <router-view/>
    </div>
  
  </div>
</template>


<script>
// 导入
import Nav from './components/Nav'
export default {
  name:'App',

  components:{
    Nav
  }
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

命令行运行：

最小的帆也能远航
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
轻量级的多功能电子商务Bootstrap模板-VueShop
06-06
VueShop是清洁,轻量级的多功能电子商务HTML5模板，这套Bootstrap电商模板将让你网站看起来更令人印象深刻,对观众的很吸引力。适合在线销售时尚、服装、太阳镜、配件、大型商店,手表,化妆品,衣服,包,包店,化妆品等等商品。模板高度可定制，看起来很棒在平板电脑和移动设备上。我们包括web开发的最佳实践,您可以创建伟大的网站布局基于Bootstrap网格1170px。
基于Web的网络商城项目设计与实现【SSM+Bootstrap+Vue】
08-27 5383
【Spring+SpringMVC+MyBatis+Bootstrap+Vue】 演示：线路1 线路2 1.系统功能介绍 网上商城系统是一个功能完善的在线购物系统 - ，主要为在线销售和在线购物服务。其功能主要包含商品的管理，会员的管理，订单的管理，库存的管理，价格的管理，在线支付等。主要功能分为前台功能模块和后台功能模块。项目采用前后端分离的架构开发。 ...
vue3 快速上手（中
Robo的博客
09-14 97
vue3快速上手 配合简易demo和官方文档快速学习
Vue实例结合Bootstrap-商城购物车效果
qq_42381297的博客
09-07 1460
目前在学习Vue2.x 跟教程一起写的购物车实例，课程只讲获取数据和功能的实现，所以自己搭了一个简单界面，中间也遇到过问题，获取数据显示XML解析失败，后来发现我应该把项目放到服务器上运行，报错消失了。 下面是代码，供大家参考 &lt;%@ page language="java" import="java.util.*" pageEncoding="GB18030"%&gt; &lt;% ...
基于Vue3在线商城（Vue3+VueCLI+VueRouter+vuex+axios+Bootstrap）
yuhaowen的博客
08-31 6538
基于Vue3在线商城（Vue3+VueCLI+VueRouter+vuex+axios+Bootstrap）点击系统页面“我的购物车”、“我的订单”、“加入购物车”功能按钮。5、点击结算按钮后，会移除购物车内所选的商品，留下未勾选的商品。上学期期末的实训项目，现在都快开学了，现在才将其分享出来，2、对某类商品进行数量增减进行操作，小计价格随之变化。的Mock Servers进行部署API。虽然和之前的那个javaweb商城好些了，1、对商品收货人的姓名、地址进行修改。4、计算勾选商品的数量，总价。.....
基于bootstrap+vue+html开发的喜茶订单页面项目
qq_58372242的博客
10-24 2080
大家好,这里是果力成,很久没更了，甚是想念CSDN的大家！毕竟今天是属于我们程序猿的节日，还是需要回来看看的哈哈哈。其实我自认为也没达到一个正规的程序员的标准，但也跟程序打交道了不少时间，在学习编程的那段时间，思维上无疑是对我们有了很大的提升的。拥有编程思维，无论是不是从事IT行业，都对我们处理事情、工作有帮助。今天给大家带来一个前端的简单网页设计制作,利用框架写了一个小页面。前端嘛，所见即所得，虽然目前的主流开源框架都很成熟，但当时其中的三件套学习过程也是很让我着迷啊。
基于vue2和bootstrap做的一个购物后台管理平台
08-12
基于vue2和bootstrap做的一个购物后台管理平台
vue实现商城系统
lwhstart的博客
06-22 1371
vue加bootstrap实现商城系统
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
vue+vuex+vue-router+axios+elementui
12-24
基于vue2.x+vuex+vue-router+axios+elementui的一套后台开发系统模板
一个Vuejs20项目与Bootstrap集成vue官方在线示例组件
08-08
一个Vue.js2.0项目与Bootstrap集成vue官方在线示例组件
vue3+ts+vite+router+vuex+api请求封装
12-29
后台管理系统脚手架
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
05-23
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
基于Vue+Vue-router+Vuex+Element-ui+Axios商城
06-27
本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、...
基于Vue+Vuex+iView的电子商城网站
weixin_34272308的博客
06-30 2416
MALL-VUE 这是一个基于VUE + VUEX + iView做的一个电商网站前端项目, 附带前后端分离实现版本(在forMallServer分支)，欢迎fork或star 项目地址: https://github.com/PowerDos/Mall-Vue 项目预览地址(demo)： https://powerdos.githu...
一个vue2.0+vuex+vue-router搭建的单页潮流购物网站
前端说
02-12 7658
项目demo地址 github源码地址首页如果觉得不错，给github源码点个赞吧QAQ前言这篇文章是总结自己写项目时的思路，遇到的问题，和学到的东西，本文只截取一部分来讲，源码已奉上，觉得项目还行的点个赞吧，谢谢一、搭建环境 安装vue-clinpm install -g vue-cli 创建webpack项目 vue init webpack vogue cd vogue 安装依赖npm i
实战Vue：基于Vue的移动端购物商城
热门推荐
KaiSarH
11-27 6万+
基于Vue的移动端购物商城
vue2.0+bootstrap实战（一）
weixin_34185364的博客
01-09 2313
俗话说，纸上学来终觉浅，绝知此事要躬行，最近两天学习了下Vue2.0,想做个项目练下手，顺便写个文章方便复习回顾~ 1.使用cue-cli创建vue项目 进入指定目录，右击Git Bash Here打开git命令行，vue init webpack 项目名称，创建基于webpack的vue项目 根据命令行的提示，选择是否安装vue-ro...
vue 前端商城框架_前端工程师要掌握几个Vue框架
weixin_30193269的博客
01-12 1302
vue是一套用于构建用户界面的渐进式JavaScript框架，简单说Vue是类似于view的前端框架。vue开发核心是关注视图层，同时它更加容易与第三方库结合，再者我们在现有的项目中可以直接整合一起。目前vue技术社区在英文或中文都非常丰富，社区都有很多经验丰富的开发人员，其功能也非常丰富与使用性，属于轻量级框架。vue还有一个优点是容易学习，有前端经验的开发者容易上手，所以请前端开发者要掌握几个...
 熟悉vue+vuex+vue-router技术栈
最新发布
05-02
Vue、Vuex 和 Vue Router 是构建现代 Web 应用程序的三个核心技术之一。 Vue 是一个基于组件化开发的渐进式框架，它可以用于构建单页面应用程序（SPA）和多页面应用程序（MPA）。Vue 具有轻量级、高效、灵活、易用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值