张皓岚
微信号:Jtzhanghl
第五阶段
19天课程
第一部分:5~6天 微服务的概念和实现的组件和框架,以及它们的功能
第二部分:10~11天酷鲨商城的前台项目完成
第三部分:3天虚拟机Linux系统Docker\其它应该掌握的知识
学习方法:
最重要的,还是反复练习,练习并不是炒代码,要知道每行代码的作用,为什么敲这行代码
针对面试中的笔记环节,抽时间去背面试题
针对面试官的面试,要将学习到的业务逻辑明确的理解,并可以清晰的表达出来
微信答疑:
课程中的知识点
直播的问题
节奏,语速的问题
代码挑错
其它…
课间和课后会给大家答疑
节假日回复可能会慢一些
午休大概一小时
每节课50分钟,课间15分钟
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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/
ElementUI是开发计算机浏览器(非移动端)页面的组件库
而Vant是开发移动端页面的组件库
我们设计的酷鲨商城前台项目使用手机\移动设备访问的,所以使用Vant更合适
参考第四阶段创建Vue项目的步骤,创建Vue项目
首先确定一个要创建项目的文件夹
例如在D盘下创建vue-home文件夹
进入文件夹,在地址栏输入cmd 打开dos命令行界面
D:\vue-home>vue create demo-vant
创建时具体选项,参照之前四阶段的笔记即可
下面我们就可以用idea打开我们创建的项目了
我们创建的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提供的组件
需要在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">
<van-form @submit="onSubmit" @failed="onFailed">
<van-field
v-model="use