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>

asp.net mvc 引入vue+ElementUi相关推荐

【转】一个ASP.NET MVC中ajax调用WebApi返回500 Internal Server Error的调错方法。
ASP.NET MVC 引入的WebApi自然且较好地满足了ajax的交互需求,但使用jQuery ajax调用WebApi返回500 Internal Server Error时却不太好查找错误.在 ...
Asp.net mvc partialView
一.部分视图 PartialView (分部视图),这是在使用asp.net mvc 中首次知道的的名称,但是ASP.NET MVC 里的部分视图的概念对使用过webForm的人来说一点都不陌生,相当 ...
html中body引入js,ASP.NET MVC中在 @RenderBody() 或者 @Html.Partial()中需要使用引入外部js，css...
今天想在后台封装一下bootstraptree这个插件,引入jquery.js bootstrap.js bootstrap.css bootstrap-tree.js后,我在页面查看脚本错误就连最简 ...
element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
ASP.NET MVC：Razor 引入命名空间
原文:ASP.NET MVC:Razor 引入命名空间页面中引用 c# @using MvcApplication83.Models @using MvcApplication83.Common 行 ...
vue element-ui引入第三方图标在线版
参考链接:Vue Element-UI使用icon图标(第三方)–在线版 - 简书 vue项目版本为vue3 打开iconfont-阿里巴巴矢量图标库,注册登录之后回到首页在首页顶部菜单图标管理& ...
vue中babel-plugin-component按需引入和element-ui 的主题定制，支持发布，上线
前言目前项目用的vue + element-ui,之前有了解过element-ui真正的按需引入,也有了解到主题定制,之前的项目都是根据element-ui的类及标签,在全局或者局部进行一大堆样式覆 ...
在已有的Asp.net MVC项目中引入Taurus.MVC
Taurus.MVC是一个优秀的框架,如果要应用到已有的Asp.net MVC项目中,需要修改一下. 1.前提约定: 走Taurus.MVC必须指定后缀.如.api 2.原项目修改如下: web.co ...
dotnetcore+vue+elementUI 前后端分离三（前端篇）
说明: 本项目使用了 mysql employees数据库,使用了vue + axois + element UI 2.0 ,演示了单页程序架构 ,vue router 的使用,axois 使用, ...

asp.net mvc 引入vue+ElementUi

asp.net mvc 引入vue+ElementUi

asp.net mvc 引入vue+ElementUi相关推荐

最新文章

热门文章