首页 > 其他分享 >uniapp vue可以通过mixins混入代码,可以通过下面方法混入template

uniapp vue可以通过mixins混入代码,可以通过下面方法混入template

时间:2023-11-20 12:12:09浏览次数:34  
标签:uniapp 混入 vue loader compile template options

vue全局混入template方法:在根目录vue.config.js(没有就新增)里添加一下代码

//红色部分是混入的自定义vue组件
module.exports = { chainWebpack: config => { config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => { const compile = options.compiler.compile options.compiler.compile = (template, ...args) => { if (args[0].resourcePath.match(/^pages/)) { template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${_} <updagrade ref="updagrade" />`) } return compile(template, ...args) } return options }) } }

 

标签:uniapp,混入,vue,loader,compile,template,options
From: https://www.cnblogs.com/itsone/p/17843633.html

相关文章

  • (uniapp)小程序实现自定义弹框,自定义样式showmodal
    在components里新建自定义弹框组件——modal.vue<template><!--自定义弹窗--><viewclass="_showModal"v-show="show"><viewclass="_shade"></view><viewclass="_modalBox">......
  • vue2+element+vue-quill-editor实现富文本框组件(使用链接引入视频+上传本地视频+上传
    参考文档:https://www.duidaima.com/Group/Topic/Vue/12272前提不赘述,npm引入插件并全局导入 components文件夹下创建ArticleEditor.vue:<template><divclass=""><!--富文本框--><quill-editorref="myQuillEditor"v-bind:va......
  • UNIAPP 钉钉微应用调试 PC端移动端调试钉钉微应用H5
    https://open.dingtalk.com/document/resourcedownload/micro-application-four-terminal-debugging-tool-web-edition 流程可以参考钉钉文档https://open-dev.dingtalk.com 钉钉开放平台登录      在项目的template.h5.html中的<head>里塞入<scriptsrc="https:......
  • vue3 ts 生命周期函数写法
    写法1import{defineAsyncComponent,ref,reactive,onMounted,nextTick,computed,watch}from'vue';//页面加载时onMounted(()=>{ initResize();});//监听双向绑定modelValue的变化watch( ()=>props.modelValue, ()=>{ initModeValueEcho();......
  • uniapp使用uni-grid时出现BUG第二次进入少一列
    在使用uniapp的uni-grid组件时,出现了一个bug,第一次进入页面是是显示正常的,第二次进入就会发送少一列的情况第一次进入时显示第二次进入时显示在网上找了半天没啥解决办法,最后是在dcloud社区中找到解决方法:1.把最外层的view固定宽度2.去掉边框因为我这边是需要进行对不同设......
  • VS CODE,保存自动格式化vue代码配置 流程记录
    进入vscode,ctrl+shift+p,搜索Preferences:OpenUserSettings(json) ,然后把下面配置覆盖到原本的地方 { //vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation":false, //重新设定tabsize "editor.tabSize":2, //#每次保......
  • vue前端项目启动报错:error:0308010C:digital envelope routines::unsupported
    问题描述使用 npmrundev 或者 yarnrundev 时报错:error:0308010C:digitalenveloperoutines::unsupported解决方案修改package.json,在相关构建命令之前加入setNODE_OPTIONS=--openssl-legacy-provider"scripts":{"dev":"setNODE_OPTIONS=--openssl-legacy-provide......
  • vue十六
    <divid="app16"style="text-align:center;margin-top:10%;"><div><inputid="sou"type="text"style="width:40%;"v-model="word"><buttonsty......
  • vue中使用element中的表单展示数据
    要注意表单的data不能写错,只能是tableData  data里面的“item”可以改成别的,无所谓......
  • vue3 基础-Pinia 可能替代 Vuex 的全局数据状态管理
    Pinia初体验Pinia.js是由Vue.js团队核心成员开发的新一代状态管理器,使用CompositionApi进行重新设计的,也被视为下一代Vuex。Pinia是一个Vue的状态管理库,允许跨组件、跨页面进行全局共享状态,也由于其设计的简洁性、和对typescript的良好支持,取代Vuex指日可待。或许,你在想在vue......