Vue-shop电商管理平台项目问题总结

叁歲伎倆 2023-10-09 14:06 44阅读 0赞

## **Vue实战学习经验** ##

1.  **webpack运行时是 npm run serve**

Webpack3与之前的版本不同了语法不同

1.  **vue组件中的style标签加上 lang=****”****less****”** **代表支持less语法 加上scoped表示这段css代码只在当前组件生效 否则全局生效**

<style lang="less" scoped>

</style>

1.  **盒子在屏幕中中间不用计算px的那种**

position: absolute;

left:50%;

top:50%;

transform:translate(\-50%,\-50%);

1.  **flex新样式**

display: flex;

justify-content: flex-end;*//内容尾部对其**相对于flex盒子*

justify-content: space-between;//自动两边对齐

1.  **element-ui的input的密码属性 show-password**

可以让你增加一个自动显示或者关闭显示密码的小框框但是得配合v-model使用

1.  **表单预验证**

csdn直接搜索

1.  **Session 做登陆和退出功能**

1.window.sessionStorage

(1).生命周期为关闭浏览器窗口（关闭浏览器之后，所存储的数据也就随之清空）

(2).以键值对形式存取使用

(3).在同一窗口（页面）下数据可以共享

//存储数据

sessionStorage.setItem(key,val)

//获取数据

sessionStorage.getItem(key)

//删除数据

sessionStorage.removeItem(key)

//清除所有数据

sessionStorage.clear()

1.  **登陆退出 跳转功能**

1.验证账号密码正确以后设立session

sessionStorage.setItem("zhuangtai",1);

this.$router.push("/home"); //跳转

1.  通过导航守卫在全局设置一个

router.beforeEach((*to*,*from*,*next*)=>\{

console.log("跳转前");

if(*to*.path=="/login")return next();

let zhuangtai=window.sessionStorage.getItem("zhuangtai");

console.log(typeof zhuangtai);

if(zhuangtai=="1")\{ next()\}

else\{

next("/login");

\}

\})

1.  退出功能 消除session

sessionStorage.clear();

1.  **左侧菜单栏跳转路由**

给el-menu 标签加上 router属性 路由跳转的话将会根据里面的index值来跳转

1.  **给选中的菜单栏加上高亮标志显示当前是哪个路由**

给el-menu  菜单标签加上这个属性

:default-active="this.$route.path"

#### **11 项目优化** ####

1.  通过 vue ui 面板进行过 npm run build 打包功能
2.  通过vue.vonfig.js文件进行项目优化

#### **12 项目上线** ####

app.use(express.static("./dist"))

在nodejs后端app.js文件中

#### **13 项目开启gzip压缩** ####

var compression=require("compression")

app.use(compression());

app.use(express.static("./dist"))

顺序不能错 先注册中间件 compression() 然后再进行托管静态资源

#### **14.https** ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAX-aPvQ_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2d3a1de2b67c488c87782a9429c52d98.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-aPvQ==,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关【畅购电商】项目总结

目录 1. 电商项目架构图 1.1 系统架构 1.2 技术架构 2. 介绍电商项目 2.1 后台和前台、后端和前端 2.2 Vue全家桶包含哪些技术？ 2.3 什

布满荆棘的人生/ 2024年03月27日 17:27/ 0 赞/ 89 阅读

相关计算机ssm项目 SpringBoot的家电销售电商管理平台

项目背景社会的发展和科学技术的进步，互联网技术越来越受欢迎。网络计算机的交易方式逐渐受到广大人民群众的喜爱，也逐渐进入了每个用户的使用。互联网具有便利性，速度快，效率高

深碍√TFBOYSˉ_/ 2024年02月05日 12:12/ 0 赞/ 27 阅读

相关 Vue-shop电商管理平台项目问题总结

Vue实战学习经验 1. webpack运行时是 npm run serve Webpack3与之前的版本不同了语法不同 1. vue组件中的style标签加上

叁歲伎倆/ 2023年10月09日 14:06/ 0 赞/ 45 阅读

相关 vue3电商项目总结（2）

目录 1.路由组件的缓存 2.手写图片放大镜移动放大区域 3. vueuse/core-监听在元素之外点击 onClickOutside 是vue的方法库提供的方法

女爷i/ 2023年10月03日 11:59/ 0 赞/ 25 阅读

相关 vue电商项目归纳总结（1）

目录 1.吸顶效果 2.组装数据 3.轮播图 -------------------- 1.吸顶效果 -------------------- 手写实现思

冷不防/ 2023年10月03日 11:38/ 0 赞/ 23 阅读

相关移动端电商项目总结

1.Html标签要正确使用链接跳转使用a标签，文本标签优先使用h或者p，信息登记收集等使用form表单域结构，table表格布局等等；标签的正确使用有利于网页的seo优化，

我就是我/ 2023年06月01日 12:50/ 0 赞/ 28 阅读

相关电商后台管理系统项目总结（二）

所用技术栈： axios的封装、API的封装、vue-router、element-ui、echarts 整体项目技术难点：商品管理、权限、分类参数、面包屑的封装

ゝ一纸荒年。/ 2023年01月18日 09:22/ 0 赞/ 231 阅读

相关电商后台管理系统项目总结（一）

项目模块分析：用户管理模块、权限管理模块、商品管理模块、订单管理模块、数据统计模块各模块技术点： 1. 用户管理模块登录/退出、状态切换、编辑、分页、分

曾经终败给现在/ 2023年01月18日 09:21/ 0 赞/ 295 阅读

相关电商项目面试问题

1.说说你最近做的这个项目的背景，简单的介绍一下你这个项目？背景电商项目的背景一般是由市场推动的，比如行业竞争或者经营方式的改变(营销理念)。竞争的形态也发生了巨大

一时失言乱红尘/ 2022年02月19日 01:01/ 0 赞/ 459 阅读

相关电商项目经验总结-1

1.传统架构（集群），把同一套代码部署到多台服务器，每台服务器运行的都是同一套代码。 ![935355-20160924020011184-1667134621.png][]

╰+攻爆jí腚メ/ 2021年12月23日 05:11/ 0 赞/ 361 阅读