网上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)》 工程有点老,还是有帮助的。

《用webpack4打包vue多页项目》

《Setting up a Vue.js Project with webpack 4 and Babel 7》

在dotnetcore的MVC项目中,创建支持 vue.js 的最小工程模板的更多相关文章

  1. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  2. Asp.net MVC 4新项目中创建area的后续操作

    Asp.net MVC 4新项目中创建area后,往往HomeController与area的HomeController路由发生混淆,需要手工设置一些地方避免mvc无法识别默认路由的状况. 无废话具 ...

  3. 【初学者指南】在ASP.NET MVC 5中创建GridView

    介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样.服务器端和客户端有许多可用的第三方库,这些 ...

  4. 谈谈MVC项目中的缓存功能设计的相关问题

    本文收集一些关于项目中为什么需要使用缓存功能,以及怎么使用等,在实际开发中对缓存的设计的考虑 为什么需要讨论缓存呢? 缓存是一个中大型系统所必须考虑的问题.为了避免每次请求都去访问后台的资源(例如数据 ...

  5. 如何在Mvc 6 中创建 Web Api以及如何脱离IIS实现自我托管

    微软推出的Asp.net vNext(asp.net 5.0)的其中的一个目标就是统一mvc 和web api 的框架.接下来我就演示一下一下几个内容 1,怎么在Asp.net mvc 6 中创建简单 ...

  6. 在 ASP.NET MVC 项目中使用 WebForm、 HTML

    原文地址:http://www.cnblogs.com/snowdream/archive/2009/04/17/winforms-in-mvc.html ASP.NET MVC和WebForm各有各 ...

  7. MVC项目中如何判断用户是在用什么设备进行访问

    使用UAParser在C#MVC项目中如何判断用户是在用什么设备进行访问(手机,平板还是普通的电脑) 现在我们开发的很多web应用都要支持手机等移动设备.为了让手机用户能有更加好的用户体验,我们经常为 ...

  8. Mvc 6 中创建 Web Api

    如何在Mvc 6 中创建 Web Api以及如何脱离IIS实现自我托管 微软推出的Asp.net vNext(asp.net 5.0)的其中的一个目标就是统一mvc 和web api 的框架.接下来我 ...

  9. ASP.NET MVC项目中App_Code目录在程序应用

    学习ASP.NET MVC,如果你是开发ASP.NET MVC项目的,也许你去为项目添加前ASP.NET项目的APP_Code目录,在这里创建与添加的Class类,也许你无法在MVC项目所引用. 那这 ...

随机推荐

  1. React 简介及其基本使用

    相关概念: 插件: 别人写好的第三方库 xxx 插件: jQuery 插件  /  react 插件 全家桶: 核心库 + 相关插件 构建项目: 对项目源码 进行 编译.合并.压缩......处理,生 ...

  2. Flutter: X Android license status unknown

    Flutter 环境检测问题 资料 windows cmd C:\Users\ajanuw>flutter doctor -v [√] Flutter (Channel stable, v1.0 ...

  3. scrapy入门使用

    scrapy入门 创建一个scrapy项目 scrapy startporject mySpider 生产一个爬虫 scrapy genspider itcast "itcast.cn&qu ...

  4. vue全选与取消全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. linux下安装前端程序员必备软件

    startx进入桌面后,ctrl+alt+t调出终端.安装完成以后重启在软件ubuntu软件中找到软件启动或通过终端输入命令找到,锁定到启动器. 1.首先安装chrome(64位) cd    /tm ...

  6. 深度好文 | 在阿里做了5年技术Leader,我总结出了这些套路!

    导读:阿里巴巴高级技术专家云狄将为大家从管理的角度分享技术TL的核心职责,这其中包括团队建设.团队管理.团队文化.沟通与辅导.招聘与解雇等,希望与大家共同探讨.交流. 背景 互联网公司的技术团队管理通 ...

  7. EF Core 相关的千倍性能之差: AutoMapper ProjectTo VS Mapster ProjectToType

    在前两天遇到 .NET Core 中 EF Core 的异步与同步查询的百倍性能之差(详情之前的博文)之后,这两天又遇到了 AutoMapper ProjectTo<T> 与 Mapste ...

  8. django项目同一用户不能同时登陆

    1.session认证 ..... login(request, user) #登录成功 # 登录之后获取获取最新的session_key session_key = request.session. ...

  9. Netty入门(一):零基础“HelloWorld”详细图文步骤

    因为接下来的项目要用到netty,所以就了解一下这个程序,奈何网上的教程都是稍微有点基础的,所以,就写一篇对于netty零基础的,顺便也记录一下. 先扔几个参考学习的网页: netty 官方API:  ...

  10. 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 ...