基于electron制作一个node压缩图片的桌面应用 下载地址：https://github.com/zenoslin/imagemin-electron/releases 项目源码Github：https://github.com/zenoslin/imagemin-electron 准备工作我们来整理一下我们需要做什么： 压缩图片模块获取文件路径桌面应用生成压缩图片我们需要使用imagemin这个库来压缩图片，这里我们把这个库封装成压缩模块。 const imagemin = require(imagemin) const imageminMozjpeg = require(imagemin-...
PWA初次体验前言：本示例不用安装任何东西 部分资源来自网络资源及PWA官网，不要把PWA想象的太复杂，跟着示例走一下，你行的。 PWA介绍 一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。 官网： https://developers.google.com/web/progressive-web-apps/ 是 Google 在 2015 年提出，2016年6月才推广的项目。是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验...
简单介绍 首先本文不会对webpack代码进行解释，其所有配置都可以在文档上找到。 平时工作中会写一些多页面应用，因为习惯了react的开发模式，故此写了一个简单的配置，跟大家一起分享。如果你也喜欢，对你的开发有所帮助，希望给点鼓励（start） github地址：https://github.com/ivan-GM/Gm-cli 项目目录介绍：打包后文件目录：打包成cli如果你厌烦了新项目的复制、粘贴，也可以构建成cli 1，首先创建个文件夹，npm init初始化项目...
什么是骨架屏？ 简单的说，骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户造成页面正在加载的错觉，待页面渲染完成之后再用页面替换掉骨架屏，从而减少页面白屏的时间，给用户带来更好的体验。分析VUE渲染过程 使用vue-cli3.0创建项目： vue create project 在生成的项目文件夹下的public文件夹下的index.html文件代码如下： <!DOCTYPE html> <html lang="en"><head><meta ch...
本文实例讲述了JavaScript模板引擎应用场景及实现原理。分享给大家供大家参考，具体如下： 一、应用场景 以下应用场景可以使用模板引擎： 1、如果你有动态ajax请求数据并需要封装成视图展现给用户，想要提高自己的工作效率。 2、如果你是拼串族或者数组push族，迫切的希望改变现有的书写方式。 3、如果你在页面布局中，存在共性模块和布局，你可以提取出公共模板，减少维护的数量。 二、实现原理 不同模板间实现原理大同小异，各有...
#在切换路由时，组件会被复用，不过，这也意味着组件的生命周期钩子不会再被调用。解决办法有两种，1简单地 watch (监测变化) $route 对象： const User = {template: ...,watch: {$route (to, from) {// 对路由变化作出响应...}} } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫： const User = {template: ...,beforeRouteUpdate (to, from, next) {// react to route changes...// dont forget to call next()} }#全局...
1.订单提交地址等组件的应用。 使用的组件有如下： import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from vant主要是配货地址编辑这块；<van-address-edit:area-list="areaList":address-info="addressInfo"show-postalshow-deleteshow-set-defaultshow-search-result@save="onSave"@delete="onDelete"@change-detail="onChangeDetail"/> 地址编辑。没有用默认的地址编辑属性：search-resultsearch-result详细地址...
NestJS 最早在 2017.1 月立项，2017.5 发布第一个正式版本，它是一个基于 Express，使用 TypeScript 开发的后端框架。设计之初，主要用来解决开发 Node.js 应用时的架构问题，灵感来源于 Angular。在本文中，我将粗略介绍 NestJS 中的一些亮点。 组件容器NestJS 采用组件容器的方式，每个组件与其他组件解耦，当一个组件依赖于另一组件时，需要指定节点的依赖关系才能使用： import { Module } from @nestjs/common; import { Cats...
问题描述： 手头有一个项目是使用 vue-cli 搭建的单页面应用。项目分为了管理平台和用户查看页面，用户查看页面是很简单的页面，但是在加载过程中，却加载了整个应用的打包代码，量重且影响了响应和体验。我想要的效果是，查看页面只加载查看页面的代码，不包含管理系统的代码，因此着手将单页面应用改造成多页面应用，这里分享下方法。 1、改造文件目录 改造前：改造后：assets：这里不变，依然放置公用的静态资源文件；component...
背景手机型号：型号：iphone 7 / iphone xs max 版本：ios 10.3.1 / ios 12.1 微信版本：WeChat 6.7.3问题还原：Vue应用(vue-router)上使用history模式，在某个页面内调用微信JSSDK相关API，如扫码、分享等，使用当前页面URL总会出现签名错误(invalid signature)，导致API调用失败。问题根源Vue-Router进行路由切换的时候，总是会操作浏览器的历史记录，从而响应页面URL变化。 在JSSDK文档页面有这么一句话:同一个url仅需调用一次，...
一、前言forEach和map是数组的两个方法，作用都是遍历数组。在vue项目的处理数据中经常会用到，这里介绍一下两者的区别和具体用法示例。 二、代码1. 相同点 都是数组的方法都用来遍历数组两个函数都有4个参数：匿名函数中可传3个参数item(当前项), index(当前项的索引), arr(原数组)，还有一个可选参数this匿名函数中的this默认是指向window的对空数组不会调用回调函数不会改变原数组(某些情况下可改变)2. forEach(1) 没有返回值。...
vue-meta-info 官方地址： monkeyWangs/vue-meta-info （设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prerender-spa-plugin形成更优的配合） 单页面应用在前端正大放光彩。三大框架 Angular、Vue、React，可谓妇孺皆知。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理 SEO 的需求。 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍： 其实解决SEO问题...
前言: 本文基于vue 2.5.2, webpack 3.6.0（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化） vue 是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。 1. 新建 vue 项目vue init webpack vue_multiple_test cd vue_multiple_test npm install2. 安装 globnpm i glob --save-devglob 模块用于查找符合要求的文件 3. 目标结构目录. ├── README.md ├── build │ ├── ...
Node.js应用不需要经过编译过程，可以直接把源代码拷贝到部署机上执行，确实比C++、Java这类编译型应用部署方便。然而，Node.js应用执行需要有运行环境，意味着你需要先在部署机器上安装Node.js。虽说没有麻烦到哪里去，但毕竟多了一个步骤，特别是对于离线环境下的部署机，麻烦程度还要上升一级。假设你用Node.js写一些小的桌面级工具软件，部署到客户机上还要先安装Node.js，有点“大炮打蚊子”的感觉。更严重的是，如果部署机器...
1. 引用vue.js <!DOCTYPE html> <html> <head> <script src="http://vuejs.org/js/vue.js"></script><meta charset="utf-8"><title>JS Bin</title> </head> <body><div id="root"><input type="text" v-model="inputValue"><button @click="handlerAdd">提交</button><ul><li v-for="(item,index) of lists" :key="index" @click="handlerDel(index)">{{item}}</li></ul></div><script>new Vue({el: #root,data: {inputValue: ,lis...