统一管理:Vue公共组件/公共样式/全局自定义指令

main.js 引入存放公共文件的文件路径

javascript 复制代码
import "./plugins";

src/plugins文件夹下的index.js 在处理公共文件中分别引入

javascript 复制代码
/* 公共引入,勿随意修改,修改时需经过确认 */
import Vue from "vue";

import "@/icons";   // 图标
import ByuiQueryForm from "@/components/ByuiQueryForm";  // 公共组件
import drag from "@/directive/drag";			// 全局自定义指令

/* 自定义指令 */
Vue.use(drag);
/* 组件 */
Vue.component("byui-query-form", ByuiQueryForm);

自定义指令文件夹src/directive/drag: index.js (需要注意指令名)

javascript 复制代码
import drag from "./drag";

const install = function (Vue) {
  // 组件内调用指令:v-drag
  Vue.directive("drag", drag);
};

if (window.Vue) {
  window["drag"] = drag;
  Vue.use(install);
}

drag.install = install;
export default drag;

自定义指令文件夹src/directive/drag: drag.js

javascript 复制代码
export default {
  bind(el, binding, vnode) { ... },
  inserted(el){ ... },
  ...
}
复制代码
全局组件按常规的模版该怎么写怎么写
全局样式第一行加入     @charset "utf-8";
这么处理,main.js内的代码不会显得冗余
相关推荐
一枚前端小能手31 分钟前
🔄 重学Vue之nextTick和slot - 从底层实现到实战应用的完整指南
前端·javascript·vue.js
一嘴一个橘子2 小时前
vue.js 视频截取为 gif - 2(将截取到的gif 转换为base64 、file)
vue.js
你的电影很有趣2 小时前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
小张成长计划..2 小时前
VUE工程化开发模式
前端·javascript·vue.js
菜鸟una4 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
岁月宁静12 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
百锦再13 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
Sheldon一蓑烟雨任平生14 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
YUELEI11815 小时前
Vue 安装依赖的集合和小知识
javascript·vue.js·ecmascript
前端付豪17 小时前
万事从 todolist 开始
前端·vue.js·前端框架