统一管理: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内的代码不会显得冗余
相关推荐
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技11 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte11 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin11 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击11 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder12 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202612 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737412 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
浩星14 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin14 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序