随笔分类 - vue
vue2项目 热更新慢解决方案
摘要：问题1 构建速度慢 问题2 每次保存文件 ，热更新卡94% Asset Optimization 这一步上 停顿十几秒 解决方案一： npm i html-webpack-plugin-for-multihtml--save-dev 文件 build/webpack.dev.conf.js cons
vue查找组件
摘要：Vue找到任意组件实例—findComponents 它适用于以下场景： 由一个组件，向上找到最近的指定组件； 由一个组件，向上找到所有的指定组件； 由一个组件，向下找到最近的指定组件； 由一个组件，向下找到所有指定的组件； 由一个组件，找到指定组件的兄弟组件。 // 由一个组件，向上找到最近的指定
vue + element初始化项目--代码初始化
摘要：1.清除App.vue和 router文件夹下index.js的无用代码 2.安装less依赖 注意less-loader 10.0.1版本会报错 建议版本 "less": "^4.1.1", "less-loader": "4.1.0" 3.新建全局css文件 初始化样式 /* 全局样式 */ h
vue + elemen 初始化项目--构建
摘要：项目初始化 安装vue脚手架 通过vue脚手架创建项目 配置Vue路由 配置Element-UI组件库 初始化git远程仓库 将本地项目托管至Github或码云中 1.安装vue脚手架 参考另一篇文章 : vue-cli 2.通过vue脚手架创建项目 Ctrl + R , 输入vue ui 使用控制
动态引入全局组件
摘要：大致思路: 通过 webpack中require.context的作用 读取到 指定文件夹下文件名 , 及export default 出的内容 , 然后在vue全局注册 这篇讲的还行吧webpack中require.context的作用 目录结构 全局组件和global.js 在同级目录下 bus
vue父子组件通讯
摘要：1. 动态绑定/props 例子： 父组件 Parent.vue <template> <div> <div class="parent"> <div>父组件</div> <br /> <child :message="message" @changeMessage="message = $even
vue优化相关---性能篇
摘要：1.组件懒加载(异步加载组件) 在多个tab之间切换的时候，其余tab里面的组件就可以在需要的时候再异步加载~ 有多个子路由的页面必用 components: { test: () => import("./Test.vue") }, components: { test: () => import
vue推荐文章
摘要：你听说过VUE嘛？ 10个你可能不知道的Vue开发小技巧 困扰99%前端程序员的Vue问题，全在这了（含代码） 作为一位Vue工程师，这些开发技巧你都会吗？ 真正的手摸手带你实现 Vue 组件库 手把手教你写一个Vue组件发布到npm且可外链引入使用 从零搭建 Vue 开发环境 一份关于 vue-c
vue相关
摘要：vue路由主动态引入 1.将子路由分模块封装 例如 home.router.js export default { path: '/', name: 'Home', component: () => import('../../views/Home.vue') } 2. 主路由配置 mport Vu
vue小细节
摘要：1. 组件缓存 keep-aive 属性 exclude include - 字符串或正则表达式。只有名称匹配的组件会被缓存 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 <keep-alive exclude="Detail
vue购物车功能
摘要：demo功能需求 购物车 商品可增减数量 该商品总金额自动增减 总金额随之改变 搜索商品 排序 点击按钮随单品金额排序 <div id="example"> <div class="box"> 搜索 <input type="text" v-model="input"> <br> <button @
vue轮播
摘要：vue使用transition实现无缝轮播 直接上代码: <template> <div class="page"> <div class="carousel"> <div class="inner"> <div v-for="(item, index) in imgUrls" :key="inde
axios的封装
摘要：为啥有现成的可以直接用 , 而要二次封装那么麻烦呢? 直接在vue文件中使用axios进行数据请求 , 会造成如下问题 1. 从项目分层的的角度看,业务层中又混入axios的API,缺少分层和模块化 , 不科学 2. 打包后 ,会将vue文件转换为html文件 ,所有请求都在html中,会有黑客将u
大型项目axios封装
摘要：目录结构 ├─ src | ├── apis | | ├── api.js // 返回值和错误统一处理 , 统一管理 | | ├── login.js //模块或页面下的请求 │ ├──request // 基本配置 │ │ ├── service.js //统一处理接口 , 拦截 , 状态处理 │
Vue源码解析--实现观察者OBserver
摘要：MVVM实现原理图 vue采用数据劫持配合订阅者和发布者模式的方式 , 通过 Object.defineProperty 的setter 和 getter 对数据进行劫持 , 在数据变化时, 发布消息给依赖器 Dep(订阅者), 去通知观察者Watcher 做出对应的回调函数 , 进行视图更新 MV
Vue源码解析--实现一个指令解析器 Compile
摘要：前言 compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图 大致思路 因为遍历解析的过程有多次操作dom节点，为提高性能和效率，会先将vue实例根节点的el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中
axios
摘要：1.axios是什么 一个基于promise的HTTP库 , 可以用在浏览器和node.js中 从node.js创建http请求 支持Promise API 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF/CSRF 批量发送多个请求 简单拓展: XSRF/CSRF :
vue 一行代码实现nav切换
摘要：实现思路：动态添加class，active类名， 1，点击元素，将元素下标key值赋值给自定义空对象n, 2，当数据内点击元素的下标等于n时，替换class类名为active 代码如下： <ul class="jishu-nav"> <li v-for="(value,key) in dataLis
vue 2.5.2手脚架导入jQuery
摘要：第一步：导入jQuery npm install jquery 第二步：在main.js中全局引用 import $ from 'jquery' 第三步：在webpack.base.conf.js中加入 const webpack = require('webpack') 第四步：在webpack.
MV*模型及部分vue
摘要：vue是什么？ Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vu
