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

2022-08-28 19:49:51

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