vue
文章平均质量分 71
star-1331
码而不思则惘,思而不码则怠
展开
-
Vuex详解
Vuex介绍 Vuex是一个专为Vue,js应用程序开发的集中式状态管理架构。它把我们项目中所用到的组件对其状态进行集中式的存储于管理,并以相应的规则保证状态得以按照我们想要的效果发生变化。 简单的来说,Vuex就是vue为了方便数据的操作而建立的一个“前端数据库”。我们都知道Vue中组件间本身是不共享作用域的,B组件想要拿到A组件中的数据,需要用到emit等特殊的语句去实现通信。随着项目的变...原创 2018-08-22 13:32:17 · 1014 阅读 · 0 评论 -
导出Echarts图表
导出原理:得到Echarts画出的canvas图片的base64,将其导出代码:<el-button type="primary" @click="downLoad">导出</el-button><div id="volume"></div>downLoad(){ var myChart = echarts.init(docume...原创 2019-10-12 14:21:37 · 1511 阅读 · 0 评论 -
VUE监听路由变化的几种方式
VUE页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?当然是利用VUE中的watch,请看代码。 一、监听路由从哪儿来到哪儿去watch:{ $route(to,from){ console.log(from.path);//从哪来 console.log(to.path);//到哪去 }}二、监听路由变化获取新老...原创 2018-09-05 11:44:50 · 13232 阅读 · 4 评论 -
vite2+vue3初探
文章目录vite介绍项目创建创建命令安装依赖启动相关变化script setup语法vite.config.js内基础配置jsx使用(仅用于在单文件中使用)数据mockUI库整合服务封装路由状态管理单元测试打包发布vite介绍官网Vite (法语单词“ fast”,发音为/vit/)是一种新型的前端构建工具,它可以显著改善前端的开发体验。它由两个主要部分组成:一个通过本机 ES 模块提供源文件的开发服务器,具有丰富的内置特性和快得惊人的热模块替换(HMR)一个构建命令,它将代码与 Rollup原创 2021-02-28 16:12:19 · 2211 阅读 · 0 评论 -
针对Vue打包生成的vendor和app文件过大的优化
1、组件按需加载现在大多的ui库都是以组件的形式进行处理,所以只需导入需要模块的即可element-ui按需引入2、去掉生成map文件打包时会生成map文件,而map文件一般都比较大,可以取消生成map文件(1)config/index.js找到productionSourceMap把true改为false3、cdn引入通过外部引入的方式引入这些UI组件库,从而减少打包文件过大的问题(1)index.html引入外部文件,并且加上(2)main.js去掉在页面引入vue和vue-rou原创 2021-02-07 16:30:06 · 892 阅读 · 0 评论 -
Vue3响应式原理实现(简单手写)
//设置缓存let toProxy = new WeakMap()let toRaw = new WeakMap()//proxy配置const baseHander = { get(target, key){ const res = Reflect.get(target, key) // 收集依赖 track(target, key) // 递归寻找 return typeof res=='object' ? reactive(res) : res原创 2021-01-25 22:32:42 · 277 阅读 · 0 评论 -
vue自定义指令实现任意标签可拖拽、改变标签宽度、动态拖拽交换位置
标签拖拽、改变宽度原创 2020-12-16 12:31:17 · 1622 阅读 · 0 评论 -
vue中修改element-ui源码
直接找到nodemodules下面的element-ui修改内容不生效修改方法第一步:克隆:git clone https://github.com/ElemeFE/element.git第二步:安装依赖:npm install第三步:修改你需要修改的组件源码第四步:npm run dist可能会遇到的报错0 warnings potentially fixable with the --fix option.package.json文件的lint命令下加上–fix"lin原创 2020-12-03 14:26:10 · 995 阅读 · 1 评论 -
Vue中应用TypeScript
https://www.cnblogs.com/aaron—blog/p/11669589.html原创 2020-11-17 16:31:37 · 1824 阅读 · 0 评论 -
Vue后退缓存页面浏览数据及位置
背景列表页面跳转到详情页面,然后再从详情页面通过按钮跳回到列表页面,希望回到原来列表页面的位置,且不再去请求接口技术点keepAlive缓存组件:第一次进入:beforeRouterEnter ->created->…->activated->…->deactivated后续进入时:beforeRouterEnter ->activated->deactivatedscrollBehavior动态设置进入下个路由的页面位置scrollBehavio原创 2020-10-14 15:56:11 · 566 阅读 · 0 评论 -
Vue2和Vue3响应式原理对比剖析
文章目录Vue2响应式原理简化Vue2响应式原理弊端Vue3响应式原理简化Vue2响应式原理简化1.对象响应化:递归遍历每个key,使用Object.defineproperty方法定义getter、setter2.数组响应化:采用函数拦截方式,覆盖数组原型方法,额外增加通知逻辑//响应式处理function observe(obj) { if (typeof obj !== 'object' || obj == null) { return } // 增加数组类型判断,若是数组原创 2020-09-23 14:08:41 · 2228 阅读 · 0 评论 -
Vue中使用ts
typescript引入新建项目创建项目时,选择ts已存在项目vue add @vue/typescript项目内使用创建类型声明文件src/types/index.ts//类型声明export type Info = { id: number name: string}//交叉类型export type Infolist = Info & {selected:boolean}//泛型export interface Result<T>{原创 2020-09-18 17:29:13 · 7694 阅读 · 3 评论 -
Vue之表单提交校验组件
仿element实现表单提交校验组件form组件<template> <div> <form> <slot></slot> </form> </div></template><script> export default { provide(){ return {原创 2020-09-08 08:10:42 · 854 阅读 · 0 评论 -
Vue之简易弹窗组件
组件模板Notice.vue<template> <div class="box" v-if="isShow"> <h3>{{title}}</h3> <p class="box-content">{{message}}</p> </div></template><script>export default { props: { title: {原创 2020-09-02 21:04:36 · 581 阅读 · 0 评论 -
Vue之组件通信方法汇总
文章目录props\$emit/\$on\$root/\$parent/\$children\$attrs/\$listenersevent busvuexprovide/injectprops父给子传值// childprops: { msg: String }// parent<Child msg="hello child"/>$emit/$on子给父传值// childthis.$emit('toPar', msg)// parent<Child @toPa原创 2020-08-31 21:25:19 · 163 阅读 · 0 评论 -
自定义插件异步拆分Vuex文件
背景由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。我们可以按模块异步拆分Vuex文件,即不同模块导入自己需要用到得Vuex文件。原理在需要用到的vuex的vue页面,加入isVuex是否需要异步加载vuex的判断,如果需要就加原创 2020-08-29 18:53:27 · 157 阅读 · 0 评论 -
Vue项目打包dll优化——提升打包速度
背景webpack每次打包都会去处理所有的模块,包括第三方模块。但是我们一般不会去改第三方模块,能不能让第三方模块只处理一次呢?webpack的打包时间由两个因素决定:所处理的文件数量,所进行的操作步骤优化会增加操作步骤,但是减少的时间大于增加的时间,则是对打包有帮助的dll优化dll为webpack的内置模块让webpack只处理一次第三方模块,后续的打包告诉webpack不要处理已经打包过的第三方库。优化步骤1、build文件夹下新建webpack.dll.js文件,用于对第三方模块进行原创 2020-08-29 17:11:24 · 1177 阅读 · 0 评论 -
Vue自动加载路由
每次创建页面之后,都需要手动引入模块,创建路由,很麻烦。这里使用webpack中的require.context来实现创建页面之后,自动加载路由。require.context用于自动加载某一目录下,符合我们自定义规则的文件项目结构子路由编写index.route.js/** * require.context * 返回一个方法 * 第一个参数为需要查找的目录 * 第二个参数为是否需要遍历子文件夹 * 第三个参数为自定义规则 */var r = require.context(原创 2020-08-29 15:51:38 · 842 阅读 · 0 评论 -
使用webpack自己构建vue开发环境
脚手架是什么一套项目的主体结构,包括开发过程中用到的工具、环境配置、模块划分等主体结构全部搭建好了,我们可以利用这个主体结构直接去开发,完成我们的需求,而不用花时间再去配置项目需要用到的东西vue-cli是什么一个下载器(启动器),根据不同的配置,下载git上的一个vue目录,帮助我们快速的构建一个项目我们所看到运行、打包等功能其实是webpack在起作用,真正重要的是loaderwebpack文件本身是不认识vue文件的,所以需要各种各样的loader将不同的文件转化为webpack可识别的j原创 2020-08-15 14:35:22 · 245 阅读 · 0 评论 -
VUE源码相关面试题汇总
Q1:vue3今年发布了,请你说一下他们之间在相应式的实现上有什么区别?A:vue2采用的是defineProperty去定义get,set,而vue3改用了proxy。也代表着vue放弃了兼容ie。Q2:像vue-router,vuex他们都是作为vue插件,请说一下他们分别都是如何在vue中生效的?A:通过vue的插件系统,用vue.mixin混入到全局,在每个组件的生命周期的某个阶段注入组件实例。Q3:请你说一下vue的设计架构。A:vue2采用的是典型的混入式架构,类似于exp原创 2020-07-12 10:52:41 · 6630 阅读 · 5 评论 -
vue-router简写
前端路由和后端路由的区别后端路由:输入url>>请求发送到服务器>>服务器解析请求的路径>>拿到对应的页面>>返回回去前端路由:输入url>>js解析地址>>找到对应地址的页面>>执行页面生成的js>>看到页面vue-router工作流程Hash与HistoryHash1、链接中带有#,#后的就是hash的内容,改变hash不会去向后端发起请求2、可以通过location.hash拿到hash原创 2020-07-03 14:14:03 · 473 阅读 · 0 评论 -
页面自适应lib-flexible使用
https://www.jianshu.com/p/8e5d2ef6ccea1.安装flexiblenpm install lib-flexible --save2.引入flexible在项目入口文件main.js中添加如下代码,引入flexibleimport 'lib-flexible'3.px 转 rem使用 webpack 的 px2rem-loader,自动将px转换为rem4.安装px2rem-loadernpm install px2rem-loader --save原创 2020-07-02 17:52:25 · 13513 阅读 · 0 评论 -
前端单元测试怎么写(以Vue为例)
单元测试是什么原创 2020-06-30 16:59:56 · 10804 阅读 · 1 评论 -
Vue基于ssr渲染
vue ssr指南传统的浏览器端渲染通常,我们的Vue项目实在npm run build打包之后,直接放到服务器端。浏览器去请求相应的html,加载对应的js文件,生成DOM。路由改变,局部刷新,浏览器不会刷新缺点需要js全部加载完,页面才能出来,加载较慢(懒加载)js改变dom,生成页面,不利于SEOSSR(服务器端渲染是什么)SSR的原理是将打包后的文件,先在服务器端处理,生成一个个的HTML字符串,当浏览器请求的时候直接发过去。每一个路由请求到的都是一个html串,路由改变,浏览器刷原创 2020-06-30 14:30:59 · 3243 阅读 · 0 评论 -
Vue中API封装
实现功能接口api化请求自动绑定防止重复提交API封装1、src目录下新建api文件夹index.js ---- 接口总路由// 接口总路由import myserver from '../request/getRequest.js'import login from './login.js'import shop from './shop.js'myserver.parseRouter("login", login)myserver.parseRouter("shop", shop原创 2020-06-27 17:38:41 · 1788 阅读 · 0 评论 -
axios拦截器设置及其实现原理剖析
axios使用说明文档axios拦截器https://www.jianshu.com/p/a0c67f4e145ehttps://www.cnblogs.com/xbzhu/p/11810384.html拦截器的使用应用场景:1:每个请求都带上的参数,比如token,时间戳等。2:对返回的状态进行判断,比如token是否过期axios如何实现请求拦截axios发送请求的内部流程...原创 2020-06-27 11:18:58 · 5084 阅读 · 2 评论 -
剖析vue内部运行机制
掘金小册-剖析Vue.js内部运行机制原创 2020-06-16 16:41:11 · 480 阅读 · 0 评论 -
Object.defineProperty将普通对象转化为响应式对象
let per = { name:"小明", age:"20", sex:"男"}/**Object.defineProperty(obj, prop, descriptor)三个参数:obj:要定义属性的对象prop:要定义或修改的属性的名称或 Symboldescriptor:要定义或修改的属性描述符configurable:true 该属性的对象能够改变,也能够被删除enumerable:true 是否可以出现在对象的枚举属性中,即能否for...in.value 该属性对应原创 2020-05-20 16:26:31 · 506 阅读 · 0 评论 -
VUE生产bug汇总
一、 IE、360显示空白360浏览器模式用.com、.cn结尾的安全域名访问网站,360浏览器默认是极速模式(推荐),为chrome内核用ip或不规范的域名访问网站,360浏览器默认是兼容模式的,为IE内核,对于ES6语法解析存在问题,需要添加babel解析解决方法下载安装 babel-polyfill:npm install babel-polyfill --save在webp...原创 2020-01-07 14:21:33 · 203 阅读 · 1 评论 -
vue-carousel做轮播
单页面开发中,经常需要用到轮播展示相关信息,那么vue中该怎么使用轮播图呢?这次小编给大家介绍在vue中使用swiper做轮播。原创 2018-09-04 14:02:06 · 6902 阅读 · 0 评论 -
VUE点击实现路由跳转传参
在页面开发中,我们经常需要实现点击跳转页面,并传递相应的参数过去在另一个页面展示出来。废话不说,直接上代码。 路由发出页面&lt;template&gt; &lt;div id="home"&gt; &lt;header&gt;头部&lt;/header&gt; &lt;carouse原创 2018-09-05 11:00:32 · 8589 阅读 · 1 评论 -
Vue中使用Echarts建立图表(柱状图、折线图、环形图、中国地图及仪表盘)
随着大数据时代的来临,更多的数据要求可视化操作,图表的应用需求也不断提高。那么在Vue中该怎样使用图表呢? 一、安装Echarts npm install echarts -S原创 2018-09-06 12:03:50 · 2658 阅读 · 0 评论 -
Vue中进行异步请求
前端的数据均是通过接口请求拿到的,而Vue本身不支持ajax请求,那么该怎么解决Vue中的异步请求呢?这儿提供了几种方法,希望对大家有所帮组。一、axios实现异步请求1.项目中安装axiox npm install –save axios...原创 2018-09-06 17:49:50 · 37773 阅读 · 4 评论 -
Vue2基础汇总
搭建并启动项目脚手架搭建项目vue init webpack my-projectvue init webpack-simple my-project(简单配置)安装依赖模块npm install启动项目npm run dev基础语法赋值:{{}}渲染代码片段:v-html双向数据绑定:v-model绑定属性:v-bind:src :src点击事件:v-on:click...原创 2019-03-06 16:46:59 · 341 阅读 · 0 评论 -
Vue项目经验汇总
头部左右两边可以通过slot卡槽去处理底部导航显示与否可以通过路由里面的meta属性进行配置返回上一级页面$router.back()原创 2019-03-27 16:54:01 · 8148 阅读 · 0 评论 -
better-scroll实现商品列表滑动效果
官方文档实现效果代码实现<template> <div> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li class="menu-item" :class="{current:index===cu...原创 2019-04-10 13:38:37 · 1268 阅读 · 0 评论 -
el-tree树形结构动态更新数据
效果展示:代码解析:<template> <div class="newuser"> <div class="setBox"> <el-row class="addRole"> <el-col :span="11">机构</el-col> <el-col :s...原创 2019-08-14 15:37:41 · 11064 阅读 · 1 评论 -
Vue之scrollTop滚动到顶部
<template> <div class="footer"> <p>我是一只小可爱</p> <p>我是一只小可爱</p> <p>我是一只小可爱</p> <p>我是一只小可爱</p> <p>我是一只小可爱</p>...原创 2019-08-12 12:01:07 · 3223 阅读 · 0 评论 -
el-tree懒加载动态更新数据
<template> <article> <el-tree ref="tree" node-key="id" :key="treeKey" :data="data" :props="defaultProps" ...原创 2019-08-16 15:58:45 · 2738 阅读 · 0 评论 -
VUE项目搭建与开发
一、 VUE简介Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js;同时比起 React + Redux 相对复杂的架构,Vue.js 更加轻量级也更加容易上手,是初创项目的首选前端...原创 2018-09-05 16:40:53 · 370 阅读 · 0 评论