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"
    ]
  }
}

四、总结

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

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

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

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