目录结构
项目结构.jpg
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>
<div id="app">
{{message}}
</div>
<div id="viewUi">
<div>
viewUiPlus区域
</div>
{{ message }}
<div>
<Spin></Spin>
</div>
<div>
<Icon type="md-boat"></Icon>
<Icon type="ios-checkmark"></Icon>
</div>
</div>
<div id="ele">
<div>
elementPlus区域
</div>
{{ message }}
<div>
<el-icon>
<Share/>
</el-icon>
</div>
<el-alert title="Success alert" type="success"></el-alert>
</div>
</body>
</html>
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: 'ElementPlusIconsVue2',
},
// 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");
})
效果
页面效果.jpg
