摘要： 项目优化策略 8、路由懒加载 当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 具体需要三步： 1）安装 @babel/plugin-syntax-dynamic-impo 阅读全文

摘要： 项目优化策略 7、首页内容定制 不同的打包环境下，首页内容可能会有所不同，我们可以通过插件的方式进行定时，插件配置如下： chainWebpack: config => { config.when(process.env.NODE_ENV 'production', config =>{ confi 阅读全文

摘要： 项目优化策略 6、通过 CDN 优化 ElementUI 的打包 在资源列表中 js/chunk-vendors.4da6d812.js 这个文件后面还是有个惊叹号，说明体积还是大。 而在依赖项中的，element-ui 的 大小是 659.3kB。 虽然在开发阶段，我们启用了 element-ui 阅读全文

摘要： 项目优化策略 5、通过 externals 加载外部 CND 资源 默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。 为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 阅读全文

摘要： 上次不小心删除了，这里补发下。 关于后台环境配置这里就不复述了，要开启 MySQL 数据库、包括后台接口服务的开启：vue_api_server 目录 1、打开终端窗口，输入： vue ui 打开可视化UI面板的 Vue 项目管理器。 2、点击创建，进入目录选择，选择你需要存放项目的路径，然后点击“ 阅读全文

摘要： 项目优化策略 4、通过chainWebpack自定义打包入口 代码示例如下： module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV 'production', config =>{ config.e 阅读全文

摘要： 项目优化策略 3、为开发模式与发布模式指定不同的打包入口 默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即： 1）开发模式的入口文件为src/main-dev.js 2 阅读全文

摘要： 项目优化策略 2、通过 vue.config.js 修改 webpack 的默认配置 通过vue-cli3.0工具生成的项目，是默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。 如果程序员有修改 webpack 默认配置的需求 阅读全文

摘要： 项目优化策略 1、生成打包报告 打包时，为了直观的发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种： 1) 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析报告内容 vue- 阅读全文

摘要： 打开可视化工具，选择build，然后点击运行。 然后会发现有错误或者是警告，同样打开输出面板查看原因。 这个表示在产品发布阶段，不允许在代码中出现console.* 方法。 babel-plugin-transform-remove-console 插件：可以移除所有 console.* 方法。 打 阅读全文

摘要： 打开可视化工具，发现仪表盘中有3个警告。点击旁边的输出，可以查看具体的警告内容。 发现基本都是 ESLint 给检查出来的语法错误。 还有一个错误就是：作用域插槽的“scope”属性已被弃用并替换为“slot-scope”。 当 ESLint 和 代码格式化 之间有冲突的时候，打开项目根目录下的 . 阅读全文

摘要： 使用jQuery解决方案： if (navigator.appName 'Microsoft Internet Explorer') { //判断是否是IE浏览器 if(navigator.userAgent.match(/Trident/i)&&navigator.userAgent.match( 阅读全文

摘要： 通过 nprogress 第三方的包 打开可视化工具里的依赖，点击安装依赖-运行依赖，搜索 nprogress ，进行安装。 然后导入对应的包，打开main.js文件，我们可以看到，通过 axios 发起了ajax请求，只要发起了请求，就会触发 request 拦截器。当请求响应完毕就会调用 res 阅读全文

摘要： 1、创建数据报表分支report并push到远程 创建分支： git checkout -b report 推送到远程：（以前码云中没有该分支，所以要加-u，如果码云中有该分支，则不需要加-u） git push -u origin report 2、通过路由加载数据报表组件 新建report文件夹 阅读全文

摘要： 1、创建order分支 创建分支： git checkout -b order 推送到远程： git push -u origin order 2、通过路由渲染订单列表页面 新建order文件夹，Order.vue文件： <template> <div> <h3>订单列表</h3> </div> < 阅读全文