在dotnetcore的MVC项目中,创建支持 vue.js 的最小工程模板
网上Vue模板不是最新的,我自己做了一个最新的支持 Vue.js 的最小工程模板,方便大家从 Hello world. 入门, 在 VS2017 里学习,并扩展出自己的项目。
下面是创建步骤:
1、在VS2017中建立一个新的 MVC 项目
略
2、用 npm 添加 vue 支持包
在MVC项目目录下执行:
npm init
npm i --save-dev webpack webpack-cli
npm i --save-dev vue vue-loader vue-template-compiler
3、添加配置文件和运行文件
在vs项目中,创建 webpack.config.js 配置文件
const path = require('path');
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = {
resolve: {
extensions: ['.js', '.vue']
},
entry: './ClientApp/main.js',
module: {
rules: [
{ test: /\.vue$/, include: /ClientApp/, loader: 'vue-loader' }
]
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
plugins: [
new VueLoaderPlugin()
]
}
这算是最小配置了吧。
将vue 程序添加到 ClientApp 目录中,并且加入 main.js
import Vue from 'vue'
import App from './App'
new Vue({
el: "#app",
render:h=>h(App)
})
对应的 App.vue 文件内容:
<template>
<div id="app">
<h2>Hello Vue. {{message}}</h2>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
message: "ok."
}
}
}
</script>
修改 HomeController 的 Index.cshtm 文件
@{
ViewData["Title"] = "Home Page";
} <div id='app'>
</div> @section scripts {
<script src="~/dist/main.js" asp-append-version="true"></script>
}
Shared 文件夹下除了 _Layout.cshtml 文件,其它都删掉。并将 _Layout.cshtml 文件内容改为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - NewTestVue</title>
<base href="~/" /> <environment exclude="Development">
<link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
</environment>
</head>
<body>
@RenderBody() @RenderSection("scripts", required: false)
</body>
</html>
将 Views 目录下多余的文件删除。最后剩下如下文件:
4、手动编译 vue 文件
这时,如果手动编译 vue 项目,可在项目目录下执行:
npx webpack --mode development
5、在VS中运行项目
这时在 VS2017 中执行项目,结果是:
6、后继扩展
现在虽然已经可以运行了,但,vue文件修改后,还只能到命令行手动编译。所以接下来是如何实现:
- 支持在VS项目中,点击运行时,自动编译vue文件;
- 支持在运行状态下,动态修改 vue 文件,不停止项目运行也能自动编译js文件;
- 在vue源文件,有出错信息时,还需要能定位到源文件的位置;
为此我把扩展后的模板上传了,点此下载。希望对大家在VS中学习使用 vue 有帮助。
7、参考资料
《webpack4.0实战那些事儿》 Webpack 4.0 的配置命令解释
《Webpack 4 和单页应用入门》 这个资料很不错,相信你可以学到更多。
《ASP.NET Core, Visual Studio 2017, Vue and ES6 (ES2015)》 工程有点老,还是有帮助的。
《Setting up a Vue.js Project with webpack 4 and Babel 7》
在dotnetcore的MVC项目中,创建支持 vue.js 的最小工程模板的更多相关文章
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- Asp.net MVC 4新项目中创建area的后续操作
Asp.net MVC 4新项目中创建area后,往往HomeController与area的HomeController路由发生混淆,需要手工设置一些地方避免mvc无法识别默认路由的状况. 无废话具 ...
- 【初学者指南】在ASP.NET MVC 5中创建GridView
介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样.服务器端和客户端有许多可用的第三方库,这些 ...
- 谈谈MVC项目中的缓存功能设计的相关问题
本文收集一些关于项目中为什么需要使用缓存功能,以及怎么使用等,在实际开发中对缓存的设计的考虑 为什么需要讨论缓存呢? 缓存是一个中大型系统所必须考虑的问题.为了避免每次请求都去访问后台的资源(例如数据 ...
- 如何在Mvc 6 中创建 Web Api以及如何脱离IIS实现自我托管
微软推出的Asp.net vNext(asp.net 5.0)的其中的一个目标就是统一mvc 和web api 的框架.接下来我就演示一下一下几个内容 1,怎么在Asp.net mvc 6 中创建简单 ...
- 在 ASP.NET MVC 项目中使用 WebForm、 HTML
原文地址:http://www.cnblogs.com/snowdream/archive/2009/04/17/winforms-in-mvc.html ASP.NET MVC和WebForm各有各 ...
- MVC项目中如何判断用户是在用什么设备进行访问
使用UAParser在C#MVC项目中如何判断用户是在用什么设备进行访问(手机,平板还是普通的电脑) 现在我们开发的很多web应用都要支持手机等移动设备.为了让手机用户能有更加好的用户体验,我们经常为 ...
- Mvc 6 中创建 Web Api
如何在Mvc 6 中创建 Web Api以及如何脱离IIS实现自我托管 微软推出的Asp.net vNext(asp.net 5.0)的其中的一个目标就是统一mvc 和web api 的框架.接下来我 ...
- ASP.NET MVC项目中App_Code目录在程序应用
学习ASP.NET MVC,如果你是开发ASP.NET MVC项目的,也许你去为项目添加前ASP.NET项目的APP_Code目录,在这里创建与添加的Class类,也许你无法在MVC项目所引用. 那这 ...
随机推荐
- React 简介及其基本使用
相关概念: 插件: 别人写好的第三方库 xxx 插件: jQuery 插件 / react 插件 全家桶: 核心库 + 相关插件 构建项目: 对项目源码 进行 编译.合并.压缩......处理,生 ...
- Flutter: X Android license status unknown
Flutter 环境检测问题 资料 windows cmd C:\Users\ajanuw>flutter doctor -v [√] Flutter (Channel stable, v1.0 ...
- scrapy入门使用
scrapy入门 创建一个scrapy项目 scrapy startporject mySpider 生产一个爬虫 scrapy genspider itcast "itcast.cn&qu ...
- vue全选与取消全选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux下安装前端程序员必备软件
startx进入桌面后,ctrl+alt+t调出终端.安装完成以后重启在软件ubuntu软件中找到软件启动或通过终端输入命令找到,锁定到启动器. 1.首先安装chrome(64位) cd /tm ...
- 深度好文 | 在阿里做了5年技术Leader,我总结出了这些套路!
导读:阿里巴巴高级技术专家云狄将为大家从管理的角度分享技术TL的核心职责,这其中包括团队建设.团队管理.团队文化.沟通与辅导.招聘与解雇等,希望与大家共同探讨.交流. 背景 互联网公司的技术团队管理通 ...
- EF Core 相关的千倍性能之差: AutoMapper ProjectTo VS Mapster ProjectToType
在前两天遇到 .NET Core 中 EF Core 的异步与同步查询的百倍性能之差(详情之前的博文)之后,这两天又遇到了 AutoMapper ProjectTo<T> 与 Mapste ...
- django项目同一用户不能同时登陆
1.session认证 ..... login(request, user) #登录成功 # 登录之后获取获取最新的session_key session_key = request.session. ...
- Netty入门(一):零基础“HelloWorld”详细图文步骤
因为接下来的项目要用到netty,所以就了解一下这个程序,奈何网上的教程都是稍微有点基础的,所以,就写一篇对于netty零基础的,顺便也记录一下. 先扔几个参考学习的网页: netty 官方API: ...
- python升级pip和Django安装
1.centos7默认python版本为2.7.5,现升级到3.6.0 2.wget https://www.python.org/ftp/python/3.6.0/Python-3.6.0.tgz ...