目录
3.使用element-plus的Container布局,全屏问题
1.Vue项目,启动index.html空白问题
当项目编译完成后,双击启动index.html,内容显示空白,但是在编译器里面可以正常显示,问题是没有部署,使用Nginx进行部署后,然后使用网址运行就好了。
2.安装vue devtools插件
vue devtools插件,可以方便的查看vue的程序的变量
https://download.csdn.net/download/u012563853/87321350
或者去这里下载
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官网一样。
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'
// https://vitejs.dev/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 element
el.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
第一种
import {
defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import removeConsole from 'vite-plugin-remove-console'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), removeConsole()]
})
第二种
import {
defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
minify: 'terser',
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true
}
}
}
})
17.Nginx反向代理
输入www.123.com指向http://192.168.0.100:801
server {
listen 80;
server_name www.123.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://192.168.0.100:801;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}