Как использовать однофайловые компоненты Visual Studio 2017 и Vue

Я использую Visual Studio 2017 и вложил немало средств в ASPNET Core. При этом мне нравится использовать Vue.js 2.0 для некоторых элементов рабочего процесса пользовательского интерфейса на определенных страницах. Кажется, я не могу найти подходящий и легкий способ скомпилировать файл .vue (один файловый компонент) и получить чистый выходной файл .js и .css. Я использовал npm, vue-cli и webpack, но результирующий файл .js для моего однофайлового компонента содержит кучу других накладных расходов SPA, экспорта и т. д.

Разве нет простого способа использовать VS, чтобы при сохранении файла .vue он автоматически генерировал файлы .js и .css (я использую LESS css)?

Я предполагаю, что основная причина, по которой я хочу использовать файл .vue, заключается в том, чтобы получить подсветку синтаксиса в HTML, а также иметь все в одном месте.

есть идеи? Я надеюсь, что вы могли бы настроить VS для компиляции vue-cli (или какого-либо другого инструмента) при сохранении, как это делается с файлами .less для css, и создать новый файл .js и .css. Что-то подсказывает мне, что webpack может сделать это с помощью пользовательской конфигурации, но никто не может точно сформулировать, как это сделать в деталях.


webpack vue.js asp.net-core vue-cli visual-studio-2017
person paultechguy    schedule 09.09.2017    source источник
comment
Админы: Я бы не сказал, что это дублирующий вопрос. Visual Studio 2017 и ASP.NET Core — это две разные вещи. Например, можно использовать vscode с проектами ASP.NET Core и все равно не ответить на этот вопрос.   -  person exclsr    schedule 11.09.2017

Ответы (1)


arrow_upward
3
arrow_downward

Для CSS вы можете использовать ExtractTextPlugin с веб-пакетом: в href="https://vue-loader.vuejs.org/en/configurations/extract-css.html" rel="nofollow noreferrer">документы vue-loader есть пример того, что нужно указать в конфиг вебпака:

// 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) для запуска веб-пакета в режиме просмотра при открытии проекта, он перестроит ваши пакеты/CSS при сохранении.

Я не знаю ответа на часть .js вашего вопроса.

person exclsr    schedule 09.09.2017