项目优化策略 为开发模式与发布模式指定不同的打包入口 默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件 即src main.js 。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即： 开发模式的入口文件为src main dev.js 发布模式的入口文件为src main prod.js configureWebpack 与 chainWebp ...
2020-04-15 11:20 0 575 推荐指数：
项目优化策略 6、通过 CDN 优化 ElementUI 的打包 在资源列表中 js/chunk-vendors.4da6d812.js 这个文件后面还是有个惊叹号，说明体积还是大。 而在依赖项中的，element-ui 的 大小是 659.3kB。 虽然在开发阶段，我们启用 ...
项目优化策略 5、通过 externals 加载外部 CND 资源 默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。 为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部 ...
项目优化策略 7、首页内容定制 不同的打包环境下，首页内容可能会有所不同，我们可以通过插件的方式进行定时，插件配置如下： 在 public/index.html 首页中，可以根据 isProd 的值，来决定如何渲染页面结构： 打开vue.config.js添加 ...
1、打开Element网站，找到主页需要的布局格式 修改Home.vue： 效果图如下： 2、美化Header区域布局样式 3、左侧导航菜单 菜单分为二级，并且可以折叠 找到Element里的导航菜单代码： 然后在element.js里 ...
1、通过编程式导航跳转到商品添加页面 给添加商品按钮添加点击事件： goAddpage事件函数： 在goods文件夹下新建Add.vue文件： 添加路由： 点击添加商品按钮，效果图： 2、渲染添加商品页面的基本结构 ...
1、创建order分支 创建分支： 推送到远程： 2、通过路由渲染订单列表页面 新建order文件夹，Order.vue文件： 添加路由： 基础布局： 效果如图： 3、根据分页获取订单数据列表 调用api ...
1、用户列表页面，点击分配角色按钮，弹出分配角色对话框 给分配角色按钮添加点击事件，并传递当前行的信息： setRole事件： 添加分配角色的对话框 ...
1、通过路由展示角色列表组件 新建roles.vue文件： 添加角色列表路由： 点击左侧菜单的角色列表，效果如图： 2、绘制基本布局并获取角色列表数据 先实现基本布局，还是面包屑和卡片视图： 添加获取方法： 通过调用api接口获取角色列表 ...
