![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Itqiandao
这个作者很懒,什么都没留下…
展开
-
webpack篇之四(AutoDllPlugin插件)
一、前言 上一篇介绍了DllPlugin和DllReferencePlugin两个插件把引用的第三方库打包成动态库,但是动态库引用需要通过手动添加至index.html中。 AutoDllPlugin插件就是来解决这个问题,通过AutoDllPlugin HtmlWebpackPlugin,这两个插件一起使用,因为它可以节省手动将DLL包添加到自己的HTML中。 二、安装 通过package-lock.json,确认webpack的版本。 如果是webpack4以下的版本:如下命令安装: npm ins原创 2022-01-10 18:00:31 · 984 阅读 · 0 评论 -
webpack篇之一(compression-webpack-plugin)
一、原因 我们开发完成后打包,整体包体积很大,导致页面第一次进入响应慢,并且对于高并发服务,会导致服务器网络资源被跑满。 我们从原理上理解webpack的工作原理,并且形成最优的打包策略。 二、打包原理 1、Bundle & Chunk & Module Bundle:包 Chunk: ...原创 2021-12-31 16:05:09 · 2002 阅读 · 0 评论 -
cookie使用方法
###一、相关链接 1、基础使用“js-cookie”。 2、在"js-cookie"上进行了封装。 ###二、使用方法 通过npm install js-cookie 封装了cookie的util的方法。 import Cookies from 'js-cookie'; import Setting from '@/setting'; const cookies = {}; /** * @description 存储 cookie 值 * @param {String} name co原创 2021-04-09 18:21:14 · 267 阅读 · 0 评论 -
依托LocalStorage的lowdb对前端数据进行持久化
一、相关组件 组件 作用 备注 js-cookie 访问存储cookie的组件 lowdb JSON 数据库引擎 lodash 一致性、模块化、高性能的 JavaScript 实用工具库 主要用到cloneDeep 深度拷贝 vueX 管理共享状态 将vueX、LocalStorage合并使用状态最佳,vueX另一个章节再讨论 二、最终目标 通过前端数据缓存,持久化一部分数据,不随着刷新而消失。 数据内容读取支持查询等结构化读取。 三、实现步骤 1、获取存储路径,通过原创 2021-04-12 20:32:15 · 672 阅读 · 0 评论 -
随机字符串
###一、相关链接或代码 方法是从iview中剥离出来,代码如下: // 生成随机字符串 export default function (len = 32) { const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'; const maxPos = $chars.length; let str = ''; for (let i = 0; i < len; i++) { st原创 2021-04-09 18:19:17 · 88 阅读 · 0 评论 -
图片压缩js压缩方案
###一、相关链接 1、Github地址:https://github.com/think2011/localResizeIMG 备注:本方案是githbub上关于图片压缩start数最多的,缺点作者放弃更新。 github中有wiki记录详情的使用方法。 ###二、使用方法 通过npm install lrz 安装lrz包。 使用如下代码 import lrz from 'lrz'; beforeUpload: async function (file) { let原创 2021-04-09 18:18:13 · 124 阅读 · 0 评论 -
npm install简介
一、npm install 命令简介 npm install packageName 命令 安装模块到项目node_modules目录下。 不会将模块依赖写入devDependencies或dependencies 节点。 运行 npm install 初始化项目时不会下载模块。 npm install -g packageName 命令 安装模块到全局,不会在项目node_modules目录中保存模块包。 不会将模块依赖写入devDependencies或dependencies 节点。 运行原创 2021-04-09 18:16:34 · 7271 阅读 · 0 评论 -
Eslint第二篇(配置使用)
一、代码规范工具 1、Vetur 此工具作用vue高亮显示。 2、Prettier-Code formatter 此工具作用格式化代码。 ####3、Eslint 此工具作用检测代码规范。 ###二、Vetur安装 只要安装vetur工具即可,安装完成后,Vue可以高亮显示。 ###三、Prettier-Code formatter 安装和配置 第一步:安装Prettier-Code formatter工具。 第二步:在项目根目录下添加.prettierrc.js文件,主要为了设置Prettier与原创 2021-03-19 14:57:59 · 305 阅读 · 0 评论 -
Eslint第一篇(安装和初始化)
一、确认eslint已安装 通过命令eslint --v 未安装的话,通过npm i -g eslint@latest 安装最新版本 二、项目初始化eslint配置 运行eslint --init 如何使用eslint,选择第三点 项目使用什么类型模块? 选择import/export 项目使用什么框架?选择vue。 项目代码运行在什么地方? 多选全选上(PS:空格选择) 项目代码风格是什么?选择一个流行的 选择编码规范? 我们选择standard规范 配置原创 2021-03-19 14:48:35 · 888 阅读 · 0 评论