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 · 942 阅读 · 0 评论 -
webpack篇之一(compression-webpack-plugin)
一、原因我们开发完成后打包,整体包体积很大,导致页面第一次进入响应慢,并且对于高并发服务,会导致服务器网络资源被跑满。我们从原理上理解webpack的工作原理,并且形成最优的打包策略。二、打包原理1、Bundle & Chunk & ModuleBundle:包Chunk:...原创 2021-12-31 16:05:09 · 1969 阅读 · 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 · 265 阅读 · 0 评论 -
依托LocalStorage的lowdb对前端数据进行持久化
一、相关组件组件作用备注js-cookie访问存储cookie的组件lowdbJSON 数据库引擎lodash一致性、模块化、高性能的 JavaScript 实用工具库主要用到cloneDeep 深度拷贝vueX管理共享状态将vueX、LocalStorage合并使用状态最佳,vueX另一个章节再讨论二、最终目标通过前端数据缓存,持久化一部分数据,不随着刷新而消失。数据内容读取支持查询等结构化读取。三、实现步骤1、获取存储路径,通过原创 2021-04-12 20:32:15 · 646 阅读 · 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 · 86 阅读 · 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 · 118 阅读 · 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 · 7210 阅读 · 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 · 297 阅读 · 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 · 873 阅读 · 0 评论