在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的框架.

首先我们先准备好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的方法

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

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