web-dev-qa-db-ja.com

Visual Studio2017とVue単一ファイルコンポーネントの使用方法

Visual Studio 2017を使用しており、かなりの量のASPNETCoreに投資しています。そうは言っても、特定のページのUIワークフローにVue.js 2.を使用するのが好きです。 .vueファイル（単一ファイルコンポーネント）をコンパイルして、クリーンな出力の.jsファイルと.cssファイルを作成する適切な軽量の方法が見つからないようです。 npm、vue-cli、およびwebpackを使用しましたが、単一ファイルコンポーネントの結果の.jsファイルには、他のSPA、エクスポートなどのオーバーヘッドが多数含まれています。

.vueファイルが保存されたときに.jsファイルと.cssファイル（私はLESS cssを使用）をきれいに自動生成するようなVSを使用する簡単な方法はありませんか？

.vueファイルを使用したい主な理由は、HTMLで構文を強調表示することと、すべてを共通の場所に配置することだと思います。

何かご意見は？ cssの.lessファイルの場合と同じように保存時にvue-cli（またはその他のツール）コンパイルを実行し、新しい.jsファイルと.cssファイルを作成するようにVSを構成できれば幸いです。 webpackはカスタム設定でこれを実行できるとのことですが、これを詳細に実行する方法を正確に説明できる人はいないようです。

webpackasp.net-corevue.jsvisual-studio-2017vue-cli
7
paultechguy

CSSの場合、webpackで ExtractTextPlugin を使用できます。 vue-loader docs は、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 を使用することをお勧めします。プロジェクトを開いたときにウォッチモードでwebpackを実行するように（Task Runner Explorerのバインディングを介して）設定すると、保存時にバンドル/ CSSが再構築されます。

あなたの質問の.js部分に対する答えがわかりません。

3
exclsr