vue第14天：昨天的补充说明，项目基础配置：公共样式、rem插件以及配置、目录别名配置，登录页：布局、封装输入框以及按钮组件：基本结构、传参处理、校验规则、输入框提示信息的显示和隐藏

最新推荐文章于 2022-06-03 18:00:27 发布

库库好困

最新推荐文章于 2022-06-03 18:00:27 发布

阅读量468

点赞数

分类专栏：十：VUE 文章标签： vue

本文链接：https://blog.csdn.net/m0_46597922/article/details/107890455

版权

十：VUE 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

补充说明

自动保存关掉

vscode 左上角 => 自动保存不要勾

以后注意: ctrl + s 保存代码
缩进用两格缩进

在这里插入图片描述

默认自动补逗号, 在 .prettierrc 加一行配置代码

在这里插入图片描述

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

在这里插入图片描述

vue create 创建项目失败, 报错

原因: node-sass 仓库资源下载失败, 默认这个资源在国外

在这里插入图片描述

解决:

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

在vue.config.js 里面补充说明, 关闭弹出来的提示框

module.exports = {
  devServer: {
    open: true,
    overlay: {
      warnings: false,
      errors: false
    }
  },
  lintOnSave: false,
}

在这里插入图片描述

项目基础配置

公共样式处理

引入中提供的base.css, 在main.js中引入

在这里插入图片描述

在线图标库

地址: http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css
使用方式, 给标签 class 添加 iconfont 和下面显示的图标名,

如 <span class="iconfont iconnew"></span>

在这里插入图片描述

2倍图

以后同学在工作的过程中，从UI那拿到的设计图通常都是640的设计图或者是750的设计图或者720的设计图

实际: 640 => 设计的是 320px 的屏幕, 750 => 设计的是 375px 的屏幕

这是为了在移动端为了在高清屏手机上显示得更加细腻，通常会使用更大的图片，比如2倍图

在这里插入图片描述

css 像素: 就是平时设置的 width: 200px

物理像素: 真实的手机设备的像素光点

设备像素比: dpr => css像素和物理像素的比例, dpr = 物理像素 / css 像素

设备像素比越高, 手机清晰度越高!

rem 布局 - 插件 postcss-pxtorem的配置

rem布局的关键点:

动态的修改 html 的 font-size (lib-flexible插件解决, 通过 js 动态修改html的font-size)
盒子的大小, 要用 rem为单位 (postcss-px2rem插件解决, 写px自动转rem)

https://www.cnblogs.com/lml2017/p/9953429.html

步骤:

安装插件
```
yarn add lib-flexible postcss-px2rem
```
在 public 中的 index.html 中删除 meta 标签
- 先删除 public 中的 index.html 中 meta 标签
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
1. flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。

在 src / main.js 中导入插件包

// 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size
import 'lib-flexible'

配置 vue.config.js

module.exports = {
 devServer: {
 	open: true,
 	overlay: {
   		warnings: false,
   		errors: false
		}
  },
  lintOnSave: false,
   // rem 的配置
  css: {
    loaderOptions: {
     css: {},
	   postcss: {
 	    plugins: [
  	     require('postcss-px2rem')({
 	     // 适配 360 屏幕, 设计图720中量出来的尺寸要 / 2
         // 适配 375 屏幕, 设计图750中量出来的尺寸要 / 2
         // 值 = 设计图设计的手机屏宽 / 10  360/10
         remUnit: 36
       })
      ]
    }
  }
 },
}

重起开发服务器 yarn serve

目录别名的配置

导入组件路径麻烦, 可以配置别名 https://www.cnblogs.com/zhouyingying/p/11382157.html

配置路径别名，方便引用，不用写那么长

配置前(示例):

import Test from '../../components/Test.vue'

配置后(不用再关心文件层级关系)(示例):

import Test from 'components/Test.vue'

import Test from '@/components/Test.vue'   // 默认不配置, 就可以用的

配置 vue.config.js

const path = require('path')// 引入path模块
function resolve (dir) {
  return path.join(__dirname, dir)// path.join(__dirname)设置绝对路径
}


