vue+element-plus简洁完美实现淘宝网站模板
目录一、项目介绍
二、项目截图
1.项目结构图
2.首页
3.详情
4.购物车
5.登陆页
三、源码实现
1.路由设置
2.依赖包
四、总结
一、项目介绍
项目在线预览：点击访问
本项目为vue项目，参考淘宝官方样式为主题来计划元素，简洁美观；
技能要点：vue、 路由router、element-plus、vuex、axios等；
二、项目截图
1.项目结构图
开发软件是webstorm，固然vscode、hbuilder等都可以，看本身习惯就行。
https://i-blog.csdnimg.cn/direct/10844d907f394fc4a7b2528f10f347da.png
2.首页
分为顶部+中间详细页面+底部，组件思想重复使用实现
https://i-blog.csdnimg.cn/direct/df6b9c8256024a909052a658faa3ab1c.png
https://i-blog.csdnimg.cn/direct/143e65cad067437caea807c62bfda68f.png
https://i-blog.csdnimg.cn/direct/24075235fab547f486de6389166bfd4c.png
https://i-blog.csdnimg.cn/direct/ee66cef5aacc42228d24f0184ea1e9fa.png
3.详情
参考淘宝官方样式实现
https://i-blog.csdnimg.cn/direct/e94aac6fb9554d3a83393c45082dfe2b.png
https://i-blog.csdnimg.cn/direct/d09e95946c4b417e889f8ae968fe011b.png
https://i-blog.csdnimg.cn/direct/136964b18aad42fdbbccb851e9a8bd8a.png
4.购物车
https://i-blog.csdnimg.cn/direct/c39b39a67fac44a0a985c18eb4e5e0fe.png
5.登陆页
https://i-blog.csdnimg.cn/direct/87e4c7c3711644e883756516e75425d9.png
三、源码实现
项目以组件（顶部、底部）+主布局页面配合路由构思实现，可以通过组件头脑重复使用共同的局部页面，简单且美观，也更加利于后期功能页面拓展和维护、修改等。
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"
]
}
}
四、总结
项目页面完整，后续大概将不停升级，完善其他页面。
关注作者，及时了解更多好项目！
更多优质项目请看作者主页！
获取源码或如需资助，可通过博客后面名片+作者即可！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]