VUE複数ページのアプリケーション

  VUE-CLI3を構築するマルチページアプリケーション

  最初のステップは:VUE-CLI3プロジェクトを作成します。VUEアプリを作成します

  NPMサーブを実行します。次に、プロジェクトを実行

  今、複数ページのアプリケーション:

  まず、SRCを以下は、文書のページを作成し、次に示すように、そのようなディレクトリ構造を作成し、各フォルダには、対応するページです。

    

 

   その後、すべてのファイルに対応する各ファイルの内容はとても日常的であると述べ

    index.htmlを

      

    コード:

      <!DOCTYPE HTML>
      <HTML>
        <ヘッド>
            <メタ文字セット= "UTF-8">
            <メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
            <META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
            <タイトル>ドキュメント</ TITLE>
        </ head>の
        <身体>
            <DIV ID = "アプリケーション">
  
            </ div>
        </ BODY>
      </ HTML>

  

     index.js

      

    コード: 

      「表示」からインポートビュー。
      「./index.vue」からインポート尻;
      Vue.config.productionTip = falseは、
      新しいビュー({
          レンダリング:H => H(尻)
      })。$マウント( '#アプリケーション')

    index.vue

      

    コード:  

      <テンプレート>
          <div>
              こんにちはページ1;
              <aのhref="page2.html">は、私は世界</a>をしたいです
          </ div>
      </テンプレート>
      <スクリプト>
        輸出のデフォルト{
  
        }
      </ SCRIPT>
      <スタイルLANG = "SCSS" スコープ>

      </スタイル>

   その後、我々はvue.config.jsのルートディレクトリにファイルを作成する必要があります

    

  コード: 

    グロブ=が(「グロブ」)を要求してみましょう
    //現在のフォルダ内の設定ページに複数ページのhtmlとjsファイルを取得します
    関数のgetEntry(globPath){
        せエントリ= {}、TMP、HTMLS = {};
        すべての下のsrc /ページ/ ** / htmlファイルを読み込む//
        glob.sync(globPath + 'HTML')。forEachの(関数(エントリ){
            TMP = entry.split( '/')スプライス(-3)。
            HTMLS [TMP [1] =エントリ
        })
        すべての下のsrc /ページ/ ** / JSファイルを読み込む//
        glob.sync(globPath + 'JS')。forEachの(関数(エントリ){
            TMP = entry.split( '/')スプライス(-3)。
            エントリ[TMP [1] = {
                エントリ、
                テンプレート:HTMLS [tmpに[1]] HTMLS [tmpが[1]] :? 'index.htmlを'、//カレントディレクトリには、テンプレートなどの一般的なHTMLの公共/ index.htmlを何の場所を持っていません
                ファイル名:TMPは、[1] +アクセスアドレスとしてフォルダ名に//「.HTML」.htmlを
            }。
        });
        console.log(エントリー)
        エントリを返します。
    }
    HTMLS =のgetEntry( './のsrc /ページ/ ** / *。')しましょう。
    module.exportsは= {
      ページ:HTMLS、
      publicPath「./」、//パッケージングの問題の後に静的なファイルパス404を解きます
      outputDirの「DIST」、//ファイルのパッケージのフォルダ名の後に、デフォルトのDIST
      devServer:{
          開く:真、// NPMの実行を自動的にブラウザを開くのに役立ちます
          インデックス:「/page1.html」//デフォルトのスタートページ
      }
    }

   その後、我々は命令を詰め:ビルドを実行NPM

    私たちはジャンプの方法は、ラベルによって達成することができます

  その後、我々は、輸出書類のパックケースを見ることができます

    

 

 

    

おすすめ

転載: www.cnblogs.com/shangjun6/p/11495744.html