asp.net mvc 引入vue+ElementUi

右键项目名——管理NuGet程序包
在这里插入图片描述

在浏览里搜素 vue element
在这里插入图片描述

分别安装

会发现在Content文件夹 script文件夹下会有相关的文件
在这里插入图片描述

在项目中引用vue的js文件、element的css和js文件,下面两种方式都可以
1.使用link标签、script标签引入

<script src="~/Scripts/vue.js"></script>
<link rel="stylesheet" href="~/Content/ElementUI/element-ui.css" />
<script src="~/Scripts/ElementUI/element-ui.js"></script>

2.在App_start文件下的bundleConfig.cs写下如下代码

bundles.Add(new ScriptBundle("~/bundles/vue").Include(
                "~/Scripts/vue.js"));
bundles.Add(new ScriptBundle("~/bundles/element").Include(
                "~/Scripts/ElementUI/element-ui.js"));
bundles.Add(new StyleBundle("~/Content/elementcss").Include(
                      "~/Content/ElementUI/element-ui.css"));

然后再html中引入

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

接下来就可以成功使用了
要注意的地方就是:如果没有vue实例就显示不了elementui的样式例如:

<el-button type="primary">Login</el-button>

如果想显示el-button的样式,你应该写一个vue实例。

<script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: '我是vue'
            }
        })
</script>
GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