使用uniapp从0逐步搭建项目

190 阅读3分钟

搭建框架

新建项目

(跳过的之后需要补上:wx登录,好评中评差评,添加商品数量的防抖83,购物车角标,优惠券,级联选择地址)

目录结构

刚创建好是这样子的:

图片.png

自己添加一些:

  • api
  • common
  • components
  • utils
  • store

集成uView

uni里没有npm,所以要自己配置,配置方法参考官网

集成vuex

  • token
  • 平台(多终端)
  • 用户id

在main引入

图片.png

集成样式文件

图片.png

集成网络请求插件

uni.request —> request插件 -> 配置

底部tabbar

工具类封装

  • 封装了一个对页面跳转的方法
    • 分为导航栏跳转
    • 和页面中点击的一些跳转
    • 还加了对参数的处理
  • 提示框

插播一条思考

我不知道一个项目真正开发过程中,是这么多东西都准备好再进行开发的,还是说,先搭架子,然后再一步一步来,你看这个老师讲的,页面还没有呢,已经建了这么多东西了,有的并且是暂时都用不到的,我觉得这样不ok,我是想学怎么样一步步搭好的

开发页面咯

首页网络获取数据

首页组件动态化展示

轮播图-》注意那获取图片真实动态高度

组件拆分

搜索界面

页面级别组件,放在page里,记得要配置路径

搜索之后的商品列表页

搜索之后,就要跳到商品列表页

集成mescroll.js

商品排序

商品详情页

商品详情页

sku组件的使用、

商品评价页

商品列表页

二级分类

“我的”页面

user 已登录-未登录 login和register 登录页面

用户登录

注册登录登陆后操作携带token token状态管理

退出登录清空缓存

jwt

处理购物车

  • 判断有没有东东
  • 进入页面先获取购物车数据
  • 模式切换
  • 选中取消选中
  • 加入前验证是否已存在
  • 计算选中的金额

订单页面

checkout

我的服务好多页面

收货地址页面 表单验证

创建订单表order

踩坑,表名写了order

后台管理

vite安装项目

yarn create @vitejs/app demoname

架子

一开始不要考虑太复杂, 先做登录

目录结构

集成路由

yarn add vue-router@4

集成vuex

install 创建入口文件(分模块 在全局引入

less

yarn add less less-loader

views

封装axios

token存本地

安装store库

路由

检查登录 没登录就重定向到登录页

路由抽出来,方便权限管理

主页

做个主页,然后搭建登录页,在做登陆注册

权限

没有登录,重定向到登陆界面

安装nprogress

登录

把登录放在store里面,还有那些操作巴拉巴拉

  • 登录 -》 权限(检查token) -》

开始自己的尝试,我发现能登陆成功,但是怎么都不跳转

然后就想到,是token没有写进去

然后检查之后,顺利解决!!!

图片.png

proxy

api baseURL

404

神奇的bug

火狐不被卡,chrome被找不见的debugger卡住

主页面了

layout

菜单

点击路由要发生跳转,绑定点击事件

二级菜单阻止事件冒泡

主面板

集成echarts

table

(注意插槽写法!)

(角色列表:略)

到23课了,现在把管理员列表ok了

end