<template><div class=‘map_loading_vue‘ :class=‘{hide:isOpacity}‘ v-show=‘isShow‘><div class=‘title‘>健坤地图设备管理</div><div class="loader" v-if=‘isShowLoader‘><div class="text">Loading...</div><div class="horizontal"><div class="circlesup"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div><div class=...
问题说明：测试机上部署了一套业务环境，nginx反向代理tomcat，在访问时长时间处于加载中，十分缓慢！通过浏览器调试（F12键->Console），发现有错误ERR_CONTENT_LENGTH_MISMATCH 出现：查看nginx日志（当出现故障时，要记得第一时间查看相关日志）.......open() "/Data/app/nginx/proxy_temp/3/00/0000000003" failed (13: Permission denied) while reading upstream, client:...... server: localhost, request: "GET原因：ngin...
1、大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 安装：npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下，然后npm run dev 的时候默认会在8888端口显示const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;module.exports = {plugins: [new BundleAnalyzerPlugin()] }2、使用cdn ...
vue中加载three.js的gltf模型 一、开始引入three.js相关插件。首先利用淘宝镜像，操作命令为： cnpm install three //npm install three也行二、three.js中所有的控件插件，都可以在node_modules下面的three里面找到三、安装好以后，在页面中引入three.js并使用；在所调用页面引入的代码为import * as THREE from "three"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { OrbitControls } fr...
webpack 打包不会玩，整了这么个小玩具 一段 vue 绑定代码，关键点在 gmallComponent1、异步加载外部 vue 文件（非 .vue）2、按一定规则拆分 template、script、stylenew Vue({el: ‘#app_vuejs_replace‘,data: {search_key : ‘‘,results : [],pageindex : 1,selecteditem : null},components: {‘vue-test‘: gmallComponent(‘gz/test.html‘, {props: [‘items‘]})} }); gz/test.html 使用习惯几乎遵循 vue 原生，定义模板、...
<template><div class = ‘car_list‘ reft=‘scrollobx‘ @scroll=‘scrollready($event)‘></div> </template> <script>export default {data() {return {lengthThreshold: 50, //当滑动到距离低端50px时，更新数据timeThreshold: 300, promise: null}},methods: {// 滚动加载列表scrollready() {if(this.shouldScroll()) {if (this.promise) {return;}// 进行加载this.fn();// 防止多次滑动，频繁请求后台资源let self = this;...
<div id="divApp"> <div v-if="type === ‘A‘" v-cloak> A </div> <div v-else-if="type === ‘B‘" v-cloak> B </div> <div v-else-if="type === ‘C‘" v-cloak> C </div> <div v-else v-cloak> Not A/B/C </div> </div>[v-cloak] { display:none; } 原文：https://www.cnblogs.com/zhaomeizi/p/10782358.html
参考：https://router.vuejs.org/zh-cn/advanced/lazy-loading.htmlhttp://www.cnblogs.com/hellohello/p/7625791.html webpack中的import()与es6中的import()，用法一致【难道两者就是同一个api？】简单完整例子：vuedemo/demo01 原文：http://www.cnblogs.com/hellohello/p/7812047.html
一、什么是懒加载 顾名思义，懒加载就是随用随加载，什么时候需要就什么时候加载。 二、为什么需要懒加载 在单页应用中，如果没有使用懒加载，webpack打包后的文件会很大，这时进入首页时的加载时间会很长，不利于良好的用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载所用的时间。 三、路由中懒加载机制的体现 const OldPhone = resolve => requ...
注册功能之图片验证码： 1.实现过程 传递uuid给后端，再发送图片验证码的请求给后端，后端存储uuid并生成图片验证码保存到redis，然后将图片验证码返回给前端。 当用户输入图片验证码的时候，前端会发送uuid和用户输入的图片验证码内容给后端，后端进行比较校验。 2.实现步骤 后端：实现接口，获取图片验证码，生成图片验证码，保存图片验证码到redis，返回图片验证码到前端 前端：uuid作为验证码图片的标识，并...
<template><div class="wraper" @scroll="onScroll($event)"><div class="item" v-for="item in items">{{item}}</div></div> </template><script> export default {data () {return {items:[],pgSize:36,rawItems:[],pgNo:1}},ready () {for(var i=0;i<=1000;i++){this.rawItems.push(i)}this.changePgItems()},methods:{onScroll(event){var offsetHeight = event.currentTarget.offsetHeight,scrollHeight = event.target.scrol...
前戏每一次手动打包很麻烦，打包后还需要手动刷新浏览器。采用 webpack 提供的工具： webpack-dev-server ，它允许在运行时更新所有类型的模块后，而无需手动打包和刷新页面，会自动打包和刷新页面。可以很大程度提高开发效率。参考：https://webpack.docschina.org/guides/development/#使用-webpack-dev-server安装在当前项目下安装npm install --save-dev webpack-dev-server 修改 webpack.config.js 配置// 引入node中的path...
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载。我们要做的就是把路由对应的组件定义成异步组件const Foo = resolve => {// require.ensure 是 Webpack 的特殊语法，用来设置 code-split point// （代码分块）r...
<script src="../../script/vue-lazyload.js"></script><img v-lazy="remoteUrl + pics_url" class="xunjian_pics" v-for="pics_url in item.pics_text">Vue.use(VueLazyload, {preLoad: 1.3,error: ‘../../image/error.png‘,attempt: 1,filter: {progressive(listener, options) {// 实现渐近式加载图片（先加载模糊的图）listener.el.setAttribute(‘lazy-progressive‘, ‘true‘)//暂时不知道这个配置有什么用//调用apicloud...
下载 ui库yarn add ant-design-vue 默认是全局引入，打包后体积很大， 非常影响首屏加载速度， 按需加载下载按需加载的插件;推荐使用cnpm cnpm install babel-plugin-import --save-dev 下载在开发环境中 在项目的根目录下创建 babel.config.jsmodule.exports = {presets: [‘@vue/cli-plugin-babel/preset‘],plugins: [["import", { libraryName: "ant-design-vue",libraryDirectory: "es",style: true, // `style: true` 会加...