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.路由设置

1. import { createRouter, createWebHistory } from 'vue-router'
2. // import { useUserStore } from '@/stores'
4. const router = createRouter({
5.   // history: createWebHistory(import.meta.env.BASE_URL),
6.   history: createWebHistory(import.meta.env.VITE_APP_BASE_PATH),
7.   routes: [
8.     {
9.       name: '首页',
10.       path: '/',
11.       component: () => import('@/views/layout/index.vue'),
12.       redirect: '/index',
13.       children: [
14.         {
15.           name: '首页',
16.           path: '/index',
17.           component: () => import('@/views/home/index.vue')
18.         },
19.         {
20.           name: '详情',
21.           path: '/detail',
22.           component: () => import('@/views/detail/index.vue')
23.         },
24.         {
25.           name: '购物车',
26.           path: '/cart',
27.           component: () => import('@/views/cart/index.vue')
28.         }
29.       ],
30.     },
31.     {
32.       path: '/login',
33.       name: '登录页',
34.       component: () =>
35.         import( /* webpackChunkName: "page" */ '@/views/login/index.vue')
36.     }
37.   ]
38. })
40. // 登录访问拦截 => 默认是直接放行的
41. // 根据返回值决定，是放行还是拦截
42. // 返回值：
43. // 1. undefined / true  直接放行
44. // 2. false 拦回from的地址页面
45. // 3. 具体路径 或 路径对象  拦截到对应的地址
46. //    '/login'   { name: 'login' }
47. // router.beforeEach((to) => {
48. //   // 如果没有token, 且访问的是非登录页，拦截到登录，其他情况正常放行
49. //   const useStore = useUserStore()
50. //   if (!useStore.token && to.path !== '/login3') return '/login3'
51. // })
53. export default router

复制代码

2.依赖包

1. {
2.   "name": "vue3-project",
3.   "version": "0.0.0",
4.   "private": true,
5.   "scripts": {
6.     "dev": "vite",
7.     "build": "vite build --mode prod",
8.     "preview": "vite preview",
9.     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
10.     "format": "prettier --write src/",
11.     "prepare": "husky install",
12.     "lint-staged": "lint-staged"
13.   },
14.   "dependencies": {
15.     "@element-plus/icons-vue": "^2.3.0",
16.     "@vant/area-data": "^1.5.1",
17.     "@vueup/vue-quill": "^1.2.0",
18.     "axios": "^1.4.0",
19.     "element-china-area-data": "^6.1.0",
20.     "element-plus": "^2.3.7",
21.     "express-jwt": "^8.4.1",
22.     "jsonwebtoken": "^9.0.2",
23.     "pinia": "^2.1.3",
24.     "vant": "^4.9.0",
25.     "vite-plugin-style-import": "^2.0.0",
26.     "vue": "^3.4.0",
27.     "vue-router": "^4.2.2",
28.     "vuex": "^4.1.0",
29.     "qrcode-generator": "^1.4.4"
30.   },
31.   "devDependencies": {
32.     "@rushstack/eslint-patch": "^1.2.0",
33.     "@vitejs/plugin-vue": "^4.2.3",
34.     "@vue/eslint-config-prettier": "^7.1.0",
35.     "eslint": "^8.39.0",
36.     "eslint-plugin-vue": "^9.11.0",
37.     "husky": "^8.0.0",
38.     "lint-staged": "^13.2.3",
39.     "pinia-plugin-persistedstate": "^3.1.0",
40.     "prettier": "^2.8.8",
41.     "sass": "^1.63.6",
42.     "unplugin-auto-import": "^0.16.6",
43.     "unplugin-vue-components": "^0.25.1",
44.     "vite": "^4.3.9"
45.   },
46.   "lint-staged": {
47.     "*.{js,ts,vue}": [
48.       "eslint --fix"
49.     ]
50.   }
51. }

复制代码

四、总结

项目页面完整，后续大概将不停升级，完善其他页面。
关注作者，及时了解更多好项目！
更多优质项目请看作者主页！
获取源码或如需资助，可通过博客后面名片+作者即可！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。