參考 requireJs中使用Vue3及Vue3框架(viewUIPlus、elementPlus)。
目录结构
HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="js/lib/require.js" data-main="js/script/main"></script>
</head>
<body>
main 配置文件
require.config({
// 加載 js 的目錄，paths 中以此目錄為標準讀取
baseUrl: 'js',
// 類庫别名和路徑配置
paths: {
jquery: 'lib/jquery-3.7.1',
// vue 别名必须為 vue，由於其他框架或模块寻找 vue 时查询的是 vue 的别名
vue: 'lib/vue3/vue.global.prod',
// viewUIPlus框架
viewUIPlus: 'lib/viewUiPlus/viewuiplus.min',
// elementPlus 框架
elementPlus: 'lib/elementPlus/index.full.min',
// elementPlus 字体库
elementPlusIconsVue: 'lib/elementPlus/icons-vue/dist/index.iife.min',
},
// 依赖以及导出设置，key值需对应paths中的别名，用于非AMD标准的类库进行导出
shim: {
// 由于vue3不是标准的AMD模块，需要手动抛出Vue变量，供其他框架使用
'vue': {
exports: 'Vue'
},
// viewUIPlus css
'viewUIPlus': ['vue', 'css!lib/viewUiPlus/styles/viewuiplus.css'],
// elementPlus 字体库依赖vue 没有这个配置，加载字体库时可能因为vue还未加载而报错
'elementPlusIconsVue': {
// 依赖
deps: ['vue'],
// 导出变量
exports: 'ElementPlusIconsVue',
},
// elementPlus css 字體庫
'elementPlus': ['vue', 'css!lib/elementPlus/index.css', 'elementPlusIconsVue',],
},
// 插件以及其他模塊配置
map: {
'*': {
// 加載 css 插件
'css': 'lib/require-css'
},
},
});
// 單獨使用 vue
require(['vue'], function (Vue) {
const {createApp} = Vue
const app = createApp({
data() {
return {
message: 'Hello Vue!',
}
},
methods: {}
})
app.mount("#app");
})
// viewUIPlus vue依赖已在shim中配置，无需再次引入
require(['viewUIPlus'], function (ViewUIPlus) {
const {createApp} = Vue
const app = createApp({
data() {
return {
message: 'Hello viewUiPlus!',
}
},
methods: {}
})
app.use(ViewUIPlus);
app.mount("#viewUi");
})
// elementPlus 字体库和vue依赖已在shim中配置，无需再次引入
require(['elementPlus'], function (ElementPlus) {
const {createApp} = Vue
const app = createApp({
data() {
return {
message: 'Hello elementPlus'
}
},
methods: {}
})
// 字体库组件
for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
app.component(name, comp);
}
app.use(ElementPlus);
app.mount("#ele");
})
效果
Vue2 及 Vue3 同時存在
require.config({
baseUrl: ntuweb.baseUrl+'/assets',
paths: {
"jquery": "jquery-1.12.4.min",
"jqueryform": "jquery.form.4.2.2.min",
"jqueryui": "jquery-ui/jquery-ui-1.10.4.custom.min",
"vue": "vue_2.6.14",
'vue3': "vue.global-3.5.12.min",
"showModalDialog": "showModalDialog",
'corejs': 'corejs-2.6.12_shim.min'
, 'swal': 'sweetalert2-10.min'
},
// 以下為非 AMD 程式，有固定的載入順序
shim : {
// 由於 vue3 不是準的 AMD 模塊，需要手動拋出 Vue 變量，用於非AMD標準類庫進行導出
'vue3': {
exports: 'Vue'
},
"jqueryui": ["jquery"],
"jqueryform": ["jquery"]
, 'swal': ['corejs']
, "showModalDialog": ["jqueryui"]
, 'wbSingle': ['swal']
}
});
使用 Vue2
require(['jquery', 'vue', 'showModalDialog', 'jqueryform'], function($, Vue)
{
vm = new Vue({
el: '#main-div',
data: {
dat: <?= json_encode($gdat) ?>,
frm_label: '',
LbState: 0,
},
computed: {
.....
},
methods: {
.....
}
});
});
使用 Vue3
rrequire(['jquery', 'vue3', 'showModalDialog', 'jqueryform'], function($, Vue)
{
const { createApp, ref ,reactive, computed} = Vue;
vm = createApp({
setup() {
const dat = reactive({
cou_code: ref(''),
cou_cname: ref(''),
credit: ref(0),
..........
});
const frm_label = ref('');
const LbState = ref(0);
return {
dat, frm_label, LbState,
}
},
computed: {
..........
},
methods: {
...........
}
}).mount('#main-div');
});
更新物件 dat 的屬性的值
Object.keys(vm.dat).forEach(function (kk) {
vm.dat[kk] = ret[kk];
});
