NET MVC中如何使用Element-Plus

目的

在Net Mvc5或者Net Core Mvc中，我们如何通过cdn的放引入Element-Plus并，使用Element-Plus相关的组件，包含Vue-Icon和多语言的使用。

准备工作

1.这里为了方便，我们直接使用html文件来代替Mvc项目。新建一个index.html文件

2.通过cdn的方式引入vue3、Element-Plus(包含样式、脚本、和多语言包)，icons-vue等组件。

初始化

        const app = Vue.createApp(App);
        Object.entries(ElementPlusIconsVue).forEach(item => {
            app.component(item[0], item[1]);
        });
        app.use(ElementPlus, {locale: ElementPlusLocaleZhCn});
        app.mount("#app");

icon-vue字体全局引用

        Object.entries(ElementPlusIconsVue).forEach(item => {
            app.component(item[0], item[1]);
        });

实现代码

    
    
    
    

    
    
    
    
    
    



    

        
            
            
            
            
        

        
            
            
                
                
                
                    
                
                
            
        

        
            
            
                
                    
                
                
                    草稿
                
                
                    
                
                
                    
                
                
                    
                
            
        

        
            
            
                
工单名称：
                
速度快可适当放宽速度快得看看打开
                
处理失效：
                生效中
            
            
                
扩展字段1：
                
速度快可适当放宽速度快得看看打开
                
扩展字段2：
                
有效
            
            
                
扩展字段3：
                
速度快可适当放宽速度快得看看打开
                
扩展字段4：
                
有效
            
        

        
            
            
                
                    
                    
                
            
        

        
            
            
                
                    
                
                
                
                
                    
                
                
                
                
                    
                  
            
            

                
                
            
        

        
    
    

最终效果