asp.net mvc 引入vue+ElementUi
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
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 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)