统一管理: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内的代码不会显得冗余
相关推荐
Lingxing2 分钟前
Vue组件树:从设计到实现的全方位指南 🚀
前端·vue.js
Jenlybein10 分钟前
Vue3 权限控制:利用动态路由与自定义指令
前端·vue.js
ElasticPDF-新国产PDF编辑器20 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin1 天前
Tree - Shaking
前端·javascript·vue.js
月明长歌1 天前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光1 天前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs1 天前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石1 天前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking1 天前
解决 axios get请求瞎转义问题
vue.js
向阳2561 天前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程