一、问题 最近做了一个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
wenyl 的个人博客