【微服务】Day01（Vant、SpringCloud）

张皓岚

微信号:Jtzhanghl

第五阶段

19天课程

第一部分:5~6天 微服务的概念和实现的组件和框架,以及它们的功能

第二部分:10~11天酷鲨商城的前台项目完成

第三部分:3天虚拟机Linux系统Docker\其它应该掌握的知识

学习方法:

最重要的,还是反复练习,练习并不是炒代码,要知道每行代码的作用,为什么敲这行代码

针对面试中的笔记环节,抽时间去背面试题

针对面试官的面试,要将学习到的业务逻辑明确的理解,并可以清晰的表达出来

微信答疑:

• 课程中的知识点

• 直播的问题

• 节奏,语速的问题

• 代码挑错

• 其它…

课间和课后会给大家答疑

节假日回复可能会慢一些

午休大概一小时

每节课50分钟,课间15分钟

Vant

什么是Vant

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZ2swusk-1663683660659)(image-20220428091647501-16583665374494.png)]

Vant是一个轻量，可靠的移动端组件库，2017开源

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

课程中我们使用Vue2版本对应的Vant学习

https://youzan.github.io/vant/v2/#/zh-CN/

Vant的优势

ElementUI是开发计算机浏览器(非移动端)页面的组件库

而Vant是开发移动端页面的组件库

我们设计的酷鲨商城前台项目使用手机\移动设备访问的,所以使用Vant更合适

Vant特性

• 🚀性能极佳，组件平均体积小于 1KB（min+gzip）
• 🚀 65+ 个高质量组件，覆盖移动端主流场景
• 💪 使用 TypeScript 编写，提供完整的类型定义
• 💪 单元测试覆盖率超过 90%，提供稳定性保障
• 📖 提供完善的中英文文档和组件示例
• …

第一个Vant程序

创建Vue项目

参考第四阶段创建Vue项目的步骤,创建Vue项目

首先确定一个要创建项目的文件夹

例如在D盘下创建vue-home文件夹

进入文件夹,在地址栏输入cmd 打开dos命令行界面

D:\vue-home>vue create demo-vant

创建时具体选项,参照之前四阶段的笔记即可

下面我们就可以用idea打开我们创建的项目了

安装Vant支持

我们创建的Vue项目并不会默认就支持Vant

所以,我们需要安装Vant的支持到Vue项目中

在打开的idea界面最下方,找到Terminal点击

在出现的命令行中输入安装Vant的指令

运行安装Vant的npm命令:(-S的S是大写的!!!)

D:\vue-home\demo-vant>npm i vant@latest-v2 -S

安装结束后可能有警告,可以忽略

最终可能看到下面的结果

added 4 packages in 3s

到此为止,我们就将Vant运行需要的文件安装在vue项目中了

git地址:

https://gitee.com/jtzhanghl/vant2205.git

添加Vant引用

如果想要在项目中使用Vant提供的组件

需要在Vue项目代码中添加Vant的引用

Vue项目的src/main.js文件中,添加引用代码如下

import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

添加了上面的引用,当前Vue项目就可以使用Vant组件了

为了实时运行项目,我们先启动Vue项目,测试表示它正常运行

可以在idea提供的Terminal界面中编写如下代码

D:\vue-home\demo-vant>npm run serve

打开浏览器

输入localhost:8080

进入移动端页面调试模式

以Google浏览器为例按F12进入调试模式后点击移动端调试即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lKHIghuX-1663683660661)(image-20220428095155966.png)]

按钮组件

所有组件的演示代码,都可以从官网获取

https://youzan.github.io/vant/v2/#/zh-CN/

在HomeView.vue文件中修改代码如下

<template>
  <div class="home">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

打开页面就能看到按钮的样式了

看到这个内容,表示当前Vant组件工作正常

如果没有看到效果

检查Vant组件的安装和引用

表单页面

登录作为移动端非常常见的界面

Vant表单是直接提供模板的,我们可以在官网找到表单链接直接使用

<template>
  <div class="about">
    <!--
      @submit是vant组件提供的Event(事件),在表单提交成功时触发,绑定的方法在下面的js中
      @failed是vant组件提供的Event(事件),在表单提交失败时触发,绑定的方法在下面的js中
      要想知道,当前组件都有呢些属性或事件,可以查询官网文档中的api和event列表
     -->
    <van-form @submit="onSubmit" @failed="onFailed">
      <van-field
          v-model="use