Asp.net+Vue+EmelentUI的实现(一)框架搭建

发布于 作者:

1.新建一个空的web项目

2.使用nuget安装vue、vue-resource、vue.js.element.ui

项目中引用vue的js文件、element的css和js文件，下面两种方式都可以

1.在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"));

 

2.使用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>

 

然后再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>

 

 

https://www.cnblogs.com/jiekzou/p/4508392.html