module.exports={
  // 别名的配置
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('pages', resolve('./src/pages'))
      .set('assets', resolve('./src/assets'))
      .set('styles', resolve('./src/styles'))
    // set第一个参数：设置的别名，第二个参数：设置的路径
  }
}

小注意点:

template结构中的文件地址和style中的文件地址, 如果想用目录别名, 需要加 ~ 前缀, 而 js 中不需要

<template>
  <div>
    <img src="~assets/banner01.jpg" alt="">
  </div>
</template>

<style>
  h3 {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: url('~assets/bg.jpg');
  }
</style>

import HmButton from '../../../../components/hm-input.vue'

import HmInput from '../../../../components/hm-input.vue'

import HmButton from 'components/hm-input.vue'

登录页

登录页面布局

scoped属性的说明

当标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

默认情况下, 单文件组件中的样式, 是会互相影响的
只要给style标签, 添加上scoped属性, 就可以保证样式只作用于当前组件的模板了
如果希望样式只作用于当前组件, 推荐大家加上 scoped 属性
scoped原理:
1. 只要style标签, 加上了scoped属性, 就会给当前组件模板的所有元素, 都加上一个自定义属性
   data-v-1f24bdc7
2. 给style标签中的所有选择器, 都加上了属性选择器
   div   =>   div[data-v-1f24bdc7]

基本结构(在 pages文件夹里的 Login.vue 里面写)

在这里插入图片描述

样式

在这里插入图片描述

在App.vue中挂载：
在这里插入图片描述

封装输入框组件

在这里插入图片描述

基本结构

在 src 文件夹下创建 components

在components中创建hm-input.vue组件

<template>
  <div class="hm-input">
    <input class="inp" type="text" />
    <span class="tips">这是提示</span>
  </div>
</template>

在Login.vue组件中局部注册 (这里全局注册也行)

在这里插入图片描述

在Login.vue组件中使用组件

在这里插入图片描述

给hm-input.vue组件基本样式

<style lang="scss">
.hm-input {
  position: relative;
  padding-bottom: 20px;
  .inp {
    width: 100%;
    height: 40px;
    background-color: transparent;
    border-bottom: 1px solid #666;
    font-size: 18px;
    &.success {
      border-color: green;
    }
    &.error {
      border-color: red;
    }
  }
  .tips {
    color: red;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
</style>

props传参处理

props验证: https://cn.vuejs.org/v2/guide/components-props.html#Prop

我们可以为组件的 prop 指定验证要求 , 规定props的类型

type
placeholder

接收type 和 placeholder

在 hm-input.vue 里面写：

export default {
  props: {
    // type类型可以是 String Boolean Object Array, Function
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    type: {
      type: String,
      defalut: 'text'
    }
  }
}

在 hm-input.vue 里面写修改组件的结构

<div class="hm-input">
  <input class="inp" :type="type" :placeholder="placeholder">
  <span class="tips">这是提示</span>
</div>

v-model语法糖

v-model 实际是vue帮你封装好的语法糖，帮你做了一些封装，可以简化你的代码

v-model 实质是一个语法糖, 对于input文本框, 等价于 value值的设置和 input 事件的监听。注册input事件，监听输入框的变化，一旦变化就更新数据

v-model 会将事件触发后, 得到的值, 赋值给绑定的变量

<h1>vue的例子</h1>
<input type="text" v-model="username"> <br><br>
<input type="text" :value="password" @input="password = $event.target.value">

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      username: '10086',
      password: '123456'
    }
  })
</script>

v-model

设置了 value 值
添加了 input 事件的监听

v-model 应用于组件封装

1: 给 Login.vue组件传入 value 值 (利用prop进行传入) 安装 vue-devtools 可以查看组件的数据

<hm-input placeholder="请输入用户名" :value="username"></hm-input>

2: hm-input.vue组件中接收value值

  props: {
    ...
    value: {
      type: String,
      default: ''
    }
  },

结构中使用

  <div class="hm-input">
    <input class="inp" :type="type" :placeholder="placeholder" :value="value">
    <!-- <span class="tips">提示消息</span> -->
  </div>

