一、问题 最近做了一个vue项目,打包后部署到nginx,页面访问时一直停留在加载页面,浏览器调试观察到chunk开头的多个js文件加载时间超过了30s还没有加载完,js文件大小有20多Mb 二、解决方案 2.1 安装插件 执行如下命令 npm install --save-dev webpack-bundle-analyzer npm install babel-plugin-component -D 2.2 修改配置 先引入依赖 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') const CompressionWebpackPlugin = require('compression-webpack-plugin') 新增这两个插件,webpack-bundle-analyzer用于优化打包体积和依赖关系,compression-webpack-plugin静态资源进行 Gzip/Brotli 压缩 在configureWebpack配置项的plugins新增这两个插件配置 plugins: ...... vue项目chunk.js太大导致页面加载超时 vue
webpack 全局安装webpack插件npm install webpack -g vue-cli 全局安装脚手架插件npm install -g @vue/cli-init 项目初始化 新建一个vue-cli-learn目录,在该目录下执行vue init webpack vue-cli-learn 然后回选择一系列配置,例如是否使用vue-router路由,是否使用ESLint,使用npm还是yarn作为包管理工具等,根据自己需要选择即可 vue脚手架项目初始化 vue
vue2 官方文档地址--介绍 — Vue.js (vuejs.org) 开发插件 开发在浏览器调试,浏览器界面很不友好,下载一个google浏览器插件,优化调试界面,通过点击下面的链接跳转,可以直接在对应的浏览器插件扩展管理安装,安装后记得启用插件,调试的时候会用到本地文件,要在插件管理里面开启允许访问文件URL vue-devtools安装教程 不同给浏览器得插件设置可以参考不同浏览器插件设置 也可以在git自己下载编译 github项目地址 使用效果如下 安装 新建目录,执行 npm init -y 执行 npm install vue@2.7.14安装 新建index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1> {{userName}},你好 </h.... vue学习笔记 vue
概念 ECMAScript是浏览器脚本语言的规范,Java script是规范的具体实现。 参考:1.1 ES6 教程 | 菜鸟教程 (runoob.com) 变量 let和var let 是在代码块内有效,var 是在全局范围内有效,下述代码打印时,会提示 a is not defined <script> { let a = 1; var b = 2; } console.log(a) console.log(b) </script> let声明的变量不能重复定义,var可以,下属代码运行提示 Identifier 'a' has already been declared <script> { let a = 1; let a = 1; var b = 2; var b = 3; } console.log(a) console.log(b) </script> var 存在变量提升,let不存在变量提升,下述代码,b打印结果为undefined,a打印提示 caught ReferenceError: Cannot acces...... ES6学习笔记 前端
1、父组件向子组件传递参数 父组件向子组件传递参数,通过props处理,属性是驼峰命名 props属性的类型有多个,常用的有下面几个[String,Number,Boolean,Array,Object,Function,Promise]等 如果传递的参数类型是Object,那么在父组件中修改这个Object的属性,子组件中也会跟着修改; eg: 子组件定义(名称ContractFileAttachment): props: { contractId: { type: String, required: true } } 父组件传递: <ContractFileAttachment :contract-id="currentContractId" /> 2、子组件调用父组件方法 子组件使用$emit调用父组件定义的方法 eg: 父组件定义一个方法,并且在父组件中引入子组件的时候,用@声明调用 <AddForm :level-array="levelArr" :state-array="stateArr" @addSuccess="addSuccess" @clo....... VUE父子组件通信 vue
1.标签设置 添加标签template,slot-scope设置为scope,slot设置为menu 内部就可以添加按钮和自己想要的属性了 <avue-crud ref="thresholdSetTable" :data="pageData" :option="option" :page.sync="page" @selection-change="selectionChange" @size-change="sizeChange" @current-change="currentChange" @search-change="searchChange" @search-reset="searchReset" > <template slot="search"> <el-form-item label="指标名称"> <el-input v-model="searchForm.indexName" placeholder="请输入指标名称" size="small" /> </el-form-item> </templa.... avue.js表格添加行内操作按钮 vue