Vue-第七天

智慧商城项目:

1.创建项目选项:

Vue-第七天_第1张图片

2.调整:

主要是增加两个文件夹,删除倒是没什么

Vue-第七天_第2张图片

3.组件库(vant-ui):

点击进入官网:Vant 2 - Mobile UI Components built on Vue

Vue-第七天_第3张图片

Vue-第七天_第4张图片

Vue-第七天_第5张图片

4.导入:

全部导入:

Vue-第七天_第6张图片

按需导入: 

在 babel.config.js 中导入配置后要重启项目,否则项目不会将配置文件扫进去

Vue-第七天_第7张图片

Vue-第七天_第8张图片Vue-第七天_第9张图片

拆分:

将导入代码封装成一个文件,进行拆分

Vue-第七天_第10张图片Vue-第七天_第11张图片

5.适配处理(postcss):

以前都是快速上手,但是这里使用进阶用法,但是也是在vant官网中

Vue-第七天_第12张图片

6.配置路由:

Vue-第七天_第13张图片

Vue-第七天_第14张图片

Vue-第七天_第15张图片

7.登录页设置:

Vue-第七天_第16张图片

8.模块设置(验证码的设置):

拦截器代码 以及 使用说明 在 axios 官网上都有

Vue-第七天_第17张图片在进行导入的时候,需要在返回的地方添加一个  .data   这样才可以更方便拿到数据。(其实不加也可以,大不了多  . 几下)

Vue-第七天_第18张图片

9.api封装接口

这里的封装函数代码逻辑有点独特,不是很能看明白

Vue-第七天_第19张图片

Vue-第七天_第20张图片

Vue-第七天_第21张图片

Vue-第七天_第22张图片

10.短信验证和轻提示:

导入调用可以在vue文件和非vue文件中使用

第二种只能在vue文件中,否则拿不到实例

具体语法还得参考官方文档

Vue-第七天_第23张图片

Vue-第七天_第24张图片

10.登陆权限(token):

Vue-第七天_第25张图片

11.本地存储信息:

大量使用,封装成方法

Vue-第七天_第26张图片

12.添加等待效果(Loading):

Vue-第七天_第27张图片

13.页面拦截(vue Router官网):

Vue-第七天_第28张图片

14.首页:

Vue-第七天_第29张图片

15.历史记录:

Vue-第七天_第30张图片

16.分类页设置

17.渲染详情

Vue-第七天_第31张图片

20.加入购物车:

Vue-第七天_第32张图片

21.购物车模块:

Vue-第七天_第33张图片

22.结算:

Vue-第七天_第34张图片

23.订单结算:

Vue-第七天_第35张图片

24.细节实现:

Vue-第七天_第36张图片

25.立即购买结算:

Vue-第七天_第37张图片

26.提交订单并支付:

Vue-第七天_第38张图片

27.订单管理和个人中心

Vue-第七天_第39张图片

28.打包:

Vue-第七天_第40张图片

Vue-第七天_第41张图片

Vue-第七天_第42张图片

常用的给他定义成异步加载

Vue-第七天_第43张图片

你可能感兴趣的:(vue.js,前端,javascript)