3: 我们希望输入框变化时, 父组件的username也更新

给input框注册input事件

  <div class="hm-input">
    <input class="inp" :type="type" :placeholder="placeholder" :value="value" @input="handleInput">
    <!-- <span class="tips">提示消息</span> -->
  </div>

4: 用户输入内容时, 通过this.$emit, 触发input事件, 修改回父组件的 username

  methods: {
    handleInput(e) {
      // 输入框被修改了, 希望value值能同步修改
      this.$emit('input', e.target.value)
    }
  }

5: 注册 input 事件, 接收参数

<hm-input placeholder="请输入用户名" :value="username" @input="inputChange"></hm-input>

6: 用v-model 把第5步简化

<hm-input placeholder="请输入用户名" v-model="username"></hm-input>

记得写上去，不然会报错
在这里插入图片描述

props处理 - 校验规则

rules 校验规则
err-msg: 错误提示信息

在这里插入图片描述

使用组件的时候，需要传入 rules和err-msg

在这里插入图片描述

在hm-input.vue组件中接收rules和errMsg

在这里插入图片描述
或者

rules: {
  type: RegExp,
  default: ''
},
// 'err-msg'
errMsg: {
  type: String,
  default: ''
}

在hm-input.vue组件中需要在用户输入的时候，校验value值是否符合正则, 记得在data中提供status

在这里插入图片描述

每次用户修改内容时, 实时的根据传入的校验规则 rules, 进行校验, 并把校验结果, 存到 status 中

methods: {
  handleInput(e) {
    // 输入框被修改了, 希望value值能同步修改
    this.$emit('input', e.target.value)

    // 根据传入过来的规则 和 错误提示，进行判断输入框的值是否符合校验规则
    if (this.rules.test(e.target.value)) {
      this.status = 'success'
    } else {
      this.status = 'error'
    }
  }
}

根据 status 的值, 控制input框的类名（下边线）

<template>
  <div class="hm-input">
    <input
      class="inp"
      :type="type"
      :placeholder="placeholder"
      :value="value"
      @input="handleInput"
      :class="[status]"
    />
    <!-- <span class="tips">这是提示</span> -->
  </div>
</template>

控制提示信息的显示和隐藏

只有当 errMsg传递了，并且校验失败了，才显示错误信息

<span class="tips" v-show="isShowTips">{{ errMsg }}</span>

computed: {
	isShowTips() {
		return this.status === 'error' && this.errMsg
	}
},

封装按钮组件

基本结构

在components中创建hm-button.vue组件

在这里插入图片描述

样式

在这里插入图片描述

在Login.vue组件中导入

<script>
import HmInput from 'components/hm-input.vue'
import HmButton from 'components/hm-button.vue'

export default {
  data() {
    return {
      username: '10086',
      password: '123456'
    }
  },
  components: {
    HmInput,
    HmButton
  },
  methods: {
    loginFn() {
      console.log('要登录了')
    }
  }

在Login.vue组件, 这边的 click 可以换成其他的, 但是不太推荐 (可读性就不高了)

<div class="login-btn">
  <HmButton @click="loginFn">登录</HmButton>
</div>

在hm-button.vue支持click事件, 这里绑定的是原生的click事件, 不能改

<div class="hm-button" @click="handleClick">
  <slot></slot>
</div>

在 hm-button.vue里写： this.$emit 和组件上注册的事件要统一

export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}

库库好困

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue第14天：昨天的补充说明，项目基础配置：公共样式、rem插件以及配置、目录别名配置，登录页：布局、封装输入框以及按钮组件：基本结构、传参处理、校验规则、输入框提示信息的显示和隐藏

补充说明自动保存关掉vscode 左上角 => 自动保存不要勾以后注意: ctrl + s 保存代码缩进用两格缩进默认自动补逗号, 在 .prettierrc 加一行配置代码{ "semi": false, "singleQuote": true, "trailingComma": "none"}vue create 创建项目失败, 报错原因: node-sass 仓库资源下载失败, 默认这个资源在国外解决:yarn config
复制链接

扫一扫

专栏目录