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

時間 2019-11-18

標籤 dotnetcore mvc 項目建立支持 vue.js vue 最小工程模板欄目 JavaScript 简体版

原文原文鏈接

網上Vue模板不是最新的，我本身作了一個最新的支持 Vue.js 的最小工程模板，方便你們從 Hello world. 入門, 在 VS2017 裏學習，並擴展出本身的項目。css

下面是建立步驟：html

一、在VS2017中創建一個新的 MVC 項目

略vue

二、用 npm 添加 vue 支持包

在MVC項目目錄下執行：webpack

npm initgit

npm i --save-dev webpack webpack-clies6

npm i --save-dev vue vue-loader vue-template-compilergithub

三、添加配置文件和運行文件

在vs項目中，建立 webpack.config.js 配置文件web

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()
  ]
}

這算是最小配置了吧。npm

將vue 程序添加到 ClientApp 目錄中，而且加入 main.jsbabel

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>