简单小众电商购物项目模板：基于 Vue 3 和 Vant 4 的纯前端开发方案
开发者可以根据自身需求创建自定义主题、添加新的组件或修改现有组件的样式和行为。
文章目录
📈「作者简介」：前端开发工程师 | 蓝桥云课签约作者 | 技术日更博主 | 已过四六级
📚「个人主页」：阿珊和她的猫
🕐「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）
简单录制如下
主要练习下界面和交互，顺带简单了解下 vue3 语法。
Vue 3 是一种流行的 JavaScript 框架
Vue 3 是一种流行的 JavaScript 框架，用于构建用户界面。它是 Vue.js 框架的最新版本，相较于 Vue 2，Vue 3 引入了一些重大改进和新特性，旨在提供更好的性能、更好的开发体验和更灵活的使用方式。
以下是 Vue 3 的一些关键特性和改进：
1. 更快的渲染性能
Vue 3 的响应式系统经过重写，引入了基于 Proxy 的观察机制，提供了更高效的响应式数据追踪和更新。这种新的观察机制能够在访问响应式数据时进行动态跟踪，从而减少了不必要的依赖追踪和更新操作，提高了性能。
2. 更小的包体积
Vue 3 使用了模块化的设计方式，使得开发者可以根据需求按需引入需要的功能，从而减小了打包体积。这意味着在项目中可以只使用需要的功能模块，而不必引入整个框架。
3. Composition API
Vue 3 引入了 Composition API，这是一个基于函数的 API 风格，提供了更好的代码组织和复用性。Composition API 允许开发者根据逻辑关系将代码组织成功能模块，而不是基于组件的结构。这样，开发者可以更灵活地组织和复用逻辑代码，并在不同组件之间共享逻辑。
4. Teleport 组件
Vue 3 引入了 Teleport 组件，它可以在 DOM 树中的任何位置进行组件渲染，而不需要受限于当前组件的父元素。这使得开发者可以更便利地实现弹出框、对话框等需要在 DOM 树中指定位置渲染的功能。
5. 更好的 TypeScript 支持
Vue 3 对 TypeScript 提供了更好的支持，包括更强大的类型推导、更准确的类型推断等功能。这使得开发者在使用 TypeScript 开发 Vue 3 应用时能够获得更好的开发体验和类型安全性。
总结来说，Vue 3 带来了更快的渲染性能、更小的包体积、更灵活的组织方式和更好的 TypeScript 支持等改进和新特性。开发者可以通过升级到 Vue 3 或在新项目中使用 Vue 3 来获得这些优势，并享受更好的开发体验和性能提升。
Vant 4 是一套基于 Vue 3 的移动端 UI 组件库
Vant 4 是一套基于 Vue 3 的移动端 UI 组件库，它提供了丰富的组件和工具，用于开发具有优秀用户体验的移动应用。Vant 4 是 Vant 组件库的最新版本，相较于 Vant 2，Vant 4 经过重写和升级，采用了 Vue 3 的新特性和优势。
以下是 Vant 4 的一些关键特性和改进：
1. 基于 Vue 3
Vant 4 是完全基于 Vue 3 的，利用 Vue 3 的新特性在性能、开发体验和代码组织等方面带来了一些优势。例如，Vant 4 使用了 Vue 3 的 Composition API 来提供更好的代码组织和复用性。
2. 更小的包体积
Vant 4 采用了 Tree Shaking 技术，可以按需引入组件，从而减小了打包体积。这样，开发者只需引入需要的组件，而不是全部组件，可以有效地优化应用的性能。
3. 渐进式加载
Vant 4 提供了渐进式加载功能，将组件资源进行异步加载，只在需要时再加载相关组件。这样可以减少首次加载的文件大小，加快应用的初始化速度。
4. 插件化设计
Vant 4 通过插件化的设计，使得开发者可以自由扩展和自定义组件库的功能和样式。开发者可以根据自身需求创建自定义主题、添加新的组件或修改现有组件的样式和行为。
5. 改进的组件和交互体验
Vant 4 在原有的组件基础上进行了升级和改进，提供了更好的交互方式和用户体验。例如，Vant 4 优化了滑块组件的滑动效果、加载更多组件的加载方式等。
总而言之，Vant 4 是基于 Vue 3 的移动端 UI 组件库，具有更小的包体积、渐进式加载、插件化设计和改进的组件和交互体验等特点。通过使用 Vant 4，开发者可以快速构建出具有良好用户体验的移动应用，并享受 Vue 3 带来的性能提升和开发体验的改善。
简单截图如下
首页
首页-猜你喜欢
分类
购物车
个人页面
部分文件代码
底部导航文件
<template>
<div class="nav" id="myNav">
<div
class="nav-item-box"
v-for="(item,index) in itemArr"
:key="index"
>
<!-- :class="item.title == '书架' ? 'bookshelf_nav' : ''" -->
<div
class="nav-item"
:style="name == item.navName ? 'color:rgb(255,63,63)' : ''"
@click="to(item.navName)"
>
<div class="icon">
<i :class="item.icon"></i>
</div>
<div class="title">{{item.title}}</div>
</div>
</div>
</div>
</template>
<script>
/* eslint-disable */
import { defineComponent, ref, computed } from 'vue'
import { useRouter,useRoute } from 'vue-router'
export default defineComponent({
setup() {
let itemArr = ref([
{ title: '首页', navName: 'Index', icon: 'iconfont icon-shouye' },
{ title: '分类', navName: 'Classification', icon: 'iconfont icon-fenlei'},
{ title: '购物车', navName: 'ShoppingCart', icon: 'iconfont icon-gouwuche' },
{ title: '我的', navName: 'Mine', icon: 'iconfont icon-wode' },
])
let router = useRouter() // 全局路由对象
let route = useRoute() // 当前路由对象
let name = computed(() =>{
return route.name
})
let to = (val) =>{
if (val != name.value){
router.replace({
name: val
})
}
}
return {
itemArr,
name,
to
}
}
})
</script>
分类功能模块
<div class="content_container">
<!-- 左侧 -->
<div class="left_box">
<div v-for="(item,index) in leftList" :key="index">
<div :class="curNav.index == item.index ? 'active' : '' " class="left_box_title" @click="changeIndex(index)">{{item.title}}</div>
</div>
</div>
<!-- 右侧 -->
<div>
<van-list
v-if="curNav.index ==0"
class="right_box"
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div v-for="item in list" :key="item" class="right_good">
<div class="img "><img class="img" :src="item.src" alt=""></div>
<div class="name">{{item.title}}</div>
</div>
</van-list>
<div v-if="curNav.index !=0">
<van-empty image="error" description="暂无数据" />
</div>
</div>
</div>
<script>
/* eslint-disable */
import { defineComponent, ref } from 'vue'
import { showToast } from 'vant';
import navCom from '@/components/onlineRetailer/MyNav.vue'
export default defineComponent({
name: 'headerCom',
components: {
navCom
},
setup (props,ctx) {
let value = ref('')
let active = ref(0);
// let onChange = (index) => showToast(`标签名 ${index + 1}`);
// let onChange = (index) => {
// switch(index){
// case 0: showToast('1111111111111')
// break;
// case 1: showToast('222222222222')
// break;
// default: showToast('6666666666666')
// }
// }
let leftList = ref([
{ index: 0, title: "好货推荐" },
{ index: 1, title: "彩妆个护" },
{ index: 2, title: "食品饮料" },
{ index: 3, title: "鞋履箱包" },
{ index: 4, title: "母婴用品" },
{ index: 5, title: "生活家居" }
])
let rightList = ref([
{ title: '麦菜' },
{ title: '芥兰' }
])
let list = ref([
{ title: '坚定不移', src: require('@/assets/newProducts/2.jpg')},
{ title: '壮志凌云', src: require('@/assets/newProducts/1.jpg')},
{ title: '奋发图强', src: require('@/assets/newProducts/3.jpg')},
{ title: '坚持不懈', src: require('@/assets/newProducts/4.jpg')},
{ title: '朝气蓬勃', src: require('@/assets/newProducts/5.jpg')},
{ title: '力争上游', src: require('@/assets/newProducts/6.jpg')},
{ title: '坚定不移', src: require('@/assets/newProducts/2.jpg')},
{ title: '壮志凌云', src: require('@/assets/newProducts/1.jpg')},
]);
let loading = ref(false);
let finished = ref(false);
let curNav = ref({
index: 0,
})
let changeIndex = (index) =>{
curNav.value.index = index
}
let onLoad = () => {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
// setTimeout(() => {
// for (let i = 0; i < 6; i++) {
// list.value.push(list.value.length + 1);
// }
// 加载状态结束
loading.value = false;
console.log('list.value.length',list.value.length)
// 数据全部加载完成
if (list.value.length >= 20) {
finished.value = true;
}
// }, 1000);
};
return {
value,
active,
// onChange,
leftList,
rightList,
list,
onLoad,
loading,
finished,
curNav,
changeIndex
}
}
})
</script>
附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献7条内容
所有评论(0)