最近vue总结吧

最新推荐文章于 2023-12-28 14:47:02 发布

原创最新推荐文章于 2023-12-28 14:47:02 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨Vue.js在项目开发中的高效应用，包括组件化、路由管理、跨域问题解决及打包优化策略。详解组件化带来的模块化优势，路由配置与权限控制技巧，以及常见问题如白屏与文件过大的解决方案。

1.vue 前后端分离，每次改都要重新打包发布。

2.组件化，这个舒服啊，本来一个页面做的事，我可以分几个页面做，然后引进来。

3.路由：路由传值，什么原理就不说了，就说说项目经常用到的
@1可设置每个页面的title，可以控制keep-alive ，传参，等等
{
path:’/newIndex/product’,
name:‘newIndex_product’,
component: resolve => require([’@/views/newProduct/newProduct’],resolve), 缓存页面加载
meta: {
keepAlive: true，
title: “首页”
}
}
{
path: “extend”,
name: “extend”,
component: () => import("@/views/product/extend/index"),缓存页面加载
meta: {
title: “附加属性”
}
},
@2 this. $r o u t e r . p u s h (p a t h :^{''}, q u e r y :) t h i s .$ router.push({name: ‘’,params:{}})记得配对 path传值的话刷新页面参数不会丢失，
而且路径上可以看得参数，params刷新页面参数会丢失，优点就是路径看不到参数
@3.router.beforeEach(）这个也用最多的，后台控制管理员访问菜单权限用到，找不到页面跳到404页面，未登陆时要回到登陆页面等
@4这个也是非常好用，又有组件的路由组件，用的最多应该是beforeRouteLeave，编辑未编辑完成离开时；
支付页面，未支付离开；要离开当前页面清除定时器时，清除存储；等等啦
beforeRouteLeave: function(to, from , next){
next(false)
this.$confirm(‘您确定离开本页面, 是否继续?’, ‘提示’, {
confirmButtonText: ‘确定’,
cancelButtonText: ‘放弃’,
type: ‘warning’
}).then(() => {
// this.sure();
next()
}).catch(() => {
next(false)
});
},
4跨域问题，代理跨域记住了 config文件下的index.js dev
5.打包后访问白屏问题记住了 config文件下的index.js build assetsPublicPath 主要看你的路由模式
6.打包时有些文件过大问题，这时百度了
7.浏览器兼容性问题：@1用babel-polyfill @2用Autoprefixed 一起用，看自己的需求了
8.选ui前端框架问题，哪个舒服用哪个，只能这样说。