学习前端记录

学习前端记录

目录

1.Vue项目，启动index.html空白问题

2.安装vue devtools插件

3.使用element-plus的Container布局，全屏问题

4.vue3验证码

5.苹果手机输入框放大的问题

6.el-input透明背景

7.按钮el-button透明

8.CSS透明问题

9.TypeScript中接口和类的使用

10.vue界面中窗体的获取

11.跨域问题

12.el-table中增加序号

13.HTML中分3层，上中下，上和下固定大小位置

14.注册自定义指令

15.vue3界面，多个IP地址配置

16.打包后取消日志输出console.log

---

1.Vue项目，启动index.html空白问题

当项目编译完成后，双击启动index.html，内容显示空白，但是在编译器里面可以正常显示，问题是没有部署，使用Nginx进行部署后，然后使用网址运行就好了。

2.安装vue devtools插件

vue devtools插件，可以方便的查看vue的程序的变量

或者去这里下载

Vue.js devtools-Chrome插件下载-收藏猫插件

1.下载完成后，使用谷歌浏览器，在拓展程序中，打开开发者模式，把文件拖入进去即可。

2.打开一个vue项目，按F12，选择Vue 

3.就能看到Vue程序的变量了

3.使用element-plus的Container布局，全屏问题

原生的Container不会全屏，加上样式，就全屏了

<template><el-container><el-aside style="background-color:blue;  ">Aside</el-aside><el-container><el-header style="background-color: red; ">Header</el-header><el-main style="background-color:aqua; ">Main</el-main></el-container></el-container></template>
<style>html,body,#app,.el-container {/*设置内部填充为0，几个布局元素之间没有间距*/padding: 0px;/*外部间距也是如此设置*/margin: 0px;/*统一设置高度为100%*/height: 100%;}
</style>

效果 

4.vue3验证码

npm官网提供，类似于nuget官网一样。

vue3-puzzle-vcode - npm

npm install vue3-puzzle-vcode --save

<template><Vcode :show="isShow" @success="onSuccess" @close="onClose"/><button @click="onShow">开始验证</button>
</template><script setup>import { ref } from "vue";import Vcode from "vue3-puzzle-vcode";const isShow = ref(false);const onShow = () => {isShow.value = true;};const onClose = () => {isShow.value = false;};const onSuccess = () => {onClose(); // 验证成功，手动关闭模态框};
</script>

5.苹果手机输入框放大的问题

苹果手机访问H5界面的时候，输入框会自动放大，使用user-scalable=no即可消除，安卓手机不会

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />

6.el-input透明背景

<style lang="scss" scoped>#main {background: url("../assets/login-bg.jpg");width: 100%;height: 100%;position: fixed;background-size: 100% 100%;}::v-deep .el-input__wrapper {background-color: transparent !important;}
</style>

 如果报警告的话，使用

:deep(.el-input__wrapper) {background-color: transparent !important;}

7.按钮el-button透明

<el-button round color="#D6A557" style="color:#d68b2a;background-color:transparent;margin-top: 3px;"><el-icon><pointer /></el-icon>按钮</el-button>

8.CSS透明问题

rgba(255, 255, 255, 0.2)：背景颜色透明而文字不透明

opacity：全透明

9.TypeScript中接口和类的使用

在vue中的script中直接使用

	//接口interface StringValidator {isAcceptable(s: string): boolean; //返回值boolean类型}//变量const numberRegexp = /^[0-9]+$/;//类继承接口class ZipCodeValidator implements StringValidator {isAcceptable(s: string) {console.log(666666666)return s.length === 5 && numberRegexp.test(s); //返回值boolean类型}}const a = (new ZipCodeValidator).isAcceptable('777777') //传入参数，执行方法  console.log(a)//先输出666666666，再输出false

分别写ts文件，然后在vue中script中调用 

文件结构

//demo.ts
export interface StringValidator {isAcceptable(s: string): boolean;
}

//demo1.ts
import {StringValidator} from "./demo.js"
export const numberRegexp = /^[0-9]+$/;export class ZipCodeValidator implements StringValidator {isAcceptable(s: string) {console.log(77777)return s.length === 5 && numberRegexp.test(s);}
}

10.vue界面中窗体的获取

高：window.innerHeight

宽：window.innerWidth

11.跨域问题

跨域问题，除过后端设置以外，前端也可以设置，但是前端设置的时候，只适用于开发，如果部署的话，需要后端设置，或者使用nginx。

第一种方法：

axios中设置

export const service = axios.create({baseURL: '/api'
})

vite.config.js中配置

本案例使用的是https

import {defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'// /config/
export default defineConfig({plugins: [vue()],server: {cors: true,open: true,proxy: {'/api': {target: 'https://localhost:5001/api', //代理接口changeOrigin: true,secure: false,rewrite: (path) => path.replace(/^\/api/, '')}}}
})

调用的时候

await service.get(`/User/Login?userName=${user.value}&passWord=${passWord.value}`).then(

第二种方法：

就是把axios中的/api写到调用的地方，其他不变化

await service.get(`/api/User/Login?userName=${user.value}&passWord=${passWord.value}`).then(

12.el-table中增加序号

el-table中

<el-table :row-class-name="rowClassName">
<el-table-column label="序号" align="center" prop="xh" width="80"></el-table-column>
</el-table>

增加方法，其中序号是从1开始，从0开始，就不要+1了

	function rowClassName({row,rowIndex}) {row.xh = rowIndex + 1}

以上方法可能提示语法错误，所以使用下面的方法

<el-table >​​​​​  <el-table-column label="序号"  align="center"  width="80"><template #default="scope">{{scope.$index + 1}}</template></el-table-column>
</el-table>

效果

13.HTML中分3层，上中下，上和下固定大小位置

其中margin-bottom 和bottom要注意

<!DOCTYPE html>
<html lang="en"><head>
<style>.header {height: 200px;width: 100%;background: blue;position: absolute;top: 0;}.main1 {background: yellow;width: 100%;position: absolute;top: 200px;bottom: 200px;height: auto;}.footer {height: 20px;width: 100%;background: green;position: absolute;bottom: 0;}
</style></head><body><div class="header"></div><div class="main1"></div><div class="footer"></div></body>
</html>

14.注册自定义指令

举例解决的问题是：

Element-plus点击按钮后，会显示激活状态，除非再次点击空白的地方，才会取消，刷新的颜色就不一样。

1.在main.js中，全局注册

app.directive('blur', {// 当被绑定的元素插入到 DOM 中时……mounted(el) {// Focus the elementel.addEventListener("click", () => {el.blur();});}
})

2.使用，增加v-blur即可

<el-button type="primary" v-blur @click="handleQuery">刷新</el-button>

15.vue3界面，多个IP地址配置

 "scripts": {"dev": "vite --host","build": "vite build --host","serve": "vite preview --host"}

16.打包后取消日志输出console.log

第一种

使用vite-plugin-remove-console/README.zh_CN.md at f337fd64304faae1187ab62908a0373a7c77a893 · xiaoxian521/vite-plugin-remove-console · GitHub

import {defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import removeConsole from 'vite-plugin-remove-console'// /config/
export default defineConfig({plugins: [vue(), removeConsole()]
})

第二种

import {defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'// /config/
export default defineConfig({plugins: [vue()],build: {minify: 'terser',terserOptions: {compress: {//生产环境时移除consoledrop_console: true,drop_debugger: true}}}
})

来源：学习前端记录_vue3-puzzle-vcode_故里2130的博客-CSDN博客