問題タブ [vue-loader]

vuejs 1 のコードは次のとおりです。

コンポーネントはどこIndexにありますか。

次のように vue 2 に変換しようとします。

しかし、これは[Vue warn]: Error when rendering root instance.

これを書き直す正しい方法は何ですか？

ありがとう

バックグラウンド

新しい vue.js (2.0) プロジェクトを開始します。私はvue-cli他のプロジェクト ( vuejs-templates/webpack ) で作業しましたが、何らかの変更を行うときにビルドプロセスを把握するのが難しいことがわかりました。その上、webpack はドキュメントが不足していることで悪名高いため、ビルド プロセスを微調整するだけでも大変な作業になることが判明しました。一般的に、私は webpack と vue-loader の両方を理解していると思います。まだまだ全体像が掴めなくて困ってvuejs-templates/webpackいます。

質問

このアプリ用に独自の webpack 構成を展開することを検討していますが、最終的に現在の .xml と同じくらい大きなビルド プロセスになってしまうのではないかと心配していますvuejs-templates/webpack。私の計画は、vuejs-templates/webpack-simpleから作業を進めることであり、物事を複雑にしすぎないようにすることでした。私が念頭に置いているのは、との間のどこかにある構成/ビルドプロセスvuejs-templates/webpack-simpleですvuejs-templates/webpack。

他の人 (おそらく私より経験のある人) が についてどのように感じているかを知りたいですvuejs-templates/webpack。プロジェクトが大きくなるにつれて使いづらくなるのか、それとも最終的にすべてが理にかなっているのだろうか.

自分の webpack 構成 / ビルド プロセスを展開するのは理にかなっていますvuejs-templates/webpackか?

webpack のローダーvue-loaderを使用して Vue.js コンポーネントをテストしようとしています。私は彼らのチュートリアルに従っていましたが、期待どおりにうまくいきませんでした。ここに私のコンポーネントがあります:

これが私のスペックファイルです：

カルマを使用してテストを実行します。カルマ設定ファイルは次のとおりです。

前処理に使用される webpack 構成は次のとおりです。

これは、カルマがロードするテストのエントリ ポイントである app.spec.js です。すべての仕様ファイルをロードする責任があります。

今、カルマでテストを実行すると、次のエラーが発生します。

なぜこれが起こっているのか、またはこのエラーが何を意味するのか、私には手がかりがありません. 誰かが私のエラーを特定して説明できますか?

私たちのプロジェクトでは VueJS を使用しており、次のような多くのコードがあります。

<template lang="jade"> div(v-bind:class='`type-${type}`') Hello world! </template>

しかし、文字列テンプレート機能が IE でサポートされていないため、IE 11 では機能しません。また、この文字列の解釈には VueJS マジックが含まれており、Babel はそれを文字列と見なすため、Babel はこの文字列をトランスパイルできないようです。エラーメッセージは次のとおりです。

このようなコードをすべて手作業で書き直す以外に、この問題の回避策はありますか?

Vue 1.0 を使用しておりvue-loader、単一ファイル コンポーネントをサポートするために、構成は次のようになります。

何らかの理由で、私の webpack/vue-loader アプリケーションの HTML コードで -enter-active と -leave-active がデフォルトのタイムアウトで表示される場合、トランジション効果を作ることができません。

アニメーションの欠如に関するいくつかの問題に対処した後、Web プロジェクトのvue-guideから以下のコードをコピーして貼り付けました。以下のこの単純な例でさえ、まったく機能していません。

他の誰かがこの問題に遭遇していますか?

index.html

私の main.js ファイル:

**上記のコードは、css クラスの fade-enter-active、.fade-leave-active を追加することで解決しました **

ただし、Vue.component で作成した画像スライダーでは、同じ原則が機能しません。コードは次のようになります。

vue-cliブートストラップされたプロジェクトでいくつかの機能を理解するのに苦労していました。独自の高速アプリを使用してファイルとファイルwebpack-dev-serverを提供したかったため、を使用しませんでした。そこで、Webpack を使用して Vue 2.0 をゼロからセットアップすることにしました。index.htmlbuild.js

webpack実行中にエラーが発生しました。

私はこのエラーを受け取り続けていますが、それを見ると、からvue-loader要求された での要求が処理されていません。別の SO の回答に出くわしましたが、それは古いバージョンの Vue 用だったと思います。App.vuemain.jsvue-html-loader

App.vueとはバージョンmain.jsから同じままです。vue-cli

これは私の依存関係であり、package.jsonインストールしないことで元の vue-cli 依存関係とは異なります。webpack-dev-servercross-envfile-loader

私webpack.config.jsには不要だと思っていた vue-cli バージョンの一部が含まれていません。

プロジェクトのwebpack.config.jsファイルは次のとおりです。vue-cli

どんな助けでも大歓迎です。vue-cliscaffolded プロジェクトの使用方法を学ぶことができる場所に私を案内していただけれexpressばwebpack-dev-server、それは素晴らしいことです!

vue.js は初めてです。angularjs アプリの移行を開始しています。vue cli を使用して、新しい simple-webpack プロジェクトを生成しています。これにより、新しい webpack+vueLoader プロジェクトが作成されます。すべてが順調に進みましたが、今問題があります。@click イベントでデータを変更したいのですが、オブジェクトにアクセスできません。「これ」はデータ インスタンスではありません。

ここで何が欠けていますか？

これは期待どおりのデータ インスタンスではないため、UI は更新されません。vuejs doc では、メソッド内でこれに対処するだけで十分であることがわかります: vue js doc

どんな助けでも大歓迎です。

敬具。

Vue アプリを作成していますが、依存関係の 1 つが未定義の関数の呼び出しにより失敗しています。

vue-range-slider.cjs.js:150Uncaught ReferenceError: _h is not defined

これは、ピアの依存関係の更新と破損が原因である可能性があると考えたため、package.json からすべての ^ 文字を削除しました

問題は解決しません。さらにどのようなトラブルシューティング手順を実行できますか?