1. 概要

一文の要約:
1.index.html-homepage、プロジェクトエントリ;
2.App.vue-root コンポーネント;
3.main.js-entry ファイル
4.index.js のルーティング名とリソースマッピングの設定、App へのレンダリング。 Vue
がプロジェクトを実行しており、main.js がプロジェクトのエントリファイルとして使用されます。実行中に、インスタンスをマウントする必要がある場所、つまり、index.html を見つけます。最初に、マウントされたコンテンツIndex.html の部分が表示されますが、インスタンス内のコンポーネント内のテンプレートの内容に置き換えられるので、一瞬、index.html の本文の内容が表示されることがわかります。

![ここに画像の説明を挿入](https://img-blog.csdnimg.cn/97413ff6452e4c809272f0833b326bd8.png

1.index.htmlでidがappであるdivタグをどのように説明・表現すればよいでしょうか？

マウントポイント:index.html で ID が app である div タグはマウントポイントであり、Vue ルートインスタンスはこのマウントポイントにマウントされます。

2. Vueにおけるmain.js、App.vue、index.htmlの関係をまとめる

転送元または参考: Vue における main.js、App.vue、index.html の関係の概要
https://www.cnblogs.com/chenleideblog/p/10484554.html

初期化された Vue プロジェクトで最初に扱う 3 つのファイルは、main.js、App.vue、index.html です。トレーニングビデオや公式ドキュメントから学ぶことができます。

ここに画像の説明を挿入

Index.html - ホームページ、プロジェクトエントリ
App.vue — ルートコンポーネント
main.js - エントリファイル

それでは、これらのファイル間の関係は何でしょうか?

1. まず、index.html の内容を確認します。 (各ファイルをよく識別するために、各ファイルにテキストをマークしました)
ここに画像の説明を挿入
2. App.vue で、次の処理を実行しました。

ここに画像の説明を挿入
3. main.js のファイルの初期内容は次のとおりです。

では、チェックインした Web ページはどうなるでしょうか?

Web ページの効果は次のとおりです。

ここに画像の説明を挿入

つまり、Web ページの Title 部分には、index.html で定義された Title が読み込まれ、body 部分には、App.vue で定義された部分が読み込まれます。（ただし、ブラウザを開いた瞬間、ブラウザのボディ部分にはindex.htmlで定義したボディ部分が即座に表示されることに注意してください。）

次に、上記のロジックを分析すると、ブラウザーがプロジェクトにアクセスすると、index.html ファイルが最初にアクセスされます。

Index.html 内で

<div id="app">来自index.html正文中的内容</div>

アプリの ID を持つマウントポイントがあり、Vue ルートインスタンスがこのマウントポイントにマウントされます。

main.js はプロジェクトのエントリファイルとして使用されます。main.js 内に新しい Vue インスタンスが作成されます。Vue インスタンスに次のパスを渡します。

new Vue({
    
    
  el: '#app',
  //components: {
    
    App },
  //template: '<App/>'
})

インスタンスにマウントする場所 (つまり、インスタンスがindex.html にロードされる場所) を指示します。

次に、インスタンスに部分コンポーネントAppを登録しますが、この部分コンポーネントAppはどこから来たのでしょうか？

import App from './App.vue'

new Vue({
    
    
  //el: '#app',
  components: {
    
    App },
  //template: '<App/>'
})

このローカルコンポーネントは、現在のディレクトリにある App.vue です。

そしてテンプレートとは何ですか？テンプレートは、コンポーネント App.vue のテンプレートのコンテンツです。(テンプレートは元のマウントポイントのコンテンツを置き換えます)

したがって、Vue インスタンスは一時的に App.vue コンポーネントのコンテンツになります。

したがって、要約すると次のようになります。

プロジェクトの実行中、main.js がプロジェクトのエントリファイルとして使用されます。実行中に、インスタンスをマウントする必要がある場所、つまり、index.html を見つけます。最初は、 Index.html のマウントポイントが表示されますが、インスタンス内のコンポーネント内のテンプレートの内容に置き換えられるので、一瞬、index.html のボディの内容が表示されることがわかります。

Index.html の Title 部分は置換されないため、常に保持されます。

https://www.cnblogs.com/Renyi-Fan/p/11109763.html

要約する

Vueを勉強していた当初は、いつもファイル間のロジックが理解できず、その場でさまよっていましたが、WeChatアプレットの開発に挑戦して、漠然とタイムシェアリングをして、方向転換しました。私は引き続き Vue プロジェクトの開発に取り組みましたが、その結果、当初は不明であったことが突然明らかになりました。

ルートディレクトリにindex.htmlファイル、srcディレクトリにmain.jsとApp.vue、routerフォルダにindex.jsがあり、これらのファイルの関係を理解することで、その後の開発のアイデアが明確になります。

Index.html - ホームページ、プロジェクトエントリ

