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

最新推荐文章于 2026-05-22 07:00:00 发布

原创最新推荐文章于 2026-05-22 07:00:00 发布 · 1.4w 阅读

18 ·

本内容遵循CC 4.0 BY-SA版权协议

vue.js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在ASP.NET MVC框架下，结合Element UI和Vue.js开发单页面应用程序。首先讲解了如何引入必要的CSS和JS文件，并在bundleconfig.cs中配置。接着，讨论了布局的创建，特别提到了使用layout和container组件。然后，文章展示了如何处理ASP.NET Razor语法与Element UI中@符号的冲突，提供了将@转换的解决办法，以便正确调用el-button的@click事件。

布局

布局通过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内容：

    <div id="app">
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <el-row :gutter="20" type="flex" justify="center">
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="center">
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                </el-row>
            </el-main>
        </el-container>
        @RenderBody()
    </div>

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

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

1.需要全局设置vue：

<script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello my vue programm'
            }
        });
    </script>

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

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

添加带image的button

<el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4" v-for="(o, index) in 3" :key="o">
                <el-button @{@Html.Raw("@");}click="open" type="primary" :body-style="{ padding: '0px' }">
                    <img src="~/Content/img/dfxwj.png" class="image" />
                </el-button>
            </el-col>
        </el-row>

这这里需要注意一点：

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