success400-CSDN博客

原创 vuex实现数据持久化(二)

数据持久化依赖浏览器的 LocalStorage，使用 lowdb (opens new window)API 加自己的取值包装实现了便捷的的操作和取值方法，通过不同的接口可以访问到持久化数据不同的内容，例如不同用户独有的存储区域，系统存储区域，公用存储，根据路由自动划分的存储区域等。npm install lowdbnpm i --save lodash1.在libs目录下创建util.db.jsimport low from 'lowdb'import LocalStorage from

2021-05-10 19:45:59 628

原创使用Vue.js 2.0搭建单页应用（一）

总览对数据持久化做了更清晰的包装。数据持久化依赖浏览器的 LocalStorage，使用 lowdb (opens new window)API 加自己的取值包装实现了便捷的的操作和取值方法，通过不同的接口可以访问到持久化数据不同的内容，例如不同用户独有的存储区域，系统存储区域，公用存储，根据路由自动划分的存储区域等。项目环境搭建// 安装vuexnpm install vuex --save// 安装vue-routernpm install vue-router...

2021-05-10 11:48:43 429

原创 vue中使用scrollreveal制作滚动动画

现在很多产品展示的网页在滚动的时候会触发动画，如果用js去写的话需要监听scrolltop，会很繁琐，而scrollreveal.js可以完美地实现这样的效果，满足我们自定义css3动画以及支持animated.css。首先，安装用npm插件:npm install scrollreveal引入到main.js中，利用Vue原型链继承，初始化,引入封装好的动画库。import scrollReveal from "scrollreveal";// 引入初始css样式import "./asse

2021-05-08 15:38:37 2368 1

原创解决vuex页面刷新异步数据丢失问题

在vue项目中用vuex来做全局的状态管理，发现当刷新网页后，保存在vuex实例store里的数据会丢失。1.产生原因其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被清空。就相当于你声明的全局变量存储在堆和栈内存当中，页面刷新之后就会全部销毁，需要你进行重新赋值。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的

2020-11-12 15:50:56 4224 14

原创 vue中封装富文本编辑器Quill

quill，样式不用多说，也是主流的黑白清新风，美观，功能上虽然不是很多，甚至还没有表格，网络图片上传（可以通过复制网络图片并黏贴解决）等功能，但它的代码高亮是最完美的，同样支持行内编辑模式，可自定义，总的来说，这是一款优点多但缺点同样明显的编辑器，以前用过UEditor，区别大概就是UEditor需要在config文件配置参数，比如上传图片路径之类，Quill不需要，另外就是有个vue-quill-editor包，配合vue使用比较简单吧，所以我比较喜爱这款。安装npm install quill@1

2020-10-23 10:49:45 1236 5

原创 Animate.css在vue中没生效

"animate.css": "^4.1.1",第一步第二步>V4版本使用第一步npm install animate.css --save// oryarn add animate.css//or cdn<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /></hea

2020-09-22 15:01:56 2900 2

原创 vue组件之间通信方法

万金油：vue中央事件总线的使用vue中央事件总线这种方法适用于任何情况的父子组件通信，同级别组件通信，相当于组件通信间的万金油。但是碰到多人合作时，代码的维护性较低，代码可读性低（这个缺点可以忽略）。在vue-cli中使用集中式事件管理机制：第一步：在 src/main.js新建一个$bus对象，其实他是一个全新的Vue实例// main.jslet $bus = new Vue()Vue.prototype.$bus = $bus示例：index.vue为父组件，两个子组件 heade

2020-09-04 10:59:22 363

原创 Vue校验规则

内置了一些校验规则，如是否手机号，邮箱号，URL等这些规则方法，挂载在==$r==下面，如果验证通过，返回true，否则返回false导入脚本大家可以通过本链接: GitHup.地址进行代码下载是否邮箱号email(email)校验是否邮箱号，返回true或者false// email <String> 字符串console.log(this.$r.email('123465798@gmail.com'));是否手机号mobile(mobile)校验是否手机号，返回true或

2020-07-22 11:53:09 1794

原创 Vue2.0项目工程升级3.0

建议读者先通过通过官网先了解一下链接: Vue CLI3.0下面就简单分享一下我的升级过程因为我构建项目都是基于3.0的，所以对于2.0的用户可以先升级一下脚手架工具已经装了2.0的话就需要先卸载npm uninstall vue-cli -g 或 yarn global remove vue-cli安装新版本脚手架npm install -g @vue/cli 或 yarn global add @vue/cli然后创建一个新的项目工程，如果没有创建过3.0项目工程建议先阅读一下这

2020-07-16 15:31:34 14064 8

原创 uni-app如何使用矢量图

一：在阿里巴巴矢量图标库中将文件下载到本地路径：图标管理 ----- 我的项目—>我参与的项目二：解压文件夹找到iconfont.css,将其放到自己的uni-app项目中三：替换第一步的矢量图在线链接，如果在App上不显示图标，在src前面加上https:建议使用Font class的形式加载矢量图，Unicode属性在v-for循环时会出现问题。ios端效果...

2020-07-15 16:13:29 1830

原创 linux环境安装node环境以及项目运行

1.服务器的任意目录中，比如/opt，然后进入该目录安装安装包，解压cd /optwget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xztar xf node-v10.9.0-linux-x64.tar.xz ls 2.移动解压完成之后的node包，更改文件名mv node-v10.9.0-linux-x64 /usr/local/cd /usr/local/mv node-v10.9.0-linux-x64/

2020-07-14 15:42:44 1521 2

原创 express解决跨域方法

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源，简称同源。想要了解"同源政策"的各个方面可以看看阮一峰老师的文章http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html今天在调试登录接口的时候，才发现自己利用postman能够请求成功的接口，在请求的时候报错了。原来是因为我项目的端口地址是8081。而我的接口配置端口地址却是3031在这里插入图片描述解决方法，打开app.js配置文件，在接口请求前配

2020-07-08 16:18:36 10207 1

success400的博客