统一管理: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内的代码不会显得冗余
相关推荐
别拿曾经看以后~8 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子7 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享8 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果8 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄9 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰10 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半11 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
MarcoPage12 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js