背景

.net core 与 vue 的简介不再赘述，目前使用vue开发基本分为几种情况：

• 使用webpack进行纯前端开发
• 传统的web应用中使用vue，主要使用vue的对象模型绑定

对于使用传统的web+vue进行单页面应用开的几乎没有找到例子，因此决定自己动手尝试，让自己在实际的应用中学习vue，并将自己的学习过程记录下来。个人认为，这种开发方式更适用于此类的猿：

• 不会使用Node开发，希望使用传统的发布方式进行发布。
• 为了更爽，希望使用angular、vue等前端框架。
• 尝试单页应用的开发，如果是传统的web应用，使用vue的例子、教程就很多了。

依赖的环境和开发工具

• vs2017（当然也可以是vs2015）
• NPM Task Runner(vs插件，用来在vs中执行npm命令，当然也可以在cmd中直接使用,可以在https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner下载)
• Node环境（webpack依赖Node环境，开发完的应用部署不依赖Node）

使用到的技术

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

先创建一个项目吧

创建应用

打开vs创建一个.net mvc应用 

选择web应用

等待创建完成后，调整目录，删除不必要模板、css引用等。控制器中只保留一个Index。视图只保留Home/Index。 
 
 
最后目录结构如下： 

使用webpack

为工程创建webpack、vue配置文件 
 
配置内容如下： 
app.conf.js

exports.conf = {
    dev: true,//开发模式
    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.vuejs.org/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/')
    },

                            
                            版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

                            原文链接：https://blog.csdn.net/u011822144/article/details/72764120

                            站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。