vue
文章平均质量分 69
前端vue框架
暖光_&
不积跬步无以至千里,不积小流无以成江海
展开
-
vue3性能提升的方面(对比vue2)
patchFlag,静态提升,预字符串化,事件缓存,vue3性能提升原创 2023-03-28 11:56:27 · 974 阅读 · 1 评论 -
webpack4 搭建vue项目,从头开始踩坑记
webpack搭建项目流程和全部过程以及踩坑记一 初始化项目进入目录 npm init -y生成默认的package.json二 搭建开发服务,安装webpack,webpack-cli,webpack-dev-server这里面有坑,版本之间兼容问题,我试的webpack5和webpack-dev-server3是不兼容的如下是我安装的版本:"webpack": "^4.44.2","webpack-cli": "^3.3.12","webpack-dev-server": "^.原创 2020-12-25 15:48:29 · 246 阅读 · 1 评论 -
NProgress 页面加载进度条插件
本文示例是在vue中展示首先安装nprogressnpm nprogress -S然后在路由的全局钩子函数中配置很简单,一会就实现了import { createRouter, createWebHistory } from "vue-router";import NProgress from "nprogress";import "nprogress/nprogress.css";import Routes from "./routers";const router = cre.原创 2020-12-21 18:30:25 · 159 阅读 · 0 评论 -
vue3 新特性总结
Vue2 到 Vue3 最直观的改变就是 Composition API——几乎所有的 Vue2 options 方法都被放到了 setup 函数里。就是从基于对象的编程(OOP)转向了函数式编程(FP)。创建方式首先创建方式发生了改变import { createApp } from "vue"; createApp(App)Teleport可以改变它包含的html渲染的节点位置,例如:下边的div将会渲染到body下边<teleport to="body"> <.原创 2020-12-21 18:08:22 · 371 阅读 · 2 评论 -
vue路由懒加载之分包 分模块加载
路由懒加载 分包如下代码,Home无任何处理,直接引入Ceshi 运用官方推荐的路由懒加载,优化首页加载的时间About在路由懒加载的基础上,进行了分包,webpackChunkName: “name”,注意该注释,name一样的会被打包在一起。注释不可省略。只有在跳到该路由的时候,才会加载import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";import Home from "../views原创 2020-12-21 15:29:32 · 2322 阅读 · 0 评论 -
vue插槽 slot与slot-scope v-slot
插槽插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。单个插槽 | 默认插槽 | 匿名插槽 首先是单个插槽,单个插槽是vue的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置name属性。父组件<template> <div class="father"> <h3>这里是父组件</h3> <child>原创 2020-11-04 18:09:04 · 607 阅读 · 0 评论 -
js和vue 防抖(debounce)、节流(throttle)
防抖(debounce): 当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。js实现:/** * 函数防抖 */function debounce(fn, delay) { // 记录上一次的延时器 var timer = null; var delay = delay || 200; return function() { var args = argume...原创 2020-09-14 11:13:50 · 790 阅读 · 0 评论 -
vue混入mixins 理解
vue混入 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。个人理解:vue混入主要是提取公用的js,减少不必要的代码,对相同代码的封装。注意点:混入对象的内容必须是一个对象。 当使用混入时,相同的内容都会合并。 数据对象如果有相同的,则以被混入的对象中data数据为准。 一旦使用全局混入对象,将会影响到 所有 之后创建的...原创 2020-09-14 10:57:15 · 223 阅读 · 0 评论 -
vant 下拉刷新与上拉加载一起使用的问题 下拉刷新触发两次 list与pull
//下拉刷新 onRefresh() { this.list = []; this.curPage = 1; this.finished = true; this.getData(); },getData() { this.isLoading = false; getList({ .原创 2020-06-09 11:30:44 · 4070 阅读 · 3 评论 -
vue 页面刷新 vuex状态消失问题
handleStore() {//刷新时将vuex的值保存在sessionStorage,刷新完成读取出来 let STORE_KEY = "STORE" if (sessionStorage.getItem(STORE_KEY)) { this.$store.replaceState(Obj...原创 2020-04-13 21:21:35 · 585 阅读 · 0 评论 -
vue-cli 配置环境测试环境
文件需要建在项目根目录.env .env.test.env文件NODE_ENV = 'production'VUE_APP_FLAG = 'pro'.env.test文件NODE_ENV = 'production'VUE_APP_FLAG = 'test'outputDir = testpackage.json文件"scripts": { "serve":...原创 2020-04-13 21:17:11 · 287 阅读 · 1 评论 -
pxtorem插件配置
在vuecli 项目根目录 新建postcss.config.jsmodule.exports = { plugins: { 'autoprefixer': { overrideBrowserslist: [ 'Android 4.1', 'iOS 7.1', ...原创 2020-04-13 21:11:18 · 4945 阅读 · 0 评论 -
vue cli项目 静态资源引入
动态绑定静态资源需要 require引入return { active: 0, message: { // active:, inactive: require('../assets/img/tab_normal_news@2x.png'), ...原创 2020-04-05 17:29:11 · 506 阅读 · 0 评论 -
vue transition动画 fixed定位初始化错乱
vue组件切换动画但fixed定位会导致页面初始化错乱一下,有解决办法欢迎交流<transition :name="$store.state.global.EXCESSIVE"> <router-view/> </transition>.slide-right-enter-active, ....原创 2020-04-05 17:48:16 · 2164 阅读 · 5 评论