随笔分类 - 前端歌谣-学习篇-vue2电商管理系统
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:通过axios请求拦截器添加 token,保证拥有获取数据的权限。 原因是,后台那边除开登录的 api,其它都需要进行授权 。 因此,我们可以利用 axios 中interceptors属性,其中有一个成员 request,此时我们可以通过 use 函数为请求拦截器挂载一个回调函数,只要向服务器端发
阅读全文
摘要:关于这一块的话,由于后台数据已经写好,我们只需要通过双层 for 循环即可渲染我们的菜单栏,注意点: :index 只能绑定字符串,因此将后台请求过来的 id值与空字符串进行拼接达到此效果,解决了点击某个菜单栏导致其它菜单栏同时打开的问题。 最终实现效果如下:
阅读全文
摘要:通过给侧边栏设置 router 属性为 true,我们就能开启 vue-router 路由模式,然后将我们二级菜单的 index 属性绑定我们的数据 path 即可。
阅读全文
摘要:我们想要在登录之后重定向到 /welcome 路径,于是需要添加子路由children 属性,然后设置 redirect重定向到我们的子路由。 然后在我们组件 Home.vue 的右侧主体区域,放置一个路由占位符 router-view 即可。
阅读全文
摘要:通过点击一个按钮,让侧边栏进行展开与折叠。通过 isCollapse 的值来动态变化侧边栏的宽度。 其中 cursor: pointer 设置是为了让鼠标放在折叠与展开处会有一个手指指向。 letter-spacing: 0.2em 是为了让 ||| 有一定间隔
阅读全文
摘要:保持一个子菜单的展开 直接在侧边栏区域添加上述属性即可
阅读全文
摘要:我们想要的效果如下: 如何设计? 首先,我们可以在 data 中定义一个对象,对应于每一个菜单选项的 id 然后通过 for 循环遍历每一个菜单选项的 id即可。
阅读全文
摘要:通过 CDN 优化 ElementUI 的打包 虽然在开发阶段,我们启用了 element-ui 组件的按需加载,尽可能的减少了打包的体积,但是那些被按需加载的组件,还是占用了较大的文件体积。此时,我们可以将 element-ui 中的组件,也通过 CDN 的形式来加载,这样能够进一步减小打包后的文
阅读全文
摘要:通过 externals 加载外部 CDN 资源 默认情况下,通过 import 语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。 例如上述 chunk-vendors.js 体积很大,原因是全部 import 所依赖的包进行了合并给它。 为了解决上
阅读全文
摘要:示例代码如下: Javascript module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV 'production', config => { config.entry('app').clear()
阅读全文
摘要:打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: ① 通过命令行参数的形式生成报告 Javascript // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析包内容 vue-cli-ser
阅读全文
摘要:Error: No module factory available for dependency type: CssDependency 解决办法: 参考:解决webpack打包报错 No module factory available for dependency type: CssDepen
阅读全文
摘要:项目优化 添加进度条 打开 vue-ui 面板,选择依赖,输入 nprogress 进行安装相关依赖。 npm Javascript npm install --save nprogress 在 main.js 入口文件中,进行相关配置。首先先导入包对应的js 和 css: Javascript /
阅读全文