随笔分类 -  VUE

• Vue3+vite路由配置优化(自动化导入)
  摘要：今天在维护优化公司中台项目时，发现路由的文件配置非常多非常乱，只要只中大型项目，都会进入很多的路由页面，规范一点的公司还会吧路由进行模块化导入，但是依然存在很多文件夹的和手动导入的问题。 于是我想到了我之前使用vuex时进行的模块化自动导入js文件，能不能使用到自动导入.vue文件中去，答案是可以！ 阅读全文
  posted @ 2023-09-18 17:21 马丁的车夫 阅读(1491) 评论(0) 推荐(3) 编辑
• VUE3 自定义 轻量级全局数据共享方案之二 Provide&inject （简单快速实现vuex功能）
  摘要：在vue2中，提供了provide和inject配置，可以让开发者在高层组件中注入数据，然后在后代组件中使用 除了兼容vue2的配置式注入，vue3在composition api 中添加了provide和inject方法，可以在setup函数中注入 和使用数据 基本使用 provide('key' 阅读全文
  posted @ 2022-11-24 08:55 马丁的车夫 阅读(1019) 评论(0) 推荐(0) 编辑
• VUE3 全局共享数据方案之一 global state （简单快速实现类似vuex）
  摘要：自定义 封装单列模式！ global state 由于vue3的响应式系统本身可以脱离组件而存在，因此可以充分利用这一点，轻松制造多个全局响应式数据， 并且通过和vuex一样 通过某个模块指定方法修改数据，不能直接修改数据，并且让数据成为全局响应式 并且在代码体积上绝对的轻量级！比市面上的任何第三方 阅读全文
  posted @ 2022-11-22 23:14 马丁的车夫 阅读(1685) 评论(0) 推荐(0) 编辑
• Vue-cli 脚手架搭建vue2和vue3的全家桶项目详细步骤
  摘要：由于vue官方现在默认创建的版本是vue3，在创建配置选择上有很大的改动，有些还不会vue3的开发者 想继续使用vue2 创建就会遇到了一些问题。 现在对vue2 和vue3的全家桶进行项目的创建进行详细的讲解步骤。（只需要一直保持最新的 cli环境就可以了，不需要在去安装指定的vue低版本，目前我 阅读全文
  posted @ 2022-03-15 11:38 马丁的车夫 阅读(2178) 评论(0) 推荐(0) 编辑
• Element-plus五步完成使用(按需引入减小打包后体积),文件抽离集中管理
  摘要：注意：以下配置作者使用的vue create vuelic3 创建的vue，vite脚手架没有测试过。 1.安装依赖 npm install element-plus --save npm install -D unplugin-vue-components unplugin-auto-import 阅读全文
  posted @ 2021-12-22 14:58 马丁的车夫 阅读(2009) 评论(0) 推荐(0) 编辑
• Vue2基于Element-ui中的el-table组件进行二次封装（减少代码提高复用,扩展API）
  摘要：提示：请先看第二步中的组件说明，和组件封装中其他扩展的api，的注释都在html中对应的代码结构都有主要依靠JSON数据动态执行和回调 特点：通过JSON数据动态渲染列表标题和数据列表,JSON数据驱动事件监听和回调以及数据过滤，和满足更多自定义需求组合 效果图： 下面这种模式可以点击图片，可以是一 阅读全文
  posted @ 2021-11-29 14:33 马丁的车夫 阅读(2800) 评论(3) 推荐(0) 编辑
• Vue3+Typescript模块化逻辑层
  摘要：Vue3模块化指的是，把HTML和逻辑代码分离，对一个页面有多个复杂的功能时，可以一个功能对应一个文件，提高可读性，复用性，维护性，并且在遇到相同功能展示不同的UI时，可以直接集成某一个功能进行实现。 下面一个小案列： 实列：下面页面实现了两个功能，一个是数字加减，一个是数组添加和删除 1.Home 阅读全文
  posted @ 2021-10-25 14:42 马丁的车夫 阅读(355) 评论(3) 推荐(1) 编辑
• Vue3 解决跨域 配置反向代理，命令环境配置 (4步完成 全网最详细)
  摘要：1.项目根目录创建环境变量代码和指定文件 项目根目录创建下面的文件 本地运行测试环境 1) .env.dev_test # 测试环境 NODE_ENV = 'development' # 测试环境，api前缀 VUE_APP_BASE_API = '/api' #测试环境，Url地址 VUE_APP 阅读全文
  posted @ 2021-10-21 18:10 马丁的车夫 阅读(3887) 评论(0) 推荐(0) 编辑
