背景

.net core 與 vue 的簡介不再贅述，目前使用vue開發(fā)基本分為幾種情況：

• 使用webpack進(jìn)行純前端開發(fā)
• 傳統(tǒng)的web應(yīng)用中使用vue，主要使用vue的對(duì)象模型綁定

對(duì)于使用傳統(tǒng)的web+vue進(jìn)行單頁面應(yīng)用開的幾乎沒有找到例子，因此決定自己動(dòng)手嘗試，讓自己在實(shí)際的應(yīng)用中學(xué)習(xí)vue，并將自己的學(xué)習(xí)過程記錄下來。個(gè)人認(rèn)為，這種開發(fā)方式更適用于此類的猿：

• 不會(huì)使用Node開發(fā)，希望使用傳統(tǒng)的發(fā)布方式進(jìn)行發(fā)布。
• 為了更爽，希望使用angular、vue等前端框架。
• 嘗試單頁應(yīng)用的開發(fā)，如果是傳統(tǒng)的web應(yīng)用，使用vue的例子、教程就很多了。

依賴的環(huán)境和開發(fā)工具

• vs2017（當(dāng)然也可以是vs2015）
• NPM Task Runner(vs插件，用來在vs中執(zhí)行npm命令，當(dāng)然也可以在cmd中直接使用,可以在https://marketplace./items?itemName=MadsKristensen.NPMTaskRunner下載)
• Node環(huán)境（webpack依賴Node環(huán)境，開發(fā)完的應(yīng)用部署不依賴Node）

使用到的技術(shù)

• .net core
• vue全家桶
• element ui

先創(chuàng)建一個(gè)項(xiàng)目吧

創(chuàng)建應(yīng)用

打開vs創(chuàng)建一個(gè).net mvc應(yīng)用 

選擇web應(yīng)用

等待創(chuàng)建完成后，調(diào)整目錄，刪除不必要模板、css引用等?？刂破髦兄槐Ａ粢粋€(gè)Index。視圖只保留Home/Index。 
 
 
最后目錄結(jié)構(gòu)如下： 

使用webpack

為工程創(chuàng)建webpack、vue配置文件 
 
配置內(nèi)容如下： 
app.conf.js

exports.conf = {
    dev: true,//開發(fā)模式
    assetsSubDirectory:'resources'//資源目錄
}

utils.js

var path = require('path')
var conf = require('./app.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path) {
    return path.posix.join(conf.conf.assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
  options = options || {}
  var cssLoader = {
    loader: 'css-loader',
    options: {
        minimize: !conf.conf.dev,
      sourceMap: options.sourceMap
    }
  }
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
  // https://vue-loader./en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  var output = []
  var loaders = exports.cssLoaders(options)
  for (var extension in loaders) {
    var loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
  return output
}

vue-loader.conf.js

var utils = require('./utils')
var conf = require('./app.conf')
module.exports = {
    loaders: utils.cssLoaders({
        sourceMap: !conf.conf.dev,
        extract: conf.conf.dev
    })
}

webpack.config.js

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var conf = require('./app.conf') 
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    entry: {
        app: './wwwroot/main.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './wwwroot/dist/')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('wwwroot')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]'),
                    options: {
                        publicPath: 'dist/resources/img/'
                    }
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader',
                options: {
                    publicPath: 'dist/'
                }
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
    }
};

進(jìn)入項(xiàng)目的主目錄（Startup.cs所在的目錄），執(zhí)行npm命令：

npm init -y
npm install

wwwroot下創(chuàng)建main.js,目前先測試項(xiàng)目結(jié)構(gòu)是否正常，不引入路由等插件。

import Vue from 'vue'
import App from './App'
new Vue({
    render: h => h(App)
}).$mount('#app')

wwwroot下創(chuàng)建App.vue文件,只簡單顯示一個(gè)字符串

<template>
<div id="app">
    {{msg}}
</div>
</template>
<script>
export default {
    name: 'app',
        components: {
        }, 
        data() {
            return {
                msg:'Hello Vue'
            }
        }
    }
</script>

編譯項(xiàng)目，運(yùn)行起來吧

可以先在cmd中運(yùn)行

npm run build

驗(yàn)證配置無錯(cuò)后運(yùn)行。也可以直接編譯，NPM Task Runner插件會(huì)在vs編譯時(shí)同時(shí)運(yùn)行npm命令。

已經(jīng)可以正常運(yùn)行了，下一篇將開始進(jìn)行正式的應(yīng)用開發(fā)流程。