如何使用Visual Studio 2017和Vue单个文件组件

Question

我使用Visual Studio 2017并投入了大量的ASPNET Core.话虽如此,我确实喜欢在某些页面上使用Vue.js 2.0来处理某些UI工作流程.我似乎无法找到一种合适的,轻量级的方法来编译.vue文件(单个文件组件)并最终得到一个干净的输出.js和.css文件.我使用过npm,vue-cli和webpack,但是我的单个文件组件生成的.js文件包含一堆其他SPA,导出等开销.

是不是只有一种简单的方法来使用VS,这样当保存.vue文件时,它会自动生成.js和.css文件(我使用LESS css)干净利落？

我想我想使用.vue文件的主要原因是在HTML上获取语法高亮,以及让我的所有文件都在一个公共位置.

有什么想法吗？我希望你可以配置VS来执行vue-cli(或其他一些工具)编译,就像使用css的.less文件一样保存,并创建一个新的.js和.css文件.有些东西告诉我webpack可以使用自定义配置执行此操作,但似乎没有人能够明确地详细说明如何执行此操作.

Answer 1

对于 CSS，您可以将ExtractTextPlugin与 webpack 结合使用：vue-loader 文档有一个关于在 webpack 配置中放置哪些内容的示例：

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

对于 Visual Studio 2017 集成，我建议使用WebPack Task Runner。如果您将其设置（通过 Task Runner Explorer 中的绑定）在项目打开时以监视模式运行 webpack，它将在保存时重建您的包/CSS。

我不知道你问题的 .js 部分的答案。