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的方法
在实际项目中使用的效果图
设置相对简单,没有太大冲突,如有更好的方式也希望各位能提出