element ui + vue.js + asp.net mvc 实现单页面程序 基础控件设置（1）

布局

布局通过layout和container实现；

1.引入css和script

首先通过引用打包配置类来添加需要的css和script文件；

    @Scripts.Render("~/bundles/vue")
    @Scripts.Render("~/bundles/element")
    @Styles.Render("~/Content/elementcss")

在引用之前需要在bundleconfig.cs文件中通过相对路径引入需要的文件。

            bundles.Add(new ScriptBundle("~/bundles/vue").Include(
                "~/Scripts/vue.js"));
            bundles.Add(new ScriptBundle("~/bundles/element").Include(
                "~/Scripts/index.js"));

            bundles.Add(new StyleBundle("~/Content/elementcss").Include(
                      "~/Content/index.css"));

想要详细了解bundleconfig内容的请移步这个链接。

布局开发

html：

屏蔽掉mvc原有html代码，引入下面html内容：

    

        
            Header
            
                
                    

                    

                    

                    

                
                
                    

                    

                    

                
            
        
        @RenderBody()
    

css部分自行设置，由于代码较多这里没有引入。

在设置中需要注意的几点：

1.需要全局设置vue：

2.在使用justify属性时必须先设置type属性，justify属性才会生效。

如果想要详细了解elementui的使用可以登陆element官网，官网有详细介绍。

添加带image的button

这这里需要注意一点：

asp.net razor语法@与element ui中@冲突，需要将@进行转换才能调取el-button的@click事件，在页面中转换可以写为

@{@Html.Raw("@");}

这样就解决了 asp.net mvc @ 与 element ui 中@的冲突问题。