vue.js
文章平均质量分 58
wangle_style
这个作者很懒,什么都没留下…
展开
-
uni-app项目架构(二)
书接上回,上面讲了uni-app的package.json的生成和使用以及router的使用,还讲了多环境下的环境变量的配置,这一篇说一下request卫士,router卫士,请求函数封装,安全之类的一:request卫士--在实际开发过程中,我们可能需要对买次请求的过程进行监督,并Do something,所以就需要封装一个全局的request卫士用来监听,如下配置:在main.js中import axios from 'axios'// request interceptoraxios.原创 2020-09-22 09:54:36 · 882 阅读 · 3 评论 -
electron-vue实现自动更新功能
electron-vue项目很多时候需要自动更新的功能,避免每次发版都要单独发安装包的尴尬,下面介绍一下如何利用electron-updater来实现自动更新一、首先是安装,安装方式很多,不多说,这里需要注意的是electron-updater、electron以及electron-builder版本之间的兼容性由于git上下来的electron-vue项目electron版本比较低为2x版本,所以对于版本比较高的electron-updater是不支持的,这里推荐使用3x到4x之间的electr.原创 2020-09-19 15:01:35 · 3054 阅读 · 4 评论 -
vue多实例情况下eacharts的异步获取数据
html就不写了,自行解决吧,下面写写js一:首先在methods中写一个模型:methods(){ huitu_yxqs:function(){ var myChart5 = echarts.init(document.getElementById('qushi_fx')); myChart5.setOption({ title: { ...原创 2018-06-09 14:09:33 · 1715 阅读 · 0 评论 -
vue+element使用vue-quill-editor的富文本编辑器
备注:我这里采用的是npm的安装模式配合vue-cli1.安装:cnpm install vue-quill-editor --save2.安装quill依赖:cnpm install quill --save3.如何很多页面都需要用到,可以选择在main.js中引入,如下: import VueQuillEditor from 'vue-quill-editor' imp...原创 2018-11-21 10:54:38 · 2341 阅读 · 0 评论 -
vue-element-admin撸后台实践(一)
一个项目首先要解决的问题,同时也是核心的问题就是登陆和权限的问题,vue-element-admin将路由和左边侧栏进行了绑定,所以我们要解决的就是根据不同的role,生成不同的路由,然后动态渲染不同的侧边栏,同时还要解决在后台可以通过tree控件动态设置权限的效果,所以,先撸一下整体实现思路:首先要说一下,vue-element-admin是怎么与后端进行交互的:用户端有交互提交----&g...原创 2019-02-28 16:13:28 · 6700 阅读 · 2 评论 -
实撸vue-element-admin(二)
之前撸了权限和登陆,这次补一下利用tree控件动态设置权限,和一些单个功能的实现:一:首先是新增角色,需要说的是,我们之前的思路是登陆之后就绑定了该角色,然后把cookie信息写上来供后端去在请求头里获取role来做角色关系处理!1.点击确定创建按钮后执行如下操作:// 添加角色 || 修改角色 async _addRole() { if (!this.roleN...原创 2019-03-05 11:02:32 · 1106 阅读 · 0 评论 -
vue-element-admin 之单个功能篇(三)
前面说完了登陆以及权限和利用tree进行动态更改权限的问题,下面撸一下单个的功能:一:table功能首先分析下table由三部分组成,搜索栏/table/分页栏1.在钩子函数里调用获取table数据的函数来渲染table// 获取活动列表 async _fetchActivityList() { this.listLoading = true //加载动画 ...原创 2019-03-05 17:21:37 · 2083 阅读 · 0 评论 -
vue-element-admin与后端交互流程(补)(跨域)
有些朋友说,一个交互过程东一下,西一下的,不知所以然,所以在此补一下vue-element-admin的整体框架结构,并细说一下交互的过程,包括跨域问题!一:首先是整体框架结构:├── build // 构建相关(build.js/webpack等)├── config // 配置相关 (代理环境配置/l...原创 2019-03-06 13:00:24 · 31967 阅读 · 22 评论 -
基于vue-cli搭建的脚手架中的一些相关配置(转载)
当我们需要和后台分离部署的时候,必须配置config/index.js:用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置)var path = require('path') module.exports = { build: { index: path.resolve(__dirname, 'dist/index.html'), assets...翻译 2019-05-19 10:39:01 · 429 阅读 · 0 评论 -
vue-element-admin中如何vuex的使用
有的朋友会疑惑vue-element-admin中vuex是怎么使用的,首先要说的是,vue-element-admin中把store给model化了,就是说分成a/b/c/d...的很多模块,每个模块都有自己的state/mutation/getter/action,在大的项目中,这么做的效果还是显而易见的,因为单一的状态树种,随着项目的不断迭代,会有很多状态和mutation放入同一个stat...原创 2019-05-17 10:16:04 · 7047 阅读 · 3 评论 -
前后端分离项目,ngnix如何在一台服务器部署多套前端代码
首先是ng的配置:server { listen 80 default_server reuseport; #listen [::]:80 default_server ipv6only=on; server_name _; index index.html index.htm index.php; #...原创 2019-09-20 15:31:48 · 3158 阅读 · 0 评论 -
vue简单实现记住密码功能
原理是在提交表单的时候把用户名和密码的值存入cookie中然后再次进入页面时读取cookiehtml部分<div class="log_form"> <div class="log_form_biao">蚊子蚊子蚊子</div> <div class="log_form_inp"&g原创 2018-05-28 15:34:13 · 8461 阅读 · 2 评论 -
不用插件vue实现滚动加载
关键所在是实现滚动到底部,然后进行post请求,然后将获得的分页的数据push到数组中1,在data中定义三个变量page,isadd,data_wrpa其中page是控制分页的,isadd是控制是否post的,data_wrpa是数据的容器2,给容器绑定scroll事件<ul class="left_li_ul" @scroll="gd_add"> <...原创 2018-05-16 12:01:59 · 6813 阅读 · 2 评论 -
vue引入其他框架组件方法汇总
博前声明:这些方法都是基于nod.js的npm和webpack打包构建工具的前提下一、引入jQuery框架:首先在当前项目的根目录下(就是与package.json同目录),运行命令cnpm install jquery --save-dev 这样就将jquery安装到了这个项目中。然后修改webpack.base.conf.js两个地方:其一:加入var webpack = ...原创 2017-10-13 14:43:46 · 2985 阅读 · 0 评论 -
webpack+vue构建前端框架简单实例
一:初始化项目:1:建立根文件夹:vueindex2:cmd进入vueindex文件夹下,安装如下依赖:cnpm init -y (会在vueindex根目录下创建一个package.json文件,用于存放各种目录);cnpm install --save vue (局部安装VUE);cnpm install --save-dev webpack (局部安装webp翻译 2017-12-22 12:01:32 · 975 阅读 · 0 评论 -
vue.js中的总结
1:vue中使用jq时选择器不能用this的解决方式:jq中的this是很方便的,比如可以让点击哪个元素哪个元素触发事件--如:$('.span').click(function(){ $(this).addClass('fanzhuan')})但vue中this的指向是vue实例,所以这种$(this)的方式是不能用了,但可以利用eq(index)<span v-for="(item...原创 2018-01-19 15:35:19 · 222 阅读 · 0 评论 -
新版vue-cli如何使用json-server来mork
新版的vue-cli由于把dev-server。js合并到webpack.dev.conf.js中,所以在配置json-server的时候文档中的方法就不适应了第一步:安装:命令行中输入 cnpm install json-server --save第二步:找到build/webpack.dev.conf.js并在const portfinder = require('portfinder')这一...原创 2018-03-06 11:28:32 · 3232 阅读 · 4 评论 -
better-scroll在vue中实现原生滚动和上拉/下拉加载的效果
为了方便在VUE中的使用,可以把better-scroll抽化成一个组件,比如我抽化成了一个scroll组件,如下:<template>//ref="wrapper"不能更改 <div ref="wrapper">//此处放加载异步加载的内容 <slot name="header"></slot>//此处为上拉后没有数据的时候显示原创 2018-04-03 09:34:25 · 5655 阅读 · 3 评论 -
jquery-confirm小弹窗插件的简单使用
这里只是简单的说说如何在vue中使用,想看更多的可以移步此插件官网,很详细http://craftpip.github.io/jquery-confirm/安装和全局引用就不多说了,很简单npm,import就好了需要注意的是,要引入css文件,否则样式不会被加载进来<template> <div class=""> <button type="butto...原创 2018-04-03 09:47:08 · 1309 阅读 · 0 评论 -
echarts在vue中的使用
安装:cmd进入项目根文件夹 cnpm install echarts --savemain.js中全局引入:import echarts from 'echarts'Vue.prototype.$echarts = echarts或者不用在main.js中全局引入,哪个页面使用在哪里引入即可,比如我是在load_ajax.vue这个页面用所以,此页面结构如下:<template> ...原创 2018-04-03 10:00:24 · 2199 阅读 · 0 评论 -
利用vue-router的动态路由和路由传值实现同一模板渲染不同数据
在日常开发中有一种场景非常常见,比如有一百个列表链接,点击链接后进入的页面模板布局都是一样的,只是简单的有些数据不一样,所以在vue中可以利用vue-router的动态路由和路由传值实现,具体如下:1,在配置模板页面的路由的时候要用动态路由,并开启props模式:{ path:'/auction_detail_index/:id', component:auct原创 2018-04-03 10:37:52 · 5119 阅读 · 1 评论 -
vuex的入门文档
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :template>转载 2018-04-26 14:06:54 · 256 阅读 · 0 评论 -
vue实现动态验证码和短信验证码
一:动态验证码:html部分<div style="display: flex;align-items: center;"> <span>验证码:</span> <i-input v-model="picLyanzhengma" placeholder="请输入验证码" sty原创 2018-05-25 16:35:38 · 11131 阅读 · 1 评论 -
vue.js生命周期钩子详解
Vue实例从创建到销毁的过程,就是生命周期。Vue的生命周期包括:开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些JavaScript方法中的this直接指向的是vue的实例。在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这转载 2017-10-22 14:17:15 · 1621 阅读 · 0 评论