Vue引入本框架

2024-09-28 23:52:33首发，1周前更新

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

vue系列文档

前言

本框架可在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");

自动初始化

本框架有很多Webcomponent，即使原本是Module模块，也被封装为了Webcomponent；Webcomponent可以自动完成初始化，可以像普通html节点那样使用，vue是完全支持的。

输出
HTML
JS

```
                
                
            
```

                
                let v = Vue.createApp({
                    setup() {
                         const testAlert = () => {
                                alert('点击了AXUI按钮');
                            };
                            const elem = Vue.ref(null);
                            //模板解析完成挂载节点后执行
                            Vue.onMounted(() => {
                                //elem.value等于ax-btn节点
                                elem.value.onmouseover = function(){
                                    this.setAttribute('theme','error')
                                }
                                elem.value.onmouseout = function(){
                                    this.setAttribute('theme','prim')
                                }
                            });
                            //暴露变量
                            return {elem,testAlert};
                    },
                     template: `
                        <div>
                            <h1>Hello, Vue 3!</h1>
                            <p><ax-btn theme='prim' label='AXUI的按钮' icon='_icon-global' @click="testAlert" ref="elem"></ax-btn></p>
                        </div>
                    `,
                    });
                    v.mount("#app03");