大前端-vue
天空影
此生多磨难,此身越重洋
展开
-
Vue3浅尝
Vue3浅尝中文版API文档地址:Vue3中文文档脚手架文档地址:Vue CLI本文基于vue-cli@4.5.0脚手架,vue@3.0.0-0,typescript实现。代码地址后续文档更新地址脚手架安装安装# 全局安装npm i -g @vue/cli# 创建项目vue create vue3-study# 使用typescriptvue add typescript配置vue.config.js// vue.config.jsconst path = require原创 2020-09-27 14:51:21 · 968 阅读 · 0 评论 -
axios取消上次重复请求
转载原文地址忘了,当时是随手搜的问题基于axiosutils/request.tslet pending: any[] = []; // 声明一个数组用于存储每个请求的取消函数和axios标识let cancelToken = axios.CancelToken;let removePending = (config: any) => { for (let p in pending) { // 当前请求在数组中存在时执行函数体 if (pending[p].u ===原创 2020-07-06 18:40:30 · 637 阅读 · 0 评论 -
vue-cli封装axios
为什么要封装axios我就不多说了,总而言之就是为了方便开发配置如果需要配置跨域代理的话,可以先看看我这篇文章:vue-cli配置跨域全局方法新建src/request/http.js/**axios封装 * 请求拦截、相应拦截、错误统一处理 */import axios from 'axios';import router from '@/router'// 环境的切换/...原创 2019-04-15 17:04:05 · 1021 阅读 · 0 评论 -
vue-cli中css引入图片打包路径问题
问题开发模式图片路径(存储文件夹)src |__assets |__img |__css |__js这是我在css中引入图片的写法,在开发模式中是ok的base.scss$icon_url :'../img/icon.png' ;.logo{ background:url('../img/login_logo.png');}打包后这里就发现这个路径在cs...原创 2019-04-12 17:52:20 · 6082 阅读 · 0 评论 -
vue-cli进阶使用vuex(配合axios)
首先这不是一篇很正经的博客,这个只是我在项目实际中使用vuex的一些做法,不过其实做的不是很彻底,因为我没有彻底分离action,getter……。前面其实也写了一下简单实用vuex的,不过我觉得原来的不适合运用在正经项目中,所以就把那篇作为一个入门基础文:vue-cli简单实用vuex这里还要配合一下:vue-cli封装axios,因为我引入的文件就是这里的配置src/store/ind...原创 2019-04-17 17:50:48 · 680 阅读 · 0 评论 -
element-ui——默认事件添加额外参数
大家都知道element-ui很多事件他都有默认参数,这里我就用下拉框来简单的说一下<template> <el-select v-model="value5" multiple placeholder="请选择" @change="change"> <el-option v-for="item in options" :key=...原创 2019-05-15 14:59:19 · 6528 阅读 · 0 评论 -
vue脚手架兼容IE
我是使用vue脚手架开发项目的,但是今天在别人电脑上发现打不开,然后就发现是使用了360浏览器,然后f12中报错:Promise未定义,我自己使用IE浏览器打开也发现报错:Vuex require babel-polyfill promise。然后由此发现应该是缺少ES6运行环境支持。解决1、下载npm instal babel-polyfill --save-dev2、引用main....原创 2019-05-21 09:54:39 · 936 阅读 · 0 评论 -
element-ui——树形控件默认高亮选中
这篇博客是因为我按照文档提示使用控件方法不能正确默认选中才写的。我的数据是多变的,也就是可能会刷新两三次。方法就是下面这个,但是这个位置很有讲究:highlight-current="true"ref="treeBox"node-key="departmentId" this.$nextTick(() => { // treeBox 元素的ref value ...原创 2019-05-21 15:01:51 · 8649 阅读 · 3 评论 -
vuex进阶使用
接上文:vue-cli简单使用vuex因为最近在对项目进行重构工作,所以就慢慢抽离了一些模块,最早做的就是重构了vuex模块,我发现我写的太垃圾了,我自己都看不下去了。所以在对vuex深入了解之后就动手把vuex模块无缝重构了,下面就是我在实验vuex的一些体会。抽离层级在上一篇文章中我们就发现我们的store文件就一个,这明显就不利于协助开发和维护,所以我们首先就是抽离store中各个模块...原创 2019-06-22 11:11:07 · 513 阅读 · 0 评论 -
axios封装(附带token静默刷新)
/**axios封装 * 请求拦截、相应拦截、错误统一处理 */import axios from 'axios';import router from '@/router'import urls from './urls'const base = urls.base;const base = urls.base;// 创建axios实例var instance = axios....原创 2019-09-05 17:21:18 · 2762 阅读 · 1 评论 -
vue封装组件(简单入门)
因为接下来的项目准备用vue,而我其实对vue只是半吊子的了解,所以也是在项目正式开始之前努力的学习一下项目需要用到的东西。然后因为这两天在搞tinymce富文本技术预言,所以也是跟着网上的案例半懂不懂的弄出来了,但是对其中封装的组件调用确实很不明白,所以也是在文档和网上似是非是的介绍中搞了一下,所以也是写下来作为学习vue的一个小里程。1、创建子组件components/Child/Inde...原创 2019-03-04 15:34:49 · 7535 阅读 · 0 评论 -
vue-cli跨域使用代理
这个方法是面向vue-cli的,所以在使用之前请先初始化好vue-cli工程下载中间件npm install -S http-proxy-middleware配置代理config/index.js// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: { '/': { t...原创 2018-08-17 09:52:29 · 1789 阅读 · 0 评论 -
mock模拟增删改查操作
mock简单使用:vue简单使用mock模拟后台数据使用1、新建mock.jsimport Mock from 'mockjs'// 模拟数据列表var arr = [];for (let i = 0; i < 10; i++) { let newArticleObject = { name: '小明', content: '内容...原创 2018-08-22 14:02:10 · 8975 阅读 · 5 评论 -
vue-router的简单使用(简单)
下载npm install vue-router --save目录组织:src |__components |__callSource.vue |__cancld.vue |__Config |__js |__router.js |__index.ht...原创 2018-02-03 20:00:05 · 754 阅读 · 0 评论 -
element-ui——时间组件范围选择三个月后
最近有个小伙伴问我的一个需求:就是说输入一个时间,然后在日历里可以显示当前日期对应的星期几,可以在日历里选择这个时间段往后的三个月时间,其余时间都不能选择。除了这三个月,其他所有时间都不可选。因为我的技术栈不是vue,所以我也是在 stackflow思否 上提问,有人回答说用element-ui,然后就去看了一下element-ui文档,再加网上百度了一下,然后就弄出这么一个demo。da...原创 2018-04-02 11:06:34 · 8624 阅读 · 1 评论 -
拖拽排序vue组件
因为项目一开始用的jquery,所以当时找的拖拽排序插件是jquery-ui。然后最近想着是不是也可以用vue来做拖拽排序,前期找了几个,但是好像是不支持v2.0的,然后在思否刚好看到一篇文章,也是讲拖拽排序组件的,然后自己就跟着弄下来试了试。安装npm install awe-dnd --savemain.jsimport VueDND from 'awe-dnd'Vue.u...原创 2018-04-03 15:03:11 · 17494 阅读 · 6 评论 -
webpack配置vue开发环境
首先,你要完成了下面几点:配置css 配置js 配置图片文件配置html-webpack-plugin(可选)然后安装vue需要的包npm install vue vue-loader vue-style-loader vue-html-loader vue-template-compiler --save-dev这里强调一下 :vue-loader 现在安装的话都...原创 2018-04-27 11:16:46 · 2251 阅读 · 1 评论 -
vue二级菜单导航点击选中事件
因为没有使用vue做一个真正完整的项目,所以乘着这个项目比较闲的时间,对标项目用vue做一些页面,丰富自己的项目经验。所以接下来基本都是一些简单的功能。目标:一级导航点击收缩展开,二级导航点击选中 源码 主要是思路,具体的就不放了<ul class="sidebar-menu"> <li class="treeNav" v-for="(item,inde...原创 2018-04-27 18:17:57 · 12496 阅读 · 1 评论 -
router-link绑定事件
router-link上常规添加@click 事件是失效的,比如下面的jump() 就不能被执行<template> <div id="app"> <h1>hello app!</h1> <p> <router-link to='/page1' >pa原创 2018-04-28 10:43:29 · 1932 阅读 · 0 评论 -
vue定义全局变量
Vue.js 如何添加全局常量或变量? 思路将变量放到 window 对象上面1、普通创建 global.jswindow.a = 1;main.js 中引用import './global.js'实际使用 console.log(a) //1缺点:如果定义的参数一多估计人都要炸了2、进阶global.jsconst config =...原创 2018-06-04 16:20:22 · 8593 阅读 · 0 评论 -
vue-cli简单使用vuex
下载npm install vuex --save使用新建一个文件夹(javascript)新建一个文件(store.js)store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { co...原创 2018-08-10 14:48:08 · 279 阅读 · 0 评论 -
vue简单使用mock模拟后台数据
下载npm install mockjs --save-dev使用1、新建mock.jsimport Mock from 'mockjs'Mock.mock("/getTest",{ "name1|1-3": 'a', "name2|2": 'b',});2、新建vue文件<template> <div> ...原创 2018-08-22 13:55:29 · 2358 阅读 · 0 评论 -
vue中使用axios(简单待续)
这里就先大致的写一下,因为自己也是初学,然后也实在是走了不少了弯路,后续再完善!要想使用axios首先先下载axios:npm install --save axios然后在main.js中import axios from 'axios';Vue.prototype.$http = axios;//在原型链式全局注册在组件中使用template> div clas原创 2018-02-02 16:25:04 · 1139 阅读 · 0 评论