ルーティング用のJavaScript変数にVueファイルの内容を読み込む

Question

vue-routerパッケージを何日か使ってみることなく、それがどのように働いているのか、私は夢中になっています。

私の問題：VueJSを使用してシングルページアプリケーションを作成したいと思います.VueJS開発チームが正式にサポートしているルーティングパッケージであるため、vue-routerパッケージを使用しました。 私はそれらの多くは、このようなテンプレートハード書き込むことによって開始し、「はじめに」の記事をたくさん読んだ：

const Foo = { template: '<div>foo</div>' } 

をしかし、私はこれら二つの引用符の間に私の全体のテンプレートを書くには本当にないんだので、私のテンプレートをファイルに書き込んで、そのファイルの内容をJS変数にロードする方法を探しました。

import App from './App.vue'; 

しかし、私はこれを行う、私はこのエラーを取得するその方法：「予期しないトークンのインポート」を .vueファイルにテンプレートを作成し、その後、使用して変数にロードすることは可能だと思われます。

私は本当に不満です、彼らはテンプレート読み込みがすべてのブラウザで互換性があるための本当に便利な方法について考えていないのですか？私は何を取りこぼしたか？

Answer 1

Vue CLIを参考にして、あなたのプロジェクトに必要な足場をセットアップすることをお勧めします。選択したオプションに基づいて、vue-routerと一緒にwebpackバックアップテンプレートを作成することができます。 Webpackはあなたのプロジェクトをバンドルして、そのようなエラーに遭遇しないようにします。

一般的に、vueファイルを使用します。 VUEファイルは、3つの部分に分割されており、このようになります：あなたはあなたのコンポーネントは次のように整理してい

<template> 
    // Your HTML for this component goes here 
</template> 

<script> 
    // Your JS for this component goes here 
</script> 

<style> 
    // Your CSS for this component goes here 
</style> 

たら、ルーティングを処理することは非常に簡単です。ルーティングを処理するルータオブジェクトを含むファイルを指定します。

これらはかなり基本的なものなので、ここでは詳しくは触れませんが、公式のVue docsページでもっと学ぶことができます。 Hereは、vueファイルに単純なコンポーネントを構築する方法と、vue-routerを適切に使用する方法を示すサンプルプロジェクトです。