在dotnetcore的MVC项目中，创建支持 vue.js 的最小工程模板

时间：2022-01-24 02:20:19

网上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 目录下多余的文件删除。最后剩下如下文件：

在dotnetcore的MVC项目中，创建支持 vue.js 的最小工程模板

4、手动编译 vue 文件

这时，如果手动编译 vue 项目，可在项目目录下执行：

npx webpack  --mode development

5、在VS中运行项目

这时在 VS2017 中执行项目，结果是:

在dotnetcore的MVC项目中，创建支持 vue.js 的最小工程模板

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&period;js的移动组件库cube-ui

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

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

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

  3. 【初学者指南】在ASP&period;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&period;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&period;NET MVC项目中App&lowbar;Code目录在程序应用

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

随机推荐

  1. Windows Server 2008 R2 负载平衡入门篇

    一.简单介绍负载均衡 负载均衡也称负载共享,它是指负载均衡是指通过对系统负载情况进行动态调整,把负荷分摊到多个操作节点上执行,以减少系统中因各个节点负载不均衡所造成的影响,从而提高系统的工作效率.在常 ...

  2. windows server2008 安装问题、sqlserver安装设置默认账户问题

    1.Bios中的satadata设置开启 2账户和密码最好与本机相同

  3. iOS&colon; 上传App到AppStore，由于Xcode上传太慢，换成Application Loader上传，速度秒传

    一.遇到的遭遇 在之前的项目开发中,本人有点固执,一直采用xcode打包后再上传,结果可想而知: (1)要么上传时速度慢的跟蜗牛似的,等的我心力交瘁(不排除网络不给力的原因,公司这个吊问题快把我气疯了 ...

  4. Google 2013 campus test-R1

    Reading Phone Number #include<iostream> #include<fstream> #include<vector> #includ ...

  5. C&plus;&plus;中的struct与class继承方式

    代码: #include <iostream> #include <cstdio> using namespace std; //class A{ struct A{ publ ...

  6. tomcat之负载均衡（apache反响代理tomcat）

    基于mod_proxy模块 配置内容如下: 准备工作-->检查模块 # httpd -D DUMP_MODULES……………………proxy_module (shared)proxy_balan ...

  7. centOS&lpar;redhat&sol;oracle linux更换语言

    编辑/etc/sysconfig/i18n将LANG=”zh_CN.UTF-8″ 改为 LANG=”en_US.UTF-8″ 或其他语言中文乱码将LANG=”zh_CN.UTF-8″改为LANG=”z ...

  8. 控制结构&lpar;10&rpar; 指令序列&lpar;opcode&rpar;

    // 上一篇:管道(pipeline) 发现问题 在一个正式项目的开发周期中,除了源代码版本控制外,还存在着项目的配置/编译/打包/发布等各种高频但非"核心"的脚本代码.职业程序员 ...

  9. How to install tcpping on Linux&period;md

    To install tcptraceroute on Debian/Ubuntu: $ sudo apt-get install tcptraceroute To install tcptracer ...

  10. 利用 Windows API Code Pack 修改音乐的 ID3 信息

    朋友由于抠门 SD 卡买小了,结果音乐太多放不下,又不舍得再买新卡,不得已决定重新转码,把音乐码率压低一点,牺牲点音质来换空间(用某些人的话说,反正不是搞音乐的,听不出差别)… 结果千千静听(百度音乐 ...

相关文章