マルチページのVueアプリケーションの開発で発生した問題

4300 ワード
vue-cliが作成したvueプロジェクトは単ページアプリケーションで、私のプロジェクトでは多ページアプリケーションが必要です.これにより、Googleで他人の方法を学び、実践に移し、実践の過程で、問題に遭遇しました.間違いがあったら、指摘してください.
手順:
手順1:vue-cliを使用して単一ページアプリケーションプロジェクトを作成する
まず、vue-cliツールがインストールされていることを確認する必要があります.
vue-cliインストールパスを参照して、vue-cliをインストールできます.
次のコマンドを使用してvue-cliのバージョン番号を表示します.
vue -V
  • vue-demoプロジェクト
    • を作成
    vue init webpack vue-demo

    ヒントによると、内容を入力してもいいし、入力しなくてもいいし、車に戻ってもいいです.そのうちUse ESLint to lint your code? (Y/n)、本人はNoを選択します.リターンを押し続けます.車に戻ってから、プロジェクトの作成を待っています.【辛抱強く待って、ちょっと時間がかかる…】
  • プロジェクトに入り、基礎モジュール
    • を取り付ける.
    cd vue-demo
npm install

    ちょっと待って...
  • 運行項目
    • npm run dev

    ブラウザでの入力http://localhost:8080ページにアクセスできます
    以上のページが表示されたら、vue-cliを使用して単一ページアプリケーションのvueプロジェクトを作成しておめでとうございます.次に,単一ページアプリケーションをマルチページアプリケーションに変換することを実現する.
    手順2:シングルページアプリケーションからマルチページアプリケーションへ
    この機能を実現する際、ネット上の大牛のやり方を調べたが、自分が実際に操作している間に、やはり問題に遭遇し、まず自分の操作の流れと出会った問題を以下にまとめた.
    参照ドキュメント:
    vueでマルチページアプリケーションを構築する
    Vue-cliを使用してマルチページアプリケーションを構築する際のプロジェクト構造と構成の調整
    1、プロジェクトカタログの調整
    プロジェクトの元のディレクトリ構造図:
    プロジェクトディレクトリ構造の調整:
  • プロジェクトのsrcフォルダの下に入り、ページファイル
    • を格納するためのpagesフォルダを新規作成します.
  • pagesフォルダの下にindexフォルダを新規作成し、srcディレクトリの下のAppを作成します.vue、main.js、routerフォルダ、およびプロジェクトルートディレクトリのindex.htmlファイルをindexフォルダに移動しmain.jsをindexに変更する.js【PS:ページの入口jsファイルとテンプレートファイルの名称が一致することを保証する】
    • pagesフォルダはページを保存するために使用され、各ページはフォルダを作成する必要があります.このフォルダは保存するために使用されます.html,.js,.vue 3ファイル
  • pagesの下にtestフォルダを作成し、testページ関連ファイル
    • を格納する
  • srcディレクトリの下にmodulesフォルダを新規作成し、ページコンポーネントを格納します.共通のコンポーネントはcomponentsフォルダの下に配置され、非共通はmodulesフォルダの下に
    • に格納されます.
    変更されたアイテムのディレクトリ構造は次のとおりです.
    2、プロファイルの変更
    このセクションでは、vueでマルチページアプリケーション記事を構築することをお勧めします.以下の操作は、この記事の操作方法を直接使用していますが、いくつかの点では、アイデアが必要です.
    主に以下のファイルを変更します.
  • utils.js
  • webpack.base.conf.js
  • webpack.dev.conf.js
  • webpack.prod.conf.js

    • 具体的な修正は以下の通りです.
  • プロジェクトルートディレクトリの下のbuildフォルダの下utilsを開く.js
  • プロジェクトのルートディレクトリの下のbuildフォルダの下のwebpackを開きます.base.conf.js
  • プロジェクトのルートディレクトリの下のbuildフォルダの下のwebpackを開きます.dev.conf.js

    • ヒント:カンマをつけるのを覚えていて、神経の大きい私、いつもプラスすることを忘れます
  • プロジェクトのルートディレクトリの下のbuildフォルダの下のwebpackを開きます.prod.conf.js

    • 3、src/pagesディレクトリの下のページを修正する
    testの下のファイルはindexページを参照すればよい
  • src/pages/indexディレクトリの下のindex.jsは現在のページ(基本ディレクトリ[index]の下)に導入する.vueファイルの場合、元のファイルの導入形式は
    • であることに注意してください.
    import App from './App'

    しかし、私は強迫症で、indexのフォルダの下のファイルをindexに変更しました.html、index.js、index.だからindex.jsファイルがvueファイルを導入する場合は、以下のように変更する必要があります.
    import App from './index.vue'

    大文字の気まずさ:最初はimport App from'./index';それからどのようにデバッグして、どのように間違いをして、私自身を振り回します.なぜなら、現在のディレクトリの下にindexを接頭辞とするファイル名が3つあり、どちらに一致するか分からないため、エラーが投げ出されます.
    4、npm run buildコマンドの実行
    npm run buildコマンドを使用すると、プロジェクトディレクトリの下にdistフォルダが1つ増え、中に複数ページが格納されます.htmlファイル
    5、npm run dev運行項目
    6、アクセスページ
    開くhtmlページ
    http://localhost:8080/test.html

    7、存在する問題
  • 問題1:testを開きます.htmlページの場合、ブラウザのconsoleは次のエラーを投げ出します:
    • [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in )

    解決方法:test.jsファイルの下のvueインスタンスに、次のコードを追加します.
    // ：
new Vue({
  el: '#test',
  // router,
  components: { Test },
  template: '',
  render: h => h(Test)    //      
})

    プロジェクト小demo
    自分で実践を通じて、1つのdemoを実現して、必要なものがあれば参考にすることができます.
    vue親子コンポーネントは値を伝達し、サブコンポーネントはprops値を取得できない
    クエリー・データベースのプライマリ・キーと外部キー