vue+element-plus简洁完美实现淘宝网站模板

目录

一、项目介绍

二、项目截图

1.项目结构图

2.首页

3.详情

4.购物车

5.登陆页

三、源码实现

1.路由配置

2.依赖包

四、总结

---

一、项目介绍

项目在线预览：点击访问

本项目为vue项目，参考淘宝官方样式为主题来设计元素，简洁美观；

技术要点：vue、 路由router、element-plus、vuex、axios等；

二、项目截图

1.项目结构图

开发软件是webstorm，当然vscode、hbuilder等都可以，看自己习惯就行。

2.首页

分为顶部+中间具体页面+底部，组件思想重复利用实现 

3.详情

参考淘宝官方样式实现

4.购物车

5.登陆页

三、源码实现

 项目以组件（顶部、底部）+主布局页面配合路由构思实现，可以通过组件思维重复利用共同的局部页面，简单且美观，也更加利于后期功能页面拓展和维护、修改等。

1.路由配置

import { createRouter, createWebHistory } from 'vue-router'
// import { useUserStore } from '@/stores'const router = createRouter({// history: createWebHistory(import.meta.env.BASE_URL),history: createWebHistory(import.meta.env.VITE_APP_BASE_PATH),routes: [{name: '首页',path: '/',component: () => import('@/views/layout/index.vue'),redirect: '/index',children: [{name: '首页',path: '/index',component: () => import('@/views/home/index.vue')},{name: '详情',path: '/detail',component: () => import('@/views/detail/index.vue')},{name: '购物车',path: '/cart',component: () => import('@/views/cart/index.vue')}],},{path: '/login',name: '登录页',component: () =>import( /* webpackChunkName: "page" */ '@/views/login/index.vue')}]
})// 登录访问拦截 => 默认是直接放行的
// 根据返回值决定，是放行还是拦截
// 返回值：
// 1. undefined / true  直接放行
// 2. false 拦回from的地址页面
// 3. 具体路径 或 路径对象  拦截到对应的地址
//    '/login'   { name: 'login' }
// router.beforeEach((to) => {
//   // 如果没有token, 且访问的是非登录页，拦截到登录，其他情况正常放行
//   const useStore = useUserStore()
//   if (!useStore.token && to.path !== '/login3') return '/login3'
// })export default router

2.依赖包

{"name": "vue3-project","version": "0.0.0","private": true,"scripts": {"dev": "vite","build": "vite build --mode prod","preview": "vite preview","lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","format": "prettier --write src/","prepare": "husky install","lint-staged": "lint-staged"},"dependencies": {"@element-plus/icons-vue": "^2.3.0","@vant/area-data": "^1.5.1","@vueup/vue-quill": "^1.2.0","axios": "^1.4.0","element-china-area-data": "^6.1.0","element-plus": "^2.3.7","express-jwt": "^8.4.1","jsonwebtoken": "^9.0.2","pinia": "^2.1.3","vant": "^4.9.0","vite-plugin-style-import": "^2.0.0","vue": "^3.4.0","vue-router": "^4.2.2","vuex": "^4.1.0","qrcode-generator": "^1.4.4"},"devDependencies": {"@rushstack/eslint-patch": "^1.2.0","@vitejs/plugin-vue": "^4.2.3","@vue/eslint-config-prettier": "^7.1.0","eslint": "^8.39.0","eslint-plugin-vue": "^9.11.0","husky": "^8.0.0","lint-staged": "^13.2.3","pinia-plugin-persistedstate": "^3.1.0","prettier": "^2.8.8","sass": "^1.63.6","unplugin-auto-import": "^0.16.6","unplugin-vue-components": "^0.25.1","vite": "^4.3.9"},"lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}

四、总结

项目页面完整，后续可能将不断升级，完善其他页面。

关注作者，及时了解更多好项目！

更多优质项目请看作者主页！

获取源码或如需帮助，可通过博客后面名片+作者即可！