vue
文章平均质量分 64
winne雪
记录点滴~帮助你我他❥(づづ)╭❤~
展开
-
vue3 + vue-cli3/4配置svg文件的全局使用
vue3 + vue-cli3/4配置svg文件的全局使用。svg-sprite-loader根据导入的 svg 文件自动生成 symbol 标签(svg雪碧图)并插入 html。原创 2022-06-28 20:36:25 · 1451 阅读 · 0 评论 -
vue3+vite配置svg文件的全局使用(想怎么改颜色、宽高都可以)
vue3+vite配置svg文件的全局使用(想怎么改颜色、宽高都可以)1、你是否遇到UI给你切双份icon图(正常显示颜色、高亮显示颜色)?我们前端小伙伴还得做交互引入两个图片,以后修改颜色又要换?好麻烦呀~~~2、是否遇到有时候下载svg下来,想随意更改颜色遇到瓶颈?本来懒人开发原则,还是弄好配置,后面想怎么改就怎么改!!还需要安装一个依赖的插件:vite-plugin-svg-icons用于生成 svg 雪碧图。............原创 2022-06-28 19:45:18 · 6644 阅读 · 5 评论 -
vue中使用websocket通信接收后台数据
前言:项目中因为有的数据使用分页后数据加载还是很慢,所以考虑使用websocket来解决。后端获取到数据库数据后就依次返回给前端,这样就不需要等分页数据全部获取后才返回。1、需求概述点击按钮后才开启websocket连接,然后发送数据给后端(相当于post请求中也是需要传递数据给后端使用),在websocket实例对象的onmessage 函数中能获取到后端返回的数据进行处理渲染。2、代码...原创 2019-08-20 16:52:45 · 16814 阅读 · 23 评论 -
vue性能优化——收集
Vue 项目性能优化—实践指南(网上最全 / 详细)原创 2021-06-21 14:30:38 · 172 阅读 · 0 评论 -
@vue/cli创建的vue3 / vue2项目迁移到vite上
一、迁移过程vite官网:点击这里兼容性注意:Vite 需要 Node.js 版本 >= 12.0.0。1、创建vite项目npm init @vitejs/app根据提示把项目名、选择创建的项目类型(我们这里选vue),语言(javascript)2、把vue/cli创建的vue3项目中package.json依赖包搬到vite的package.json中搬完了之后记得使用 npm install安装依赖包。3、把vue/cli项目中的src目录整个搬到vite项目中替换掉src原创 2021-04-17 22:09:17 · 6395 阅读 · 5 评论 -
vue 和 react发展史、设计思想及维度
一、Vue和 React设计思路1、vue1.1 vue1.x只有响应式通知。1.2 vue2.x在vue1.x中如果项目很大的时候,响应式对象很多的时候就会导致性能很好,页面卡顿的情况,所以在vue2.x的时候引入了vdom。响应式和vdom进行配合,性能的到了很大的提升。那么如何配合呢?就是通过组件划分,组件之间通过响应式通知更新数据,组件内部通过vdom计算diff。vue2.x中vdom同级比较复杂数组结构时使用双端预判的算法,减少循环diff的次数。vue2.x中的静态标记只原创 2021-04-11 00:05:51 · 1189 阅读 · 2 评论 -
封装websocket请求-----vue项目实战(完整版)
前言:如果项目中多个组件都使用到WebSocket请求,那么我们需要对WebSocket进行封装,方便我们使用。下面我根据我的项目结构来创建文件和引入文件,大家注意一下自己项目结构。一、在utils目录下创建websocket.js文件import { Message } from 'element-ui'import { getToken } from '@/utils/authTok...原创 2020-04-27 17:48:59 · 22626 阅读 · 38 评论 -
vue3.x亮点特性
总结得比较好的文章推荐:https://www.cnblogs.com/it-Ren/p/10976095.html原创 2020-04-15 16:46:09 · 2560 阅读 · 2 评论 -
vue中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求
一、 抛出问题1、当一个页面的请求过长时,点击了跳转路由到新的页面,但是上一个路由的请求结果在当前路由页面提示,非常难看且容易让客户混淆。(所以需要路由跳转取消上个路由页面的所有请求)2、在当前页面某个请求长时间没拿到返回结果,然后用户又点击发起了相同请求,这时有可能后发送的请求返回的数据被先发送的请求覆盖,这样就得不到最新请求数据了。(所以需要防止当前路由页面的重复请求,以保证后发送的请求返...原创 2020-03-30 18:35:38 · 2701 阅读 · 0 评论 -
vue中使用markdown编辑器代码详解
编辑器效果图1、安装插件cnpm install mavon-editor -S2、在main.js中引入插件import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'Vue.use(mavonEditor)3、在组件中使用< mavon-editor />组件来显示编...原创 2020-03-11 22:30:21 · 1109 阅读 · 0 评论 -
@vue/cli4.x版本的vue.config.js常用配置
设置访问端口号、访问IP地址、路径别名const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { lintOnSave: 'error', // 设置eslint报错时停止代码编译 productionSourceMap: f...原创 2020-03-11 17:59:42 · 9805 阅读 · 0 评论 -
vue-cli2.x统一配置接口请求地址和开发环境的跨域代理
1、修改config/dev.env.js(开发环境的baseURL地址统一配置)2、修改config/prod.env.js(线上环境的baseURL地址统一配置)3、修改config/index.js,配置开发环境的跨域代理url4、自己封装axios请求js文件(request.js)5、自己封装url地址js文件(apiUrl.js)本来完整的后台接口地址api: https:...原创 2019-07-22 14:21:43 · 2876 阅读 · 0 评论 -
vue2实例生命周期钩子函数——总结
前言:为什么有生命周期钩子函数?每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。一、生命周期图示二、解析生命周期钩子函数的执行时的相关数据和dom挂载情况<!DOCTYPE html>...原创 2019-03-22 11:01:44 · 532 阅读 · 0 评论 -
vue-cli中使用Element(vue2.0桌面端组件库)
Element官网链接:http://element-cn.eleme.io/#/zh-CN1、在项目中使用npm安装npm install element-ui -save2.1、在项目中完整引入(引入所有element组件)在 main.js 中写入以下内容:import Vue from 'vue';import ElementUI from 'element-ui'; ...原创 2018-11-06 10:01:05 · 863 阅读 · 0 评论 -
vue-cli(vue2.x)中使用vux(vue移动端UI组件库)
vux官网链接:https://doc.vux.li/zh-CN1、在项目根目录下使用npm安装npm install vux --save因为vux使用less来书写样式文件的,所以还要安装less编译的loader:npm install less less-loader -D2、vux2必须配合vux-loader使用如果npm下载的是vux2.x版本的话,那么就必须配合vux-...原创 2018-11-06 10:50:42 · 1044 阅读 · 0 评论 -
vue-cli(vue2.x)中使用mixins(混入)
官网参考链接:https://cn.vuejs.org/v2/guide/mixins.html前言:混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。选项合并原则:当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。1、数据对象在内部会进行浅合并 (一层属...原创 2018-11-06 11:26:01 · 2799 阅读 · 0 评论 -
vue-cli(vue2.x)中使用axios的基本方法
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。特性浏览器端发起XMLHttpRequests请求Node端发起http请求支持Promise API拦截请求和响应转化请求和响应(数据)取消请求自动转化json数据客户端支持抵御XSRF(跨站请求伪造)1、在项目根目录下使用npm安装npm install axios --sav...原创 2018-11-06 13:41:14 · 2539 阅读 · 0 评论 -
vue-cli2.x(vue2.x)配置——axios访问本地模拟的json数据文件
有时候我们没有后台接口请求文件,那么我们可以自己在项目根目录下模拟json数据文件,然后通过请求这个文件来渲染我们的组件。1、配置build/webpack.dev.conf.js文件1.1、在const devWebpackConfig = merge(baseWebpackConfig, {...........}这个配置项前面添加:// 增加expressconst express ...原创 2018-11-06 13:59:41 · 3731 阅读 · 0 评论 -
vue2.x(vue-cli2.x)配置跨域请求代理,设置请求头
1、在config/index.js设置配置文件,跨域配置代理(默认里面内容为空,我们需要加入对跨域接口的配置)根据接口的不同设置的请求头和主机也不同,自己按照格式要求进行配置即可。如上图配置好了之后,'/apis/getSongLyric'为自定义的axios请求路径,自己根据相应接口功能来命名。后面在用axios请求接口的时候,url路径就要写自定义的这个,那么代理就会自动解析成对应的请...原创 2018-11-06 14:51:15 · 26736 阅读 · 13 评论 -
在手机浏览器上访问vue-cli2.x(vue2.x)项目
(通过ip地址访问项目,也是为了让同网段的手机输入电脑的访问本项目的网址后也能访问该项目)1、如果修改localhost为电脑ip地址也不能访问项目vue-cli开发的vue2.x版本,如果不能直接通过ip地址来访问的话,那么要修改config/index.js文件中的host字段:把之前的localhost注释掉,写成0.0.0.0,post字段为端口号配置。如上配置在项目启动后,浏览器地...原创 2018-11-06 15:56:20 · 944 阅读 · 0 评论 -
vue-cli(vue2.0)中配置sass
前言:Sass是一个用于编写css框架,它解决了直接进行css编写时权重难以控制,嵌套层级多导致代码编写不方便的问题。并且加入了变量定义,混合(可以近似理解为函数),循环,判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数(如颜色加深,颜色淡化)用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。1、在项目中使用npm安装插件依赖npm install s...原创 2018-11-05 20:36:05 · 1423 阅读 · 0 评论 -
vue中使用jsonp进行跨域请求接口
前言:这里我们使用的是第三方插件jsonp。github网址:https://github.com/webmodules/jsonp1、安装npm install jsonp -S2、引入一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的拼接,封装好这个jsonp文件后export出去,之后在哪里用到就再在那里import。1.新建jsonp.js...原创 2019-02-26 10:45:35 · 5623 阅读 · 4 评论 -
vue-cli2.x的安装到创建vue项目
vue-cli的安装到创建vue项目一、安装vue-clivue-cli是什么 vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板全局安装vue-cli npm install -g vue-cli查看vue-cli是否安装成功 vue -V ps:如果出现版本号,那么证明安装成功了。二、通过vue-cli来创建vue项...原创 2018-08-10 11:41:50 · 316 阅读 · 2 评论