统一管理: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内的代码不会显得冗余
相关推荐
Gracemark14 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼15 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_16 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing17 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工19 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码1 天前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp19941 天前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光1 天前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥1 天前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司1 天前
Vue 3 前端工程化规范
前端·javascript·vue.js