项目开发
crystal_iwwish
多读书 多看日出
展开
-
echarts图表随着窗口大小改变自刷新问题解决
使用window.onresize缺点:多个echarts的时候就只有最后一个生效了,onresize会被覆盖 const myChart = echarts.init(this.$refs.echartRef) window.onresize = function () { myChart.resize() }使用window.addEventListener添加resize方法 const myChart = echarts.init(this.$refs.echart原创 2022-02-03 17:14:05 · 2755 阅读 · 0 评论 -
vue设置路由-当子路由只有一个,父路由无法显示
父路由无法显示问题解决原创 2022-01-31 09:38:25 · 1595 阅读 · 0 评论 -
Vue-Less的自动和手动引入
先准备样式变量文件style.less@fontColor: #27ba9b;手动引入在vue页面的style中使用<style scoped lang='less'>// 引入@import '~@/styles/variables.less';// 使用p { color: @sucColor;}</style>自动引入下载一个vue-cil插件vue add style-resources-loader安装完毕后会在vue.co.原创 2022-01-13 20:16:28 · 300 阅读 · 0 评论 -
Vuex-持久化
在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储,持久化:1. 数据存到vuex(内存)2.数据同时存到本地(硬盘localStorage)这里我们用vuex的一个插件来持久化存储vuex安装vuex-persistedstate 插件vuex中准备user模块(user模块中存的用户信息是所需要持久化存储的,根据自己需求而变化)=》store/modules/user.js将插件配置到vuex的plugins选项中,配置user模块进行状态持久化修改s.原创 2022-01-13 16:12:59 · 291 阅读 · 0 评论 -
对instance进行二次封装
/** * * @param {*} url 后台请求地址 * @param {*} method 方法(get/post) * @param {*} submitData 传递给后台的参数 * @returns */const request = (url, method, submitData) => { return instance({ url, method, [method === 'get' ? 'params' : 'data']: submi原创 2022-01-11 09:15:09 · 852 阅读 · 0 评论 -
Vue的调试工具(Chrome 浏览器)配置
在Chrome浏览器右上角点击这个按钮:点击更多工具下的->扩展程序开启开发者模式,并将下载好的安装包,解压并加载进来Vue.js devtools 详细信息如下原创 2021-12-29 21:01:47 · 964 阅读 · 0 评论 -
Vue权限管理
基于vue-admin-template 的权限管理方法原创 2021-12-28 23:32:10 · 777 阅读 · 0 评论 -
存储图片到第三方云服务器
结构:<template> <div> <el-upload class="avatar-uploader" action="#" :show-file-list="false" // :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" .原创 2021-12-25 23:45:08 · 485 阅读 · 0 评论 -
后台系统-新增和编辑共用一个弹框(基于vue和element-ui)
如图所示:点击新增角色和编辑会弹出一个弹框,弹框只写一个,如何实现共用同一结构,功能却不相同呢?首先给这两个按钮定义一个点击事件,事件名为openDialog这里不同的是 给编辑这个按钮根据作用域插槽解构了一个row还有一个2,这个2就是我们区分编辑和新增的关键这里的roleForm是上述table表格绑定的数据...原创 2021-12-21 19:55:18 · 1232 阅读 · 0 评论 -
vuex-token的持久化
vuex中处理tokenstate中定义一个tokenactions请求获得token值,但是actions不能直接修改state中token的值,通过模块化调用,使用mutation中的函数来改变token的值mutation定义改变token和删除token的两个函数持久化存储token的值可以在本地存储一份在对token初始化的时候,可以从本地获取一下,优先使用本地的tokensetToken的时候,在本地也存一下removeToken的时候,本地也删除tokenimport原创 2021-12-16 22:34:35 · 520 阅读 · 0 评论 -
vue-cil解决开发环境的跨域问题
为什么会产生跨域问题由于浏览器同源策略的限制,当前端项目运行的服务地址 和 接口服务运行的地址 协议 域名 端口 三者有一个不一致就会出现跨域解决开发环境的跨域问题ue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题步骤:步骤1.在vue-config.js中配置步骤2.修改环境配置文件(.env.development)baseURL步骤3.重启项目,查看接口调用效果(一定要重启项目)步骤1.module.exports = { devServer原创 2021-12-16 22:14:42 · 262 阅读 · 0 评论 -
Vue-格式化时间
格式化时间采取过滤器步骤:下载格式化时间的第三方包在项目入口文件 main.js 中导入并使用 dayjs并定义全局过滤器在组件中,调用全局过滤器,对时间进行格式化:案例:把以下表格的发表时间改为YYYY-MM-DD HH:mm:ss格式步骤1:npm i [email protected] -S步骤2:import dayjs from 'dayjs'// 定义全局过滤器Vue.filter('dateFormat', (dt) => { return dayjs(dt).f原创 2021-12-09 19:37:13 · 212 阅读 · 0 评论 -
Vue-自定义表单验证
实例:判断两次输入密码是否一致1.在data函数的return前面,写一个表单验证2.使用这个表单验证,就用validator原创 2021-12-07 00:01:28 · 584 阅读 · 0 评论 -
Vue-项目初始化
基于 vue-cli 初始化 Vue2 模板的项目目的:为后面的项目开发做准备。初始化 vue-cli 的核心步骤:Manually select features(*) Choose Vue version(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support(*) Router(*) Vuex(*) CSS Pre-processors(*) Linter / Formatter( ) Unit Testi原创 2021-12-02 16:38:55 · 867 阅读 · 0 评论