在FastAdmin中搭配使用Vue3和ElementUI

fastadmin开源后台官方JS一直采用的是 require.js 来做对js的模块化加载和管理

require.js 是一个模块加载器,用于在浏览器中异步加载模块。它可以用来加载 JavaScript 模块,但需要注意的是,Vue 3 的官方推荐使用 ES 模块(ECMAScript 模块)来导入和使用。Vue 3 作为一个现代的 JavaScript 框架,更适合与 ES 模块一起使用,而不是传统的 AMD(Asynchronous Module Definition,异步模块定义)模块加载器,如 require.js

所以本文主要记述笔者是如何让Vue3和Fastadmin一起友好工作的,同理 这个方式应该适用于大多数基于require.js的框架.

  1. 首先我们先准备好Vue3和ElementUI的资源文件 可以从Element文档掏个CDN过来用 或者在Github上下载,这里更推荐直接下载到本地引用,这样即使离线脱机也可以使用。

2. 在对应的应用目录建立一个公共视图模版 这里我们起名叫vue.html

(tips:这里我们专门建立一个公共视图是为了可以在视图层想引用vue时可以方便随时引用,你也可以在需要的页面直接引用)

view/common/vue.html

html 复制代码
  <!-- Vue.html-->
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- Import component library -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>

3.在欲混合VUE3的视图文件中引入,并建立一个ID为app的div作为容器来包裹页面内容

view/your_view/add.html

html 复制代码
<!-- 这里引入我们先前建立的vue模版 来引入vue和elementUI的资源文件 -->
{include file="common/vue" /}
<!-- 页面内容放#app里面 -->
<div id="app">
    <el-button type="primary">{{btnText}}</el-button>
</div>

4.在require.js中实例化Vue进行工作

assets/js/backend/your_view.js

js 复制代码
define(['jquery', 'bootstrap', 'backend', 'table', 'form'],
function ($, undefined, Backend, Table, Form) {  
    var Controller = {  
        index: function () {
            ...
        },
        add: function () {
            // 使用Vue3工作
            const { createApp } = Vue;
            const app = createApp(option);
            const option = {
                // 支持引入组件
                components: {},
                setup(){
                    const {ref,onMounted} = Vue;
                    const btnText = ref('你好,顾晨大帅比');
                    onMounted(()=>{
                        // 将fastAdmin相关的JS接口初始化放到Vue的生命周期
                        Controller.api.bindevent();  
                    })
                    return {
                        btnText
                    };
                }
            }
            app.use(ElementPlus);
            app.mount(`#app`);
            
        },  
        edit: function () {
            // 不使用Vue3工作
            Controller.api.bindevent();  
        },  
        api: {  
            bindevent: function () {  
                Form.api.bindevent($("form[role=form]"));  
            }
        }
    }
    return Controller;  
});

5.如需使用组件

首先按格式来书写一个简单的按钮组件

js/components/welcome-btn.js

js 复制代码
const WelcomeBtn = {
    template:`
        <el-button type="primary">{{btnText}}</el-button>
    `,
    props:{
        btnText:{
            type:String,
            default:'顾晨大帅比'
        }
    },
    emit:[],
    // 第二个参数是一个Setup 上下文对象。上下文对象暴露了其他一些可能会用到的值
    setup(props,{attrs,slots,emit,expose}){
        // 透传 Attributes(非响应式的对象,等价于 $attrs)
        console.log(attrs)
        // 插槽(非响应式的对象,等价于 $slots)
        console.log(slots)
        // 触发事件(函数,等价于 $emit)
        console.log(emit)
        // 暴露公共属性(函数)
        console.log(expose)
    }
};

在视图文件中引入和添加组件标签

view/your_view/add.html

html 复制代码
<!-- 这里引入我们先前建立的vue模版 来引入vue和elementUI的资源文件 -->
{include file="common/vue" /}
<!-- 引入需要的组件 -->
<script src="/js/components/welcome-btn.js"></script>
<!-- 页面内容放#app里面 -->
<div id="app">
    <welcome-btn :btn-text="btnText" />
</div>

assets/js/backend/your_view.js

js 复制代码
...
add: function () {
    // 使用Vue3工作
    const { createApp } = Vue;
    const app = createApp(option);
    const option = {
        // 支持引入组件
        components: {
            WelcomeBtn
        },
        setup(){
            const {ref,onMounted} = Vue;
            const btnText = ref('你好,顾晨大帅比');
            onMounted(()=>{
                // 将fastAdmin相关的JS接口初始化放到Vue的生命周期
                Controller.api.bindevent();  
            })
            return {
                btnText
            };
        }
    }
    app.use(ElementPlus);
    app.mount(`#app`);
},
...

以上就是我个人在fastadmin中使用Vue3的方法

在实际项目中使用的效果图

设置相对简单,没有太大冲突,如有更好的方式也希望各位能提出

相关推荐
涔溪35 分钟前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js
fakaifa2 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
夜色呦2 小时前
掌握ECMAScript模块化:构建高效JavaScript应用
前端·javascript·ecmascript