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

本文轉載自查看原文 2018-10-25 15:18 1873 DotNetCore

網上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>