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

补充说明

1. 自动保存关掉

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

   以后注意: ctrl + s 保存代码

2. 缩进用两格缩进

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

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

4. vue create 创建项目失败, 报错

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

解决:

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

5. 在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布局的关键点:

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

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

---

步骤:

1. 安装插件

   yarn add lib-flexible postcss-px2rem
   

2. 在 public 中的 index.html 中删除 meta 标签

   • 先删除 public 中的 index.html 中 meta 标签

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

   2. flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。

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

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

4. 配置 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
          })
         ]
       }
     }
    },
   }
   

5. 重起开发服务器 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的类型

1. type

2. 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

1. 设置了 value 值
2. 添加了 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: 错误提示信息

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

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

或者

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

3. 在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'
    }
  }
}

4. 根据 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')
    }
  }
}