项目经历总结(Vue2)

电商网站后台管理系统


项目地址

vue_shop: 基于Vue+Vue-Router+Vuex+Element-ui+axios,实现的黑马电商后台管理系统https://gitee.com/zhou-kai520/vue_shop


技术栈

        Vue2、Vue-Router、Vuex、Element-UI、axios

项目功能

项目开发模式

        前后端分离,后端写接口,前端实现接口调用、并且将数据渲染到页面上。

项目优化

实现步骤:

        A.生成打包报告,根据报告优化项目

        B.第三方库启用 CDN

        C.Element-UI 组件按需加载

        D.路由懒加载

        E.首页内容定制

chainWebpack 可以通过链式编程的形式,修改 webpack 配置

configureWebpack 可以通过操作对象的形式,修改 webpack 配置

项目总结

登录到使用

        1. 将登录成功之后的 token,保存到客户端的 sessionStorage 中

                1.1 项目中除了登录之外的其他 API 接口,必须在登录之后才能访问

                1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中

element-ui

        每个组件的样式可以通过它的名称来设置。

        如上传图片等组件,发起网络请求时,是库自己封装的函数(不是 axios ),没有携带TOKEN,无法链接我们的数据库,所以我们要自己设置。


 尚品汇(电商网站)


项目地址 

尚品汇: 根据尚硅谷的网课,实现了大部分的尚品汇功能。https://gitee.com/zhou-kai520/shangpinhui


技术栈

        Vue2、Vue-Router、Vuex、Webpack、axios、less

项目功能

        类似于京东的电商网站,涵盖登录、注册、搜索、详情、购物车、我的订单等。

项目总结

服务器

        如果带给服务器的参数是可有可无的;属性值为空的字符串还是会把字段带个服务器,而如果相应字段变为 undefined ,当前字段就不会带给服务器(可以减小服务器消耗

webpack

        webpack 默认对外暴露:图片、JSON 数据格式

mockjs 模拟数据

        mock 用来拦截前端 ajax 请求,返回自定义的数据用于测试前端接口。

小项目

        直接用生命周期钩子和 data 保存数据

大项目

        统一封装 用函数的形式给出数据

防抖和节流(通俗理解)

        防抖:就是回城,被打断就要重新来
        截流:就是技能CD,CD没好,你用不了技能

问题:if 中如果是空对象,能否进入判断成功执行语句中?

答:能,在转化布尔值时,对于对象而言,只有 null 转为 false,其他的都为 true,因此,一定要注意 [ ] { } 都会被转为 true

空对象 {} 与 null 的区别

空对象{}是一个不完全空对象,原型链上有 Object,null 为原型链顶端,因此 Object.prototype.__proto__ === null 为 true

null 是完全空对象,原型链也没有

空数组 [ ]

空数组 [ ] 原型链上还比空对象 { } 多一个 Array

  • 1
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一种流行的JavaScript框架,用于构建用户界面。升级Vue 2项目Vue 3可以带来许多新特性和改进。下面是一些升级Vue 2项目Vue 3的步骤和注意事项: 1. 更新Vue CLI:确保你的Vue CLI版本是最新的,可以使用以下命令进行更新: ``` npm install -g @vue/cli ``` 2. 创建新的Vue 3项目:使用Vue CLI创建一个新的Vue 3项目,可以使用以下命令: ``` vue create my-project ``` 3. 迁移代码:将Vue 2项目中的代码逐步迁移到Vue 3项目中。在迁移过程中,需要注意以下几点: - Vue 3中的Composition API:Vue 3引入了Composition API,它提供了一种新的组织组件逻辑的方式。可以将Vue 2中的选项API逐渐迁移到Composition API。 - Vue Router和Vuex:如果你在Vue 2项目中使用了Vue Router和Vuex,需要确保它们的版本与Vue 3兼容。可以查阅它们的官方文档来获取升级指南。 - 第三方库和插件:检查你在Vue 2项目中使用的第三方库和插件是否与Vue 3兼容。有些库可能需要更新到最新版本或者寻找替代方案。 4. 测试和调试:在迁移完成后,进行测试和调试以确保项目正常运行。可以使用Vue Devtools等工具来辅助调试。 5. 更新文档和依赖:更新项目的文档和依赖,确保它们与Vue 3的相关版本一致。 6. 逐步发布:如果你的项目是一个大型项目,可以考虑逐步发布。先将一部分功能迁移到Vue 3,进行测试和验证,然后再逐步迁移其他部分。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值