Index.html はプロジェクトが最初に訪問するサイトです。通常、空のルートノードを定義します。main.js で定義されたインスタンスはルートノードの下にマウントされ、コンテンツは vue コンポーネントによって埋められます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页title</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue — ルートコンポーネント

Vue では、接尾辞 .vue が付いたファイルを作成することがよくありますが、.vue ファイルは通常 3 つの部分で構成され、それぞれとのタグで囲まれています。

上記の 3 つの部分は、もともとフロントエンドで学習した html、javascript、css の 3 つの部分として理解できます。

その中で、私たちは通常、使用したいWebインターフェイスを確立し、通常はデータを扱い、データのリリース方法を定義するなど、ロジック指向であり、主にラベル内のスタイルを担当します。

上記 3 つの組み合わせによって私たちが目にする Web ページが構成されますが、通常、新しいページを開発するときは、新しい .vue ファイルを作成し、そのファイル内に 3 つのリンクを記述します。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    
    

  name: "app"
};
</script>
<style>
.add-container {
    
    
  margin-bottom: 20px;
}
</style>

補充:

【レンプレート】

テンプレートには親ノードを 1 つだけ含めることができます。つまり、最上位 div は 1 つだけ含めることができます (たとえば、上の図では、親ノードは #app の div であり、兄弟ノードはありません)。

これはサブルーティングビューであり、次のルーティングページがここに表示されます。

例えて言うと、スロットに似ていて、あるルートにジャンプする際に、そのルートの下のページがこのスロットに挿入されてレンダリング・表示されます。

【脚本】

Vue は通常、es6 で書かれ、データ、ライフサイクル (マウントなど)、メソッド (メソッド) などを含めることができるエクスポートデフォルトでエクスポートされます。

【スタイル】

styleタグによるスタイル

外部 CSS ファイルをインポートする場合は、まずプロジェクトの css-loader 依存関係パッケージをインストールし、cmd を開き、プロジェクトディレクトリに入り、「npm install css-loader」と入力して、Enter キーを押す必要があります。インストールが完了したら、style タグの下に必要な CSS ファイルをインポートできます。このようにして、スタイルの下にスタイルをカプセル化し、css フォルダーに書き込み、ページに導入して使用することができ、vue ページ全体もより簡潔に見えます。

<style> 

     import './assets/css/public.css'  

</style>

main.js - エントリファイル

main.js は、次の図に示すように、主に vue フレームワーク、ルートコンポーネント、ルーティング設定を導入し、vue インスタンスを定義します。

コンポーネント: {App} は導入されたルートコンポーネント App.vue です

プラグインは後から導入することもできますが、もちろん、プラグインを最初にインストールする必要があります。

import Vue from 'vue'    /*引入vue框架*/
import ElementUI from 'element-ui'     /*引入element-ui样式*/
import App from './App'     /*引入根组件*/
import router from './router'    /*引入路由设置*/

Vue.config.productionTip = false    /*关闭生产模式下给出的提示*/

 /*定义一个新实例*/
new Vue({
    
    
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {
    
     App }     /*此处为引入的根组件的App.vue*/
})

router.js - ルーティング設定

ルーターフォルダーの下には、ルーティング構成ファイルであるindex.jsファイルがあります。

import Vue from 'vue'    /*引入vue框架*/
import Router from 'vue-router'   /*引入路由依赖*/
import Hello from ‘@、components/Hello’    /*引入页面组件，命名为Hello*/

Vue.use(Router)   /*使用路由依赖*/

   /*定义路由*/
export default new Router({
    
    
  router:[
   {
    
    
       path: '/ ',
       name: 'Hello',
       component: Hello
    }
 ]
})

ここではパス「/」を持つルートが定義されており、そのルートに対応するページが Hello コンポーネントなので、ブラウザの URL で http://localhost:8080/#/ にアクセスすると、Hello コンポーネントが表示されます。同様に、「/index」、「/list」などの複数のルートを設定するには、もちろんコンポーネントを最初に導入し、次にコンポーネントのルートを設定する必要があります。

VUEプロジェクト実行処理：index.html、main.js、App.vue、index.jsの呼び出し関係

1. 概要

1.index.htmlでidがappであるdivタグをどのように説明・表現すればよいでしょうか？

2. Vueにおけるmain.js、App.vue、index.htmlの関係をまとめる

要約する

Index.html - ホームページ、プロジェクトエントリ

App.vue — ルートコンポーネント

main.js - エントリファイル

router.js - ルーティング設定

おすすめ

VUEプロジェクト実行処理：index.html、main.js、App.vue、index.jsの呼び出し関係

1. 概要

1.index.htmlでidがappであるdivタグをどのように説明・表現すればよいでしょうか？

2. Vueにおけるmain.js、App.vue、index.htmlの関係をまとめる

要約する

Index.html - ホーム ページ、プロジェクト エントリ

App.vue — ルートコンポーネント

main.js - エントリファイル

router.js - ルーティング設定

おすすめ

Index.html - ホームページ、プロジェクトエントリ