目录
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;
}
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
