requireJs中使用Vue3及Vue3框架(viewUIPlus、elementPlus)

想起来就搞搞

已于 2024-06-23 15:45:08 修改

阅读量292

点赞数 7

分类专栏： JavaScript Vue 文章标签： vue.js 前端 javascript

于 2024-06-23 15:28:06 首次发布

本文链接：https://blog.csdn.net/qq_32671805/article/details/139900978

版权

JavaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

目录结构

在这里插入图片描述

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: '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");
})