网站关键词排名消失,wordpress时间格式,做外文网站,甘肃泾川县门户网站两学一做目录 一、项目介绍
二、项目截图
1.项目结构图
2.首页
3.详情
4.购物车
5.登陆页
三、源码实现
1.路由配置
2.依赖包
四、总结 一、项目介绍
项目在线预览#xff1a;点击访问
本项目为vue项目#xff0c;参考淘宝官方样式为主题来设计元素#xff0c;简洁美观点击访问
本项目为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 /storesconst 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 router2.依赖包
{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]}
}四、总结
项目页面完整后续可能将不断升级完善其他页面。
关注作者及时了解更多好项目
更多优质项目请看作者主页
获取源码或如需帮助可通过博客后面名片作者即可
