Vue引入本框架

2024-09-28 23:52:33首发，5小时前更新

本框架可在`mount`之前通过`use()`方法引入本框架，可在mounted事件中使用本框架。

前言

本框架可在mount之前通过use()方法引入本框架，具体方法如下：

                
                //前提已经引入了Vue文件和ax文件
                //use方法安装ax框架
                const app = createApp(Vue);
                app.use(ax);
                //其他Vue逻辑

简单使用

在Vue.createApp之后，便可使用use(ax)来引入整个框架。

输出
HTML
JS

```
                
                
            
```

                
                let v = Vue.createApp({
                    data() {
                        return {
                            message: "Hello Vue 3!",
                        };
                    },
                    mounted() {
                         demo01.onclick=()=>{
                                console.log(this.$ax);
                                confirm(`已经引入了AXUI`);
                            }
                        }
                    });
                    //引入ax
                    v.use(ax);
                    v.mount("#app01");

重置参数

ax.config属性用来配置整个框架的参数，包含全局参数以及各个模板的默认参数；在引入Vue之后，可通过use方法的第2个参数配置用户的参数，以覆盖ax.config原有的参数。

因为AXUI的大部分模块都是要求有DOM宿主的(虚拟DOM也可)，通常在mounted方法中使用AXUI的相关代码，而创建模板文本或异步使用不受限制。

输出
HTML
JS

```
                
                
            
```

                
                let v = Vue.createApp({
                    data() {
                        return {
                            message: "Hello Vue 3!",
                        };
                    },
                    mounted() {
                            demo02.onclick=()=>{
                                console.log(this.$ax);
                                    new this.$ax.Message({
                                        content:'已经引入了AXUI,Message默认主题颜色改了',
                                    }).show();
                                    //未use情况下普通用法：new ax.Message({...}).show();
                            }
                        }
                    });
                    //引入ax，改变message的默认主题颜色
                    v.use(ax,{message:{status:'error'}});
                    v.mount("#app02");