• Vue封装组件标签上使用v-model完成双向绑定
  摘要：1.普通v-model实现双向绑定的使用 <input type="text" v-model="message"> vue在解释v-model的时候会做一个转化工作,实质是下面这样： <div id="app"> <input type="text" :value="message" @input 阅读全文
  posted @ 2021-09-24 11:01 马丁的车夫 阅读(2063) 评论(0) 推荐(0) 编辑
• Vue3 不同命令下项目启动和打包到指定接口API的环境进行配置
  摘要：1.根目下创建指定文件 在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod） 文件命名： .env.dev , .env.test , .env.prod 2.刚刚创建的三个文件对应的内容代码 .env.dev NODE_ENV = 'development' V 阅读全文
  posted @ 2021-09-03 15:21 马丁的车夫 阅读(688) 评论(0) 推荐(0) 编辑
• js 封装公共方法 拖动元素进行上下排序 返回排序结果
  摘要：效果图 拖动元素进行上下排序 并且回调返回排序结果数组 1.common.js进行封装 // 拖动排序封装//dom:父节点ID名称（必传）//callback:回调函数，返回排序结果（选传） const drag = function(dom, callback) { let node = doc 阅读全文
  posted @ 2021-08-09 14:18 马丁的车夫 阅读(211) 评论(0) 推荐(0) 编辑
• Vue2 不同命令下项目启动和打包到指定的API接口环境进行配置
  摘要：只需五步配置完成 本地项目启动命令使用：npm run dev，npm run dev_test、npm run dev_prod 打包环境命令使用：npm run build，npm run build test、npm run build prod 配置分‘本地运行’ 和 ‘打包运行’ 两个文件 阅读全文
  posted @ 2021-08-07 15:28 马丁的车夫 阅读(1204) 评论(0) 推荐(0) 编辑
• Vue 项目中，在js文件中调用组件 ，并且注册成全局
  摘要：注意：这种方法只能在网页适用，如果是小程序或者app，可能无效。 需求：在请求封装里 根据请求返回的状态 提示不同的弹窗 这样所有操作请求都会有提示 如果不需要提示的 可以在api接口地址进行配置 ,很好的和用户交互 并且可以任意调用 第一步创建文件路径如下结构(下面创建两个文件都放这里) 第二步 阅读全文
  posted @ 2021-06-26 21:18 马丁的车夫 阅读(1994) 评论(0) 推荐(0) 编辑
• Element-ui el-select下拉内嵌Tree 树形控件 进行二次封装
  摘要：封装组件，支持单选，多选，搜索，根据节点id默认选中对应的节点，勾选数据事件触发回调 效果图(会不断更新 和修复一些BUG 记得回来看看哦) (认真看组件配置属性，特别是传值的时候defaultProps 配置的展示key)因为最后有模拟JSON数据所以文章有点长 多选效果图： 单选效果图： 一.子 阅读全文
  posted @ 2021-05-12 15:10 马丁的车夫 阅读(2779) 评论(0) 推荐(0) 编辑
• vue watch监听触发节流
  摘要：export default { name: 'HelloWorld', props: { msg: String }, data () { return { search: { input: '', timer:null } } }, watch: { 'search.input': { hand 阅读全文
  posted @ 2020-12-26 17:54 马丁的车夫 阅读(683) 评论(0) 推荐(0) 编辑