Vue
文章平均质量分 58
关于Vue,请看这里。
小R.
总之岁月漫长,然而值得期待
展开
-
实现vue项目可通过 IP 和 localhost 同时访问
今天遇到了一个问题,好在解决啦。 问题是这样的,我本地的IP地址,在我的vue项目里却无法访问。如下图所示。傻傻怀疑是防火墙的问题。。。 解决方法:1、在项目 config文件夹下的index.js文件中,修改host为0.0.0.02、修改package.json文件中的dev,在后面加上--host 0.0.0.0,记得中间空个格 这样可以实现本地IP地址访问,但是启动服务器时,自动打开的网页是0.0.0.0开头的,如果想以IP地址开头,需要进行下一步操作。3、在build文原创 2022-04-26 17:22:44 · 3637 阅读 · 3 评论 -
vue-cli2脚手架项目,如何使用less全局变量,解决@textColor is undefined问题
最近想实现个一键换肤,需要配置全局less,控制全局变量。 刚开始卡住了,我是先后安装了style-resources-loader和vue-cli-plugin-style-resources-loader,以及less-loader和less,然后配置vue.config.js,这样搞的,但是不起作用,一直报错,但是朋友那里就没问题。我的报错内容如下: 今天恍然大悟,突然反应过来大概是vue-cli的版本有所不同,因为我这里的是2版本的,朋友那里好像是3版本的,我创建的是基于 webpac原创 2022-04-24 21:08:53 · 1521 阅读 · 2 评论 -
vue中如何使用和风天气插件
想给我的个人博客添个展示天气的,网上一找看到了中国天气、和风天气这两种,附一下这两个的官网链接。中国天气:https://cj.weather.com.cn/plugin/index和风天气:https://widget.qweather.com/ 我刚开始是想对比一下这两个,结果发现中国天气预览没显示出来,所以直接选择了 和风天气。1、创建 打开链接后,我选择了天气简约插件。 自己取一个插件名称,根据自己的需要勾选内容,和修改样式。 点击生成代码时,会提示你登录,如果没有原创 2022-04-24 14:49:02 · 3202 阅读 · 6 评论 -
vue使用 APlayer+Meting实现音乐播放,支持多平台音乐:网易云、腾讯、虾米、酷狗、百度
我之前写过一篇博客:使用 APlayer 实现音乐播放器,虽然 APlayer 让我实现了想要的音乐播放器效果,但是音频列表 audio 的音频链接、音频封面、歌词等,是需要自己去补充的。 那么这些数据从哪里来呢? 我昨天有发愁一会儿会儿,也去搜了获取音乐列表的接口,可以发请求去获取数据嘛。 也有瞅见MetingJS,A powerful plugin connect APlayer and Meting,一个连接APlayer和Meting的功能强大的插件,附上GitHub地址:https原创 2022-04-24 11:35:00 · 4126 阅读 · 7 评论 -
实现随机标签,字体大小、颜色随机显示
最近写毕业,想实现一下如下图所示的效果(这里以学弟个人博客里的为示例): 如上图所示,随机标签,字体颜色随机,字体大小随机。 下面贴一下我的实现代码。 <template></template>中的代码:<router-link v-for="item in tagList" :key="item.id" :to="`/tag/${item.id}`" :style="{ color: getColor(), fontSize: getSiz原创 2022-04-19 10:51:42 · 1839 阅读 · 1 评论 -
使用 APlayer 实现音乐播放器
最近写毕设,想要实现一个音乐播放功能。大概样子如下面的图所示: 还有吸顶效果,吸顶在左下角: 下面来说一下实现过程。一、安装npm install aplayer --saveyarn add aplayer二、引入import 'APlayer/dist/APlayer.min.css';import APlayer from 'APlayer';三、使用 首先是<template></template>标签里的代码:<div id原创 2022-04-11 11:23:01 · 2703 阅读 · 5 评论 -
在 vue 中使用 vue-typed-js 实现打字机效果
这篇博客和我的博客:原生 JS 实现打印机效果,一个字一个字出现,再一个字一个字消失,如此循环是实现的相同功能——打字机效果。即,一个字一个字出现,再一个字一个字消失,如此循环。如下图为大概样子: 我是在用原生js实现后看到typed.js这个js插件,进而找到了 vue-typed-js这个插件的,上面还有react的,位置如下图所示。 下面说一下 vue-typed-js这个插件的使用。一、安装npm install --save vue-typed-js二、引入import V原创 2022-04-11 11:07:08 · 7104 阅读 · 7 评论 -
vue3那些事
一、vue 版本历史2013年,在 Google 工作的尤雨溪,受到 Angular 的启发,开发出了一款轻量级框架,最初命名为 Seed2013年12月,更名为 Vue,版本号是 0.6.02014年1月24日,Vue 正式对外发布,版本号是 0.8.02014年2月25日,0.9.0 发布,有了自己的代号 Animatrix,这个名字来自动画版的《骇客帝国》,此后,重要的版本都会有自己的代号2015年6月13日,0.12.0发布,代号 Dragon Ball,Laravel 社区(一款流行的原创 2021-12-12 17:31:46 · 2919 阅读 · 0 评论 -
Vue源码探秘之AST抽象语法树
文章目录前言一、抽象语法树是什么二、相关算法储备 - 指针思想三、相关算法储备 - 递归深入1、递归题目12、递归题目2(1) 转换函数写法1(2) 转换函数写法2四、相关算法储备 - 栈1、栈相关知识2、利用“栈”的题目:3、解题思路:4、涉及到的正则表达式相关方法:5、JS代码实现:6、运行结果:五、手写实现AST抽象语法树1. 新建文件夹,创建package.json2. 安装依赖3. 新建webpack.config.js文件,参考webpack官网进行配置4. 新建 www 文件夹,在该文件夹中创原创 2021-12-08 11:37:24 · 1714 阅读 · 0 评论 -
Vue源码之虚拟DOM和diff算法
文章目录前言一、snabbdom简介二、snabbdom测试环境搭建三、虚拟DOM和h函数1. 什么是虚拟 DOM2. diff是发生在虚拟DOM上的3. DOM如何变为虚拟DOM,属于模板编译原理范畴。4. h函数用来产生虚拟节点(vnode)5. 一个虚拟节点有哪些属性6. 创建虚拟节点7. h函数可以嵌套使用,从而得到虚拟DOM树8. 虚拟节点上树四、手写h函数五、感受diff算法六、如何定义是否是“同一个节点”七、创建节点时,所有子节点需要递归创建八、diff 处理新旧节点不是同一个节点时1、手写第原创 2021-12-08 11:30:41 · 345 阅读 · 0 评论 -
初识vue(17)—— 使用 element-ui 的 el-upload 实现文件下载与上传进度条
最近写项目遇到了上传文件显示进度条问题,后来网上学习了一波,最后整理了一下自己成功的方案。 每一部分代码如下: HTML代码:<template> <el-upload class="upload-demo" action="在这里写上传的接口" :show-file-list="false" :before-upload="beforeUpload" :http-request="handleRequest">原创 2021-09-09 15:09:02 · 1620 阅读 · 2 评论 -
初识vue(16)—— 使用 element-ui 的 el-table 时如何处理数据
在用 element-ui 的 el-table 写表格时,曾遇到这样一个问题,后端传来的值并不能作为我表格展示的内容,我需要进行处理。比如后端传来 1 代表 “是”,0 代表 “否”,我需要把对应的文字展示出来。 解决这个问题有两种方法。 以下是我临时写的一个小demo,用的是 element-ui 的 el-table,我想实现的效果是:在是否加密那一列,为 1 的显示为 “是”,为 0 的显示为 “否”。方法一:利用 Table-column Attributes 中的 formatt原创 2021-09-09 11:33:16 · 1686 阅读 · 0 评论 -
初识 vue(15)—— element-ui 的引入与使用
一、安装npm i element-ui -S二、完整引入1、在 main.js 中写入以下内容:import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h => h(原创 2021-03-13 17:37:02 · 414 阅读 · 0 评论 -
初识vue(14)—— 源码分析前的准备
文章目录一、准备知识1. [].slice.call(lis): 将伪数组转换为真数组2. node.nodeType: 得到节点类型3. Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符)4. Object.keys(obj): 得到对象自身可枚举的属性名的数组5. DocumentFragment: 文档碎片(高效批量更新多个节点)6. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性二、三原创 2021-03-10 09:35:01 · 125 阅读 · 0 评论 -
初识vue(13)—— 解决 vue 跨域问题
当我们请求一个接口的时候,出现下图所示情况,说明请求跨域。那么如何解决跨域问题呢?用 vue 脚手架创建好项目后,可以在 vue 项目根目录下找到 config 文件夹,然后找到该文件夹下的 index.js 文件,最后找到下图所示位置的 proxyTable: {} 代码:在该处加入以下代码:proxyTable: { '/api': { // 匹配所有以 '/api'开头的请求路径 target: 'http://localhost:4000', // 应该在这里.原创 2021-02-20 16:36:52 · 214 阅读 · 0 评论 -
初识vue(12)—— 使用 swiper 实现轮播
swiper 中文网地址:http://www.swiper.com.cn/下载 swipernpm install --save swiper在需要用到swiper插件的组件中引入swiper原创 2021-02-19 17:24:10 · 140 阅读 · 0 评论 -
初识vue(11)—— 使用 swiper 时 引入css文件 报错
刚开始我用npm下载了 swiper ,照着视频所述在组件中引入,但报错,代码如下:初步怀疑是版本问题,打开 package.json 文件,发现版本过高,然后改成了版本4的重新运行发现仍然报错,怀疑css文件引错了。打开 node_modules 文件夹,找到 swiper 文件,发现并没有 swiper.main.css 文件,改为 swiper.css文件,再次运行,运行成功运行结果...原创 2021-02-19 10:51:01 · 640 阅读 · 0 评论 -
初识vue(10)—— vue-router 实现底部导航栏固定,组件切换
在实际项目中,我们常会需要设置导航,特别是在移动端,基本都需要设置个固定的底部导航。比如下图所示这种,这时我们就可以通过 vue-router 实现底部导航栏固定,组件切换。具体操作如下:1. 配置路由代码:/* 路由器对象模块*/import Vue from 'vue'import VueRouter from 'vue-router'import MSite from '../pages/MSite/MSite.vue'import Search from '../page原创 2021-02-19 09:49:03 · 3424 阅读 · 0 评论 -
初识vue(9)——如何解决 vue-router 的 router-view 渲染不出来 问题
不知为何,我的 vue-router 的 router-view 渲染不出来内容,找了半天最后发现是单词写错了。⊙▃⊙ 注意下图所示的两个单词别写错了,我就是一不小心把 component 写成了 Component ,害得我找了半天。...原创 2021-02-18 18:19:59 · 521 阅读 · 3 评论 -
初识vue(8)—— webstorm 中已设置ES6仍爆红色波浪警告
在写 Vue 项目时,发现明明代码没问题,却爆红色波浪警告,如下图所示:检查发现已经设置了 ES6 ,但仍然爆红:最后发现是 ESLint 自动监测造成的,照下图所示关掉即可。这样就没问题了...原创 2021-02-17 18:02:45 · 1108 阅读 · 0 评论 -
初识vue(7)—— 关于 vue-router
1. 安装 vue-router:npm install vue-router --save原创 2020-11-10 21:37:21 · 141 阅读 · 0 评论 -
初识vue(6)—— Mint UI 的 完全引入 和 按需引入
Mint UI 是基于 Vue.js 的移动端组件库,包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。关于如何安装 vue 脚手架项目,请看我的博客 初识vue(2)——如何搭建脚手架项目一、完全引入import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'Vue.use(MintUI)new Vue({ el:原创 2020-11-10 09:06:42 · 269 阅读 · 2 评论 -
初识vue(5)——打包发布项目
打包1. 输入以下代码,在本地对当前项目进行编译打包,最终会生成一个文件夹——dist文件夹:npm run build2. 打包完成,可以看到有提示build complete:3. 生成了个dist文件夹:发布(使用静态服务器工具包)1. 全局安装静态服务器:npm install -g serve2.安装成功后,输入以下代码运行dist文件夹:serve dis...原创 2020-10-30 17:07:35 · 268 阅读 · 0 评论 -
初识vue(4)——基于脚手架编写项目
这里我总结一下基于脚手架编写项目的基础写法。在搭建好脚手架项目后,我删除了components、App.vue 、main.vue,重新写我的项目代码。这是文件目录:这是 HelloWorld.vue 代码:<template> <div> <p class="msg">{{msg}}</p> </div&g...原创 2020-10-30 17:00:58 · 264 阅读 · 0 评论 -
初识vue(3)——在webstom、IDEA创建vue模板文件
1、左上角 File ——>settings2、Editor——> File and Code Templates3、点击“+”添加新的模板,输入 Name 、Extension和模板内容,点击 “Apply”再点“OK”。如下图:这里我粘贴的模板内容为<template> <div> </div></template&...原创 2020-10-30 16:01:37 · 392 阅读 · 0 评论 -
初识vue(2)——如何搭建脚手架项目
今天尝试搭建vue脚手架项目,总结一下过程,方便以后使用。1、安装vue-cli可以用npm或者cnpm安装,这里我用的是cnpm:利用淘宝镜像安装cnpm:npm install cnpm -g --registry=https://registry.npm.taobao.org安装完成后,可以查看当前cnpm版本:cnpm -v全局安装 vue-cli(这个命令只需要...原创 2020-10-30 15:17:01 · 295 阅读 · 0 评论 -
初识vue(1)——一篇博客教你掌握 vue 基础
最近跟着vue相关视频学了些vue的基础知识,做此总结,以防遗忘。Hello Vue1、引入vue.js:<script type="text/javascript" src="../js/vue.js"></script>2、创建Vue对象:el : 指定根element(选择器,指定用vue来管理页面中的哪个标签区域)data : 初始化数据这是ht...原创 2020-10-29 21:36:36 · 1255 阅读 · 8 评论