vue 3 项目实战一(绘制登录界面)

发布于:2024-02-06 11:04:02

目录

一、概述

二、创建vue项目

三、需求分析

四、构建组件

五、vue组件之间的通信


一、概述

本文记录了项目实现的详细步骤以及原理,十分适合初学vue的萌新练手,也是阶段性学习的一个总结,可能会有些啰嗦,勿怪~。

先从登录界面开始,常规的登录界面不太好看,起不到复习巩固的作用,于是找到了下面这个

 源码

https://codepen.io/ricardoolivaalonso/pen/YzyaRPNhttps://codepen.io/ricardoolivaalonso/pen/YzyaRPN下面将其拆解并封装,相当于化简为繁,将原本的html+css+js 项目转变为了vue项目,拆分成了三个组件。过程比较详细且啰嗦,选择性观看即可。

二、创建vue项目

1、vue create project_name

2、相关配置

3、cd project_name

4、code .         //快捷打开vscode

Typescript 是JavaScript的超集,Typescript语法在执行是会先转成JavaScript,在使用时如果不习惯ts可以转 js语法 

零碎笔记:

1.css盒子模型

        即元素可以看成一个盒子,即拥有margin、border、padding、content四个属性

2.css的伪类和伪元素

伪类:为处于某个状态的已有元素添加对应的样式,(项目的切换按钮用到了伪类),例如

  • 设置鼠标悬停在元素上时的样式     :hover
  • 为已访问和未访问链接设置不同的样式    :link   :visited
  • 设置元素获得焦点时的样式  :focus

        注意:如果同时作用在一个元素上,有书写顺序,比如对a标签进行操作:

a:link  ->   a:visited  ->  a:hover  -> a:active

伪元素: 由“ :: ” 表示,创建一些不在文档树中的元素,并为其添加样式

  • ::after       在每个 元素之后插入内容。
  • ::befor      在每个元素之前插入内容。

3、元素定位:遵从 “ 子绝父相 ”

4.2、switch组件

点击可实现滑动效果

分析

代码





部分css样式

实现隐藏

 

隐藏元素的几种方法:opacity: 0、visibility: hidden、display: none

移动主要是靠设置 left 偏移得到的

移动过程中的动画

4.3、sign组件

两者结构部分





像组件中如facebook的小图标,利用base64 将图片转为字符串以此来代替src的位置,可以减少http请求。 (base64推荐小图标使用,jpg转base64,体积会变大一点点。)

也可以使用矢量图:iconfont-阿里巴巴矢量图标库

 组件的移动和switch类似,多了个 z-index 来对这两个组件进行了堆叠

 五、vue组件之间的通信

现在各组件已经构建好了,但想要让switch子组件的按钮事件,也能控制到sign_in/sign_up子组件,则需要借助 Event Bus(用其它的方式也行,比如vuex )。  常用的父子组件通讯方式有:props,$emit ,$ref 等。

Event Bus:就是A-->B 有困难,那么就借助全局C来传数据,A-->C-->B

Vue3中需要借助 mitt 组件库来完成

1、安装:npm i mitt

2、在main中声明

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import mitt from 'mitt'

const app=createApp(App)
app.config.globalProperties.emitter = mitt()

app.use(router)
app.mount('#app')

3、新建文件、进封装

// src/hooks/useEmitter.js
import { getCurrentInstance } from 'vue'
 
export default function useEmitter() {
  const internalInstance = getCurrentInstance()
  const emitter = internalInstance.appContext.config.globalProperties.emitter
 
  return emitter
}

 5.1、在switch组件中添加部分代码

vscode中可能会有错误提示,用的语法是ts的,导入自定义js时会检查其类型。

取消检查==>

修改tsconfig.json中的compilerOptions,将"allowJs"设为true,没有则自行添加

 5.2、sign_in/sign_up内添加:

到这边样式部分基本完毕了,存在什么问题、遗漏,请多多交流,帮帮本萌新,之后会对登录、注册的功能进行实现。

vue 3 项目实战二(实现登录、注册)_咔卡熊的博客-CSDN博客


上一篇:【报错记录】AttributeError: ‘xxx‘ ob

下一篇:信号处理——基础知识及常用算法

资讯 观察行业视觉,用专业的角度,讲出你们的心声。
MORE

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。