zhouzuoluo的博客

打包流程详情步骤：1、准备工作： a、win7系统则确保node版本在v12以上，electron-builder对系统或版本有要求； b、项目路径不使用中文； c、使用淘宝镜像命令代替npm管理工具npm install-g cnpm--registry=https://registry.npm.taobao.org d、命令窗口中可以使用 “ cd.. ” 返回上一级目录 e、修改confi...

如图el-popover弹框和el-select下拉项的的容器是div#app之外的，所以在scoped作用域内使用>>>或/deep/修改样式无效。虽然可以使用全局样式修改，但是会造成所有页面组件样式改变。1、修改el-select选项样式的解决办法：Popper-append-to-body属性是Element-UI官方文档中提供的一个属性，该属性的用途就是将el-select选项的内容移动div#app当中，默认值是true，下面一张图是将该属性设置为false时.

vue-cli3是基于webpack4打造，vue-cli2是基于webpack3 vue-cli3的设计原则是“0配置”，移除（隐藏）配置文件build和config等目录 vue-cli3提供了vue ui 命令，提供了可视化配置 vue-cli3移除了static文件夹，新增了public文件夹，并且将index.html移动到public中使用vue-cli3初始化项目 vue create 文件名，生成的目录修改配置，因为vue-cli3把配置文件都给隐藏了，隐藏到...

· 父组件向子组件传递参数child.vue如下<template> <div class="childClass"> <h3>子组件内容</h3> <p :class="num==6?redclass:blueclass">当父组件内容传递给子组件时，该行变成红色&

首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言  定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS那么SCSS和SASS 有什么区别呢· 文件扩展名不同，文件后缀...

1、export 和export default 的区别？在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。如exp...

  基础准备：1、npm安装vue-cli脚手架后，通过命令“ vue init webpack 项目名 ”来创建项目；2、了解mockjs，能拦截ajax请求，返回模拟的响应数据，实现前后端分离；（详细学习网址：https://blog.youkuaiyun.com/zhanglir333/article/details/78721585 或官网）3、了解 axios，基于http客户端的promise，面...

在vue中使用slot插槽个人理解：是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；开发背景：正常情况下,<Child><span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签C...

vue-router编程式导航 在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航。。。通俗理解编程式导航：通过操作$router实例的JavaScript代码实现路由跳转。点击 <router-link :to="..."> 等同于调用 router.push(...)。$rout...

定义：vue的生命周期是指vue实例从初始化创建到实例销毁的过程。期间会有8个钩子函数的调用。 vue的钩子函数图解： vue的钩子函数使用总结：1、beforeCreate（创建前）:beforeCreate钩子函数，这个时候，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。无法访问到数据和真实的dom和data中的数据，可以在这里面使用l...

vue项目中全局引用jquery ：1、“   npm install jquery --save    ” 命令安装jquery2、在项目根目录下的 build 目录下找到webpack.base.conf.js 文件，在开头使用以下代码引入webpack，如下var webpack = require('webpack')3、在webpack.base.conf.js 配置文...

什么是Vue.nextTick()？？ 定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更...

背景：在vue开发中会遇到data数据更改后view试图不会进行响应式更新的情况 以下4种情况不触发vue响应式更新！！    不能检测到的数组变动是：    1、当利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue；    2、当修改数组的长度时，例如：vm.items.length = newLength；   不能检测...

 Vuex的定义、个人理解和结构解析 vuex定义：vuex是一个专门为vue.js设计的集中式状态管理架构。vuex的个人理解：是存储公有状态数据state的一个仓库(store)；解决了大型应用时组件传参的繁杂和不易维护性；vuex的状态储存是响应的，store中状态发生改变后相应组件会得到更新；不能直接修改store中的状态，唯一途径是显示的提交(commit)mutat...

前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。参考官网：https://router.vuejs.org/zh/guide/essentials/navigation.htmlparams传参（url中显示参数）...

文件目录： 编辑router文件夹下的index.js文件· 第一步：引用vue和vue-router ，Vue.use（VueRouter）/* eslint-disable*/import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)·第二步：引用定义好的路由组件import Ch...

· 第一步：项目打包前更改项目config配置打开项目的 config>index.js文件修改build对象的assetsPublicPath: 属性值为 './ ' 如下  · 第二步：对vue-cli项目进行打包在运行窗口输入cmd后打开命令窗口，在项目文件下输入npm run build命令 如下：      D:\vuecellauto\201807...

$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息，引用信息将会注册在父组件的$refs对象上，在js中使用$refs来指向DOM元素或组件实例； 应用一：在DOM元素上使用$refs可以迅速进行dom定位，类似于$("selectId")，如下​<template> <div class="parent"> <...

vue安装jquery：1、使用vue-cli创建好vue项目后，在项目文件夹下，使用命令npm install jquery --save-dev 引入jquery。2、修改项目文件 build/webpack.base.conf.js，添加如下内容：var webpack=require('webpack')module.exports 对象下添加属性p'lugins如...

前言：重装nodejs后，vue-cli搭建项目后运行vue项目报错报错 "npm Error: Cannot find module npm-cli.js"，同时发现npm-v 也报错。分析: vue-cli脚手架模板是基于node下的npm来完成安装的，安装vue-cli也会先安装node；因为“npm -v”命令报错，这里重装nodejs，一步步到npm安装全局依赖包。...

vue编码中经常出现获取到的数据是：{__ob__: Observer} 格式的，详细如下可能导致后续数据操作错误，如何获取其中的数值呢解决方法如下：将返回的数据data先转换为JSON字符串形式，然后再从字符串形式转换成JSON格式JSON.parse(JSON.stringify(data)) let resdata=JSON.pa...

vue-cli项目首页加载缓慢想要使用骨架屏效果，经过几天的踩坑，这里学习并记录一下vue项目自动生成骨架屏方法。添加骨架屏，其优势在于：写于HTML文件中，独立于Vue框架，节省了JS加载时间+JS全局环境创建的执行时间的时间 只在主页面根据页面结构独立编写，预先展示页面结构，进行视觉暂留，提供更好的交互感官 只在页面结构变化时进行修改，维护成本相对较低骨架屏的作用主要是在网...

前言：vue-cli项目开发打包部署后，存在问题有首次首页加载过慢，包括加载缓慢问题，需要进行vue项目优化。下面是对vue性能优化方法进行归纳，后面会对方法进行亲测。主要包括：代码包打包优化、编码优化、用户体验优化一、代码包打包优化可以在谷歌浏览器的调试工具（F12）中看到打包后生成的app.js文件过大；1、屏蔽sourceMap进行打包源码上线环节，需要对项目开发环...

（前言：文章记录vue-cli项目打包使用IIS布署遇到的几个错误及解决方式）首先简单理解webpack打包：个人理解：项目开发中我们构建 "低耦合高内聚" 的组件/模块来代码重用、降低项目复杂性，提升开发效率。而webpack就是一个静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会通过递归地构建一个依赖关系图，进而将所有所有项目模块打包成一...

<!-- 可以使用highcharts的CDN资源 --><!-- 钻取图依赖jquery.js和highcharts.js ,有顺序要求 --><script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script><script src="http...

一、vue2开发中$emit 、$on 、$once 、$off 的使用简单概述：1、vm.$emit(eventName,callback) 和$on(eventName,callback) 一般结合使用。使用$emit触发当前实例上的自定义事件（并将附加参数都传给监听器回调），使用$on 监听该事件并调用回调函数。这两个事件方法可以结合props 属性实现父子组件双向传参。...

绝对路径使用：在项目中build文件夹下的webpack.base.conf.js的使用如下：import mock from '@/mock/mock.js';html 相对路径使用1. 当需要引用 同一目录下的文件，直接输入文档, 如下<img src=”bg.jpg” />2、当需要引用下一级目录文件时，使用如下...

事件传递 ----冒泡和捕获DOM事件标准定义了两种事件流，这两种事件流分别是捕获和冒泡。和许多Web技 术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的 是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Fir...

一、定义和理解导航守卫的作用：vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。》》项目中应用场景举例：路由页面跳转时候进行登陆验证；路由跳转判断；有多种机会植入路由导航过程中：全局路由, 单个路由独享的, 或者组件级的。全局守卫包括：router.beforeEach（是全局前置守卫）、router.beforeResolve（是全局解析守卫）...

vue-cli项目和electron-vue项目打包运行都有遇到的白屏问题，下面记录打包前需要确认的配置第一：config文件夹下的index.js 中的文件中的 assetsPublicPath ：‘/’ 改为’./’ 不然的话会是空白页，记住，是build那块第二：build/util.js文件下在 ‘vue-style-loader’ 之后加一行：publicPath: ‘…/…/’ 不然的话会有图片显示不出来，字体不能正常使用第三： 如果你有本地json数据的话把本地j..

作者：imgss 出处：http://www.cnblogs.com/imgss欢迎转载，也请保留这段声明。谢谢!众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。hash模式hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); .

前言：公司vue项目使用 npm run build 打包生成dist文件部署后，当需要修改服务器端地址时候就又需要重新配置url并打包部署，为简化部署测试工作，想实现通过修改服务器地址的配置文件来实现修改打包后的项目服务器地址。项目基于vue-cli2搭建测试，下面是实现步骤：1、在static文件夹下创建配置文件 serverconfig.json，服务器地址信息{...

主要记录安装vue-cli制定版本和使用，注意vue-cli4创建项目命令和项目结构的改变检查当前项目的vue-cli版本：vue -V 卸载当前版本：npm uninstall vue-cli -g安装最新版本:npm install -g vue-cli安装指定版本：npm install -g @vue/cli@3.11.0创建项目和运行项目：vue init webpack my-app //创建项目np...

通过header插槽自定义表头：<template slot="header" slot-scope="scope"> ...</template>可以通过scope.row.columnName 获取单元项数据进行数据处理：<template slot-scope="scope"> <span :class="1<2 ? 'red-font' : 'blue-font' "> {{formatDate(scope.ro

<template> <d2-container> <h3>image加载失败使用默认图片</h3> <img src="" alt="test1.png" :onerror="errorImg" /> <hr> <h3>el-image懒加载、大图预览、加载占位、加载失败、</h3> <div class="demo-im.

<template> <d2-container> <h3>class使用测试页面</h3> <p :class="1 < 2 ? 'red-font' : 'blue-font'">使用三元表达式;</p> <p :class="['red-font','blue-bg']">使用数组包含多个类名;</p> <p :class="{'red-font':fals.