美文网首页
vue实战(5):总结一

vue实战(5):总结一

作者: i摸鱼喵 | 来源:发表于2019-05-11 18:23 被阅读0次

    整理前一段所做的工作内容

    0. 其它

    vue实战(1):准备与资料整理
    vue实战(2):初始化项目、搭建底部导航路由
    vue实战(3):底部导航显示、搭建各模块静态页面、添加登录页页面与路由
    vue实战(4):postman测试数据、封装ajax、使用vuex管理状态
    vue实战(5):总结一
    vue实战(6):异步显示数据、开发Star组件
    vue实战(7):完整开发登录页面(一)
    vue实战(8):完整开发登录页面(二)
    vue实战(9):总结二
    vue实战(10):开发店铺详情(一)
    vue实战(11):开发店铺详情(二)
    vue实战(12):完结 + 附学习视频

    1. 项目开发准备

    项目描述
    技术选型
    API接口
    

    2. 开启项目开发

    使用脚手架创建项目
    安装所有依赖/指定依赖
    开发环境运行
    生产环境打包与发布
    

    3. 搭建项目整体界面结构

    stylus的理解和使用
        结构化, 变量, 函数/minxin(混合)
    vue-router的理解和使用
        router-view/router-link/keep-alive
        $router: 路由器对象, 包含一些操作路由的功能函数, 来实现编程式导航(跳转路由)
        $route: 当前路由对象, 一些当前路由信息数据的容器, path/meta/query/params
    项目路由拆分
    底部导航组件: FooterGuide
    导航路由组件: Msite/Search/Order/Profile
    

    4. 抽取组件

    头部组件: HeaderTop, 通过slot来实现组件通信标签结构
    商家列表组件: ShopList
    

    5. 登陆路由组件

     静态组件
     FooterGuide的显示/隐藏: 通过路由的meta
    

    6. 后台项目

    启动后台项目: 理解前后台分离
    测试后台接口: 使用postman
    修正接口文档
    

    7. 前后台交互

    ajax请求库: axios
    ajax请求函数封装: axios + promise
    接口请求函数封装: 每个后台接口

    相关文章

      网友评论

          本文标题:vue实战(5):总结一

          本文链接:https://www.haomeiwen.com/subject/kfhfaqtx.html