本文探讨了Element-UI布局问题，包括NavMenu全屏显示、自定义事件监听、面包屑组件封装、异步处理及路由动态加载。还涉及Vue组件按需导入、Message提示优化、缓存管理及Webpack配置优化，旨在提升前端应用性能。
布局
- 当我们用elment el-aside el-header 进行布局 组件和边框是有间距的
- 当你使用NavMenu 导航菜单 是无法全屏的
- 当你屏幕缩小时内容会被压缩 设置最小宽度 有滚动条保证内容完整显示
// 在mian.js global.css (全局的引入)
html,
body,
#app {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 1366px;
}
- 当你自定义组件 绑定自定义事件是监听不到的 需要加.native 修饰符
<child @click.native='handl'></child>
- 在使用NavMenu 导航菜单 菜单都是后端返回的数据 通过v-for遍历的 如果后端没有返回icon图标 建立映射表
mapSection: {
0:'el-icon-user-solid',
1:'el-icon-s-tools',
2: 'el-icon-s-cooperation',
3: 'el-icon-s-order',
4: 'el-icon-s-data'
},
插件化 调用组件
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
面包屑的封装成一个全局组件
// 方式一
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>{{ two }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ three }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
// 不同的页面传入不同的值
<breakclumd two="权限管理" three="角色列表"></breakclumd>
// 方式二、
可以监测 路由的变化 在对应的路由表配置meta字段 添加面包屑的值
watch:{
$route(to,from){
to.meta
}
}
- 对于返回函数返回的结果是 promise 的都可以用 async 和 await 优化
- 有错误 需要捕获
方式一、
function fn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(5)
}, 1000)
})
}
async function fn3() {
const value = await fn2()
console.log('value', value)
}
fn3().catch((res) => {
console.log(res);
})
方式二、
async function fn1() {
//async声明的异步回调函数将返回一个promise
return 1
}
function fn2() {
return 2
}
function fn3() {
throw 3 // 抛出异常
}
async function fn3() {
try {
const value = await fn1() // value 1
//const value = await fn2() // value 2
//const value = await fn3() // 得到失败的结果 3
console.log('value', value)
} catch (error) {
console.log('得到失败的结果', error)
}
}
fn3()
elment 按需导入
- 按需引入element-ui 组件 1、开头字母大写 2、横杆的大写 3、以什么… 组件
import Vue from 'vue';
import {
Row,
Col,
} from 'element-ui';
[
Row,
Col,
].forEach((item, index) => {
Vue.use(item)
})
- element-uiMessage 消息提示 的调用 有两种方式
一、
this.$confirm('您的登录信息已过期,请重新登录', '警告', {
confirmButtonText: '重新登录',
cancelButtonText: '留在此页',
type: 'waring'
})
二、
import { Message, MessageBox } from 'element-ui';
MessageBox.confirm('您的登录信息已过期,请重新登录', '警告', {
confirmButtonText: '重新登录',
cancelButtonText: '留在此页',
type: 'waring'
})
.then(() => {
})
.catch(() => {
});
用 async 和 await 优化 方式二
elment 侧边栏
elment 侧边菜单的处理
<el-menu
router
:collapse="getCollapse"
background-color="#545c64"
default-active="2"
class="el-menu-vertical-demo"
>
<!-- 没有子集 -->
<el-menu-item index="/about">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<!-- 下面这部分可以用递归来实现 -->
<!-- 有子集 -->
<!-- <el-submenu index="2-4">
<template slot="title">
<i class="el-icon-s-help"></i>
<span>导航二级</span>
</template>
<el-menu-item index="2-4-1">导航三级</el-menu-item>
<el-menu-item index="2-4-2">导航三级</el-menu-item>
<el-menu-item index="2-4-3">导航三级</el-menu-item>
</el-submenu> -->
<!-- -->
</template>
</el-submenu>
页面刷新选中的菜单 还会选中
<el-menu
router
// 核心代码
:default-active="$route.path"
:collapse="getCollapse"
background-color="#545c64"
class="el-menu-vertical-demo"
>
侧边栏菜单路由表 不需要权限 单独出来
动态路由的添加
- 先加载不需要权限部分的页面
- 公共数据的复用
- 登录请求 权限 后端返回当前用户权限路由
- 使用 router.Routes 动态添加路由
- vuex 数据缓存 结合 本地存储 目的减少 http 请求
权限管理
- 后端返回什么 前端展示什么
- 后端返回的角色（管理员 ，老师，学生）前端根据角色拼接数据信息展示
vue 移动端 pc 结构图
遍历图片
- 这种方式 图片无法显现 原因是 webpack 在编译时不会把该路径当做图片 把它当做字符串处理
data(){
return {
items['./asset/1.jpg','./asset/2.jpg','./asset/3.jpg']
}
- 更改用 reuire 引入
data(){
return {
items[require('./asset/1.jpg'),require('./asset/2.jpg'),require('./asset/3.jpg')]
}
}
异步更新DOM
- 如果你要操作数据数据之后立即操作 数据影响的视图 DOM 那么最好把代码放到 nextTick 函数中
- 数据改变影响视图更新这件事不是立即的
this.$nextTick(()=>{
// 需要更新的数据
})
解决缓存带来的滚动问题
- 如果页面有多级路由 必定有多个 如果只对 一级路由 加 那么 只会缓存 在这个出口的组件 其余路由出口组件不缓存
- include 和 exclude 通过组件的 name 判断是否要进行缓存 可以通过 vux 动态进行管理
- 拿到最外层的dom(ref) 绑定onscroll 事件 每次滚动 记录滚动的位置 记得防抖和节流
- 缓存的生命周期钩子 create 等等 是不执行的 用 keep-alive 自带的两个钩子
登录成功跳转原网页
import router from 'router'
function redirectLogin(){
router.replace({
name:'login'
// 传递查询参数 查询参数会以 ？ 作为分隔符放到 url 后面
query:{
//数据名自己起的
// router.currentRoute 和我们在组件中获取的 this.$route是一个东西
redirect：router.currentRoute.fullPath
}
})
}
- 在全局路由钩子 beforeeach 判断是否登录 没有登录 调用 redirectLogin()
- 登录成功后 获取 url 中的query参数 根据该参数进行跳转之前的页面
webpack
- 打包 就是将各个模块 合成一个js文件
// package.js
{
"script":{
"build": './node_modules/.bin/webpack'
}
}
// 在nppm scripts 中 其实可以直接写 webpack 因为他自己就会自己去 "node_modules/.bin" 那个执行文件
{
"script":{
"build": 'webpack'
}
}
// npx webpack
//npx 是npm新增的工具 你使用它执行某个命令 他也会自动去你的项目中 "node_modules/.bin" 查找可执行文件 仅适合执行测试
// 1、 webpack 配置文件 该文件必须是一个导出的对象
// 2、对象中声明webpack的配置项
// 3、注意 webpack 是基于 node.js 开发运行一个构件工具 他的打包运行的时候回来执行这个文件 得到导出的配置对象 所以这里使用的是 Node.js中的代码相关语法
- webpack 本身只能理解 JavaScript 和 JSON 文件 loader 让 webpack 能够去处理其他类型的文件并将它转换为有效的模块
配置可以省略的后缀名
webapck 默认只支持省略
- .wasm
- .mjs
- .json 等文件的后缀名如果想要让其它的可省略的后缀名 需要单独配置
module.exports = {
//...
resolve: {
extensions: ['.js', '.json', '.wasm'],
},
};
路径别名
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/'),
},
},
};
把VueCli 升级到最新稳定版
使用下面的命令查看你的版本 VueCli 版本
vue --version
升级 VueCli
npm i -g @vue/cli
升级你的项目中VueCli相关内容 最好在升级之前确保你的项目的Git 工作区是干净的 所有的代码都已经提交
防止升级带来的影响 有问题及时回退
//执行以下命令更新
vue upgrade
分析打包结果
- 了解打包的内容
- 找出最大的模块是什么
- 查找错误到达的模块
- 优化它
vue-cli-serve build 会在dist目录产生一个可用于生产环境的包 和 为更好的缓存而做的自动 vender chunk spliting 它的 chunk manifes 会内联在HTML
-
–report 和 --report-json 会根据构建统计生成报告 他会帮助你分析包中含的模块的大小内部使用的 Webpack Bundle Analyzer插件
- 报告会在dist的目录里
项目中 esloader 和 babel同时处理js文件有先后顺序
- 应该先校验规范 后转换 js代码
2397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
