vue
九段刀客
你期待的并且相信的,终将实现!
展开
-
macbook electron项目无法启动
electron原创 2023-06-25 16:29:00 · 848 阅读 · 0 评论 -
vue使用全局混入的方式实现数据字典的快速获取,并用vuex存储
在开发管理系统类的项目数据字典是一个非常常用的功能,比如产品类型,业务组织,邮递类型这种比较简单的数据,有可能更改,但是大多数情况下又不会更改,用一个数据字典来维护这些数据就非常方便。下面介绍一种简单的方式获取数据字典。组件import { get } from "@/api/dictDetail";import Vue from "vue";class Dict { constructor(dict) { this.dict = dict; } async init(names) {原创 2020-10-30 16:34:12 · 7610 阅读 · 17 评论 -
iis 部署docsify文档 .md文件404
缺少对应文件类型导致的404重启服务原创 2022-03-18 17:09:56 · 381 阅读 · 0 评论 -
解决vue3 + electron 中使用ipcRenderer报错的问题
版本信息“electron”: “^13.0.0”,“vue”: “^3.2.19”报错原因electron新版本默认禁止页面中直接操作 electron的相关api解决办法通过脚本注入webview中,将要操作的api添加到全局变量中1、vue.config.jsmodule.exports = { pluginOptions: { electronBuilder: { preload: "src/preload.js" } }};2、pre原创 2022-02-06 14:55:37 · 11895 阅读 · 2 评论 -
解决vue-cli项目ico图标修改无效问题
1、public/index.html直接写死<link rel="icon" href="favicon.ico" />2、vue.config.js中添加配置 pwa: { iconPaths: { favicon32: 'favicon.ico', favicon16: 'favicon.ico', appleTouchIcon: 'favicon.ico', maskIcon: 'favicon.ico', m原创 2021-11-04 09:51:34 · 1676 阅读 · 1 评论 -
vue 内置组件transition实现自定义过渡动画
<transition name="fade-mainMenu"> <mdMenu v-model:show="show_menu" /></transition>.fade-mainMenu-enter-active { animation: fade-mainMenu-in .2s;}.fade-mainMenu-leave-active { animation: fade-mainMenu-out .2s;}@keyframes原创 2021-11-01 10:10:30 · 423 阅读 · 0 评论 -
vue3不带修饰符自定义v-model和带修饰符指令
1、不带修饰符的v-model父组件中使用<button @click="click_btn">点击事件</button><ChildComponent v-model="show" />import {reactive, toRefs} from 'vue'export default{ setup(props,{emit}){ const data = reactive({show:false}) function click_btn(){原创 2021-10-23 20:01:01 · 1348 阅读 · 0 评论 -
vue中引入sass全局变量
1、安装依赖npm install --save-dev sass-resources-loader2、vue.config.js中添加配置css: { loaderOptions: { sass: { prependData: `@import './src/styles/variables.scss';`, }, }, },原创 2021-09-24 15:07:25 · 255 阅读 · 0 评论 -
abp项目 vue 配置代理不生效
正确示范直接proxy给地址就可以了,不需要其他的任何配置 devServer: { port: 4200, open: true, proxy: "http://xxxxxx:8090/api/", },不生效的写法以前都是这样写的,不生效devServer: { proxy: { '/api': { //这里最好有一个 / target: 'http://xxxxxx:8081', // 后台接口域名原创 2021-09-23 16:16:23 · 125 阅读 · 0 评论 -
window配置.bat文件启动vue项目
命令行启动有时候有点麻烦,新建一个.bat文件直接双击打开启动非常方便,内容跟正常启动命令是一样的,根据script里配置的命令npm run start原创 2021-09-22 18:43:09 · 450 阅读 · 0 评论 -
abp项目中vue + “@microsoft/signalr“: “^5.0.7“实现及时通信
核心是这个东西 this.connection.on("ReceiveMessage"必须叫ReceiveMessageimport { HubConnectionBuilder, HubConnectionState } from "@microsoft/signalr";created:{this.connect();},methods:{ connect() { let url = `${process.env.VUE_APP_BASE_API}/signalr-hu原创 2021-09-06 21:06:48 · 687 阅读 · 0 评论 -
vue自定义指令实现拖拽div移动
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-03-11 18:53:02 · 319 阅读 · 0 评论 -
Vue3学习笔记四:Vue3中使用Eventbus组件通讯
vue3中已经移除了emit,emit,emit,on等方法,Eventbus通讯使用的是发布订阅的设计模式,可以自己实现一个。下面我用的是typescript// 为保持和vue2版本中使用bus一致,emit,on,off前面都加了$class Bus { list: { [key: string]: Array<Function> }; constructor() { // 收集订阅信息,调度中心 this.list = {}; } // 订阅 $on(name:原创 2020-12-01 17:43:58 · 14305 阅读 · 4 评论 -
vue3学习笔记二:readonly、watchEffect、watch
readonly传入一个对象(响应式或普通)或ref,返回一个原始对象的只读代理。会递归里面的所有属性都是只读的。let {readonly, createApp} = Vue;createApp({ setup(){ const test = readonly({name:222, arr:[{test:333}]}) //尝试添加点击事件看能不能改变 function clickName(){ test.name = 100 } return原创 2020-11-17 16:23:13 · 812 阅读 · 0 评论 -
vue项目中使用Object.freeze()来优化列表,附带性能分析截图
看了大佬的博客https://juejin.im/post/6844903913410314247vue项目性能优化里面提到如果是纯粹用来列表展示不需要改变里面属性的数据,可以用Object.freeze()冻结对象,避免被Object.defineProperty数据劫持,从而来实现优化。下面我写了个简单的demo,通过断点调试的方式来验证了一下,<!DOCTYPE html><html lang="en"><head> <meta charset="UT原创 2020-10-15 17:42:11 · 961 阅读 · 0 评论 -
webpack学习笔记八:实现一个vue脚手架
安装依赖可以到vue的官网中查看Vue Loader部分文档https://vue-loader.vuejs.org/zh/guide/#vue-clicnpm install -D vue-loader vue-template-compiler配置1、 在插件中添加vue-loader2、在加载器中添加.vue文件的解析3、生成HTML指定了一个模板HTML文件4、man.js中引入了app.vuewebpack.config.js// 生成HTMLconst HtmlWebp原创 2020-10-08 22:10:29 · 235 阅读 · 0 评论 -
vue3 Composition组合API的简单使用
vue3可以选择使用vue2中使用的optons配置API,也可以选择使用新的Composition API,下面写一个简单的demo体验一下组合api的使用,setupsetup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。setup中的this指向和vue2中的this指向不同,不要在setup函数中使用thisreactivereactive函数接受一个普通对象,返回一个响应式数据对象refref函数接收一个基本类型数据,返回一个响应式数据,在set原创 2020-08-11 14:26:37 · 1041 阅读 · 0 评论 -
vue-cli4项目配置cdn引入静态资源
脚手架版本:@vue/cli 4.4.1vue.config.js中module.exports = { //打包是否生成.map文件 productionSourceMap: false, lintOnSave: false, configureWebpack: { externals: { 'element-ui': 'ELEMENT', 'vue': 'Vue', "vue-router": "VueRouter", 'vuex': "Vuex" } }原创 2020-06-28 12:11:48 · 5627 阅读 · 12 评论 -
Vue项目中使用CSS Modules
=下面写一个简单的配置和使用的demo,详细的文档可以看CSS Modules vue官方的文档webpack.config.js中{ module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: {原创 2020-05-29 14:06:41 · 685 阅读 · 0 评论 -
vue自定义指令,结合案列详解各个钩子函数触发的顺序和场景
概述之前的业务场景比较简单,只是会用自定义指令,一般都用inserted钩子函数也没有出现什么bug所有一直也没有全面的去学习,这次在下图的业务场景中,从编辑进来的时候,2位小数的自定义指令失效了,但是点击新增的新行又是有效的,然后我打印了el和binding.value发现el和binding.value是没有对应上的,于是我就想到肯定是没有在dom完全渲染完后,就执行了自定义指令的绑定,于是造成了这个bug,于是就查阅了vue的自定义指令部分的文档,发现vue除了inserted还有bind,upda原创 2020-05-25 13:54:04 · 2405 阅读 · 3 评论 -
vue实现时间线
element-ui的时间线组件不支持修改当前状态线的颜色,所以自己写了一个。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0;...原创 2020-03-26 17:07:40 · 4975 阅读 · 2 评论 -
vue表格拖拽
实现效果完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入样式 --> <link rel="stylesheet" href="https:...原创 2020-02-03 22:13:36 · 976 阅读 · 0 评论 -
vue自定义指令实现阻止鼠标滚轮改变type="number"时的数值
在使用input时如果type=“number”,滚动鼠标滚轮会改变输入框的数值容易造成误操作自定义指令import Vue from 'vue'// 阻止type="number"鼠标滚动改变数值Vue.directive( 'stopNumberMousewheel', { inserted: function ( el ) { const ele = el.tagNa...原创 2019-12-20 15:37:20 · 935 阅读 · 0 评论 -
vue组件通讯各种场景的使用
在简单的场景中$emit,props,Bus,vuex的区别其实不大,只有到复杂场景中才会深刻的体会到各种通讯方式的优劣。这里要把筛选功能和自定义方案的新增编辑删除,封装到一个组件中,因为还有5-6个模块要用这个组件,为了方便调用,而且他们之间存在强关联关系,就把他们封装在一个组件中,为了方便各个模块的代码维护,拆分成多个小功能组件,于是就出现了复杂的组件通讯。方案演变最初是采用的pro...原创 2019-11-21 15:07:27 · 322 阅读 · 0 评论 -
vue中keep-alive缓存全部页面后created、beforeDestory和activated、deactivated生命周期的加载
当keep-alive没有使用include和exclude而是缓存全局页面时;第一次进入A页面created-A页面activated-A页面从A页面跳转到B页面deactivated - A页面created - B页面activated - B页面B页面切换到A页面(不改变url)deactivated - B页面activated - A页面A页面到B页...原创 2019-11-15 10:48:21 · 2591 阅读 · 0 评论 -
九段刀客 vue-router实现原理
hash模式<a href="#/home">首页</a><a href="#/about">关于</a><div id="html"></div><script> let PageHome = `<div><h4>首页页面</h4></div>` let...原创 2019-10-23 13:35:25 · 191 阅读 · 0 评论 -
vue组件通讯之$attrs
使用场景我们会遇到这样的场景,比如对element-ui的el-table组件进行二次开发,但是el-table组件有很多属性比如控制高度的height,传入数据的data还有border、size、fit等一个个的去传显然不大现实,这个使用用$attrs处理起来就会特别优雅。举例子组件:自定义组件对el-table进行封装,用$attrs接收父组件传过来的属性<template&g...原创 2019-10-22 16:52:44 · 495 阅读 · 0 评论 -
减少vue公用组件的请求次数
举例收款方式选择这个功能在很多个模块中都会用到,为了提高开发效率和代码更加容易维护,将收款方式封装成公用的组件问题如果不对收款方式列表请求做处理,只是在created或mounted中请求收款方式列表,就会造成每一次使用这个组件都会去请求收款方式的接口造成多余的请求解决办法在公用组件的creatd中做判断,如果vuex中收款方式列表的长度为0,就请求接口获取数据,并把数据存到vuex中...原创 2019-10-14 10:54:27 · 614 阅读 · 0 评论 -
vue中监听窗口变化获取高度,并实现防抖和移除监听
需求监听窗口的变化,获取高度,减掉两头的高度后赋值给el-table的max-height,实现页面只占一屏,表格内部滚动,为了页面性能添加防抖处理,在跳转到其他页面时,解除窗口变化的监听绑定。实现效果代码data() { return{ fn:null }}created() { this.fn = this.resizeHandler(); this.$n...原创 2019-08-01 09:00:23 · 2260 阅读 · 2 评论 -
el-table表头实现自定义加红色*号
在表格里面做表单输入功能,需要验证必填项效果实现代码添加:render-header=“renderHeader”<el-table-column :render-header="renderHeader" label="产品名称"> <template slot-scope="scope"> <el-input v-mo...原创 2019-08-02 14:28:32 · 2234 阅读 · 0 评论 -
elementUI实现用el-table,输入表单,并实现enter到下一个表单,并实现必填验证
实现效果实现代码<template> <div class="app-container"> <el-button-group> <el-button type="primary" icon="el-icon-plus" size="mini" @click="toAddRow">新增行</el-button>...原创 2019-08-09 16:54:56 · 1405 阅读 · 1 评论 -
vue时间全局过滤器
功能实现时间格式的处理代码filter.jsimport moment from 'moment'export default { 'YYYY-MM-DD'(timestamp) { return moment(timestamp).format('YYYY-MM-DD'); }, 'YYYY-MM-DD HH:mm:ss'(timestamp) { re...原创 2019-08-14 12:18:12 · 161 阅读 · 0 评论 -
vue自定义指令
全局注册Directive/Input下的index.jsimport Vue from 'vue'// 注册一个全局自定义指令 `v-focus`Vue.directive('input', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el,binding) { console.log(el,binding) if(bin...原创 2019-08-25 18:53:18 · 184 阅读 · 0 评论 -
vue-cli3中配置不同环境的打包
配置文件.env.dev 开发环境.env.prod 生产环境目录结构.env.dev文件代码VUE_APP_URL = 'dev'.env.prod文件代码VUE_APP_URL = 'prod'配置不同环境的打包使用环境变量...原创 2019-09-01 21:43:32 · 407 阅读 · 0 评论 -
element-ui修改的el-table修改表头
方法一:render-header:render-header=“renderHeader”// 设置必填项的红色*号 renderHeader(cerateElement, { column }) { return cerateElement("div", [ cerateElement("span", column.label), cer...原创 2019-09-06 16:20:12 · 2073 阅读 · 0 评论 -
自定义组件中用v-model实现双向数据绑定
说明实现父子组件值双向绑定要注意的点子组件中<template> <el-select v-model="data_value" :remote-method="remoteMethod" filterable remote placeholder="请输入客户名称" @change="fContractNumberC...原创 2019-09-11 11:30:35 · 282 阅读 · 0 评论 -
vue组件通讯之总线Bus
实现效果和目录结构About.vue- module form.vue table.vue bus.jsAbout.vue中<template> <div> <e-form /> <e-table /> </div></template><script> import eFor...原创 2019-09-22 23:33:56 · 306 阅读 · 0 评论 -
九段刀客:vue组件通讯
组件通信的方法:1、props和emit2、vuex3、bus4、ref和parentprops和emit()说明:props和emit用于父子组件通讯,props父组件向子组件中传值,emit方法用于子组件向父组件中传值。使用场景:一般用于父子组件通讯,封装公用组件中使用。父组件<e-test title="标题" @change="getValue"><...原创 2019-10-10 18:05:41 · 201 阅读 · 0 评论 -
vue组件通讯之Vue.observable 迷你版的vuex
说明Vue.observable为v2.6.0版本中新增的一个组件通信方案,用法让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器举例点击index.vue中的保存按钮,触发table.vue中数据的更新store.jsimport Vue from ...原创 2019-10-11 16:35:25 · 796 阅读 · 1 评论 -
vue中使用mixins
mixins: [testMinxin]混入后,在.vue文件中可以直接调用mixins里面的方法实现效果新建一个test.jsexport default { data() { return { n1: '测试nameMounted', n2: '测试点击' } }, mounted() { this.testfn() },...原创 2019-07-31 10:29:22 · 313 阅读 · 0 评论