asp.net mvc 引入vue+ElementUi

上善若水

asp.net mvc 引入vue+ElementUi

右键项目名——管理NuGet程序包

在浏览里搜素 vue element

分别安装

会发现在Content文件夹 script文件夹下会有相关的文件

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

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

复制代码

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

1. bundles.Add(new ScriptBundle("~/bundles/vue").Include(
2. "~/Scripts/vue.js"));
3. bundles.Add(new ScriptBundle("~/bundles/element").Include(
4. "~/Scripts/ElementUI/element-ui.js"));
5. bundles.Add(new StyleBundle("~/Content/elementcss").Include(
6. "~/Content/ElementUI/element-ui.css"));

复制代码

然后再html中引入

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

复制代码

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

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

复制代码

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

1. <script>
2. var vm = new Vue({
3. el: "#app",
4. data: {
5. msg: '我是vue'
6. }
7. })
8. </script>

复制代码

来源：https://blog.csdn.net/weixin_44106924/article/details/108567321
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！