序文
この章の内容は、VUE の作業プロセスと関連する使用法についての説明です。
前の記事のアドレス:
Vue 3: Web フロントエンド テクノロジを使ってみる (2) - Lion King のブログ - CSDN ブログ
次の記事のアドレス:
Vue 3: Web フロントエンド テクノロジを使ってみる (4) - Lion King のブログ - CSDN ブログ
1.VUEの動作プロセス
1. プロジェクトカタログから作業工程を見る
構成したプロジェクト ディレクトリが次のようになっているとします。
├── /build/ # 构建脚本目录
├── /config/ # 配置文件目录
├── /node_modules/ # 项目依赖的第三方模块目录
├── /src/ # 源代码目录
│ ├── /assets/ # 静态资源目录
│ ├── /components/ # Vue组件目录
│ ├── /router/ # 路由配置目录
│ ├── /store/ # Vuex状态管理目录
│ ├── /views/ # 视图目录
│ ├── App.vue # 应用根组件
│ └── main.js # 应用入口文件
├── .babelrc # Babel配置文件
├── .editorconfig # 编辑器配置
├── .eslintrc.js # ESLint配置文件
├── .postcssrc.js # PostCSS配置文件
├── index.html # 页面模板文件
├── package.json # 项目配置文件
└── README.md # 项目说明文件
その場合、VUE の作業プロセスは次のようになります。
(1)src/main.jsファイル内で、Vue アプリケーションのエントリ ポイントを見つけることができます。このファイルは Vue インスタンスを初期化し、App.vueルート Vue コンポーネントを DOM 要素にマウントします。
(2)src/App.vueこのファイルには、Vue アプリケーションのルート コンポーネントが定義されています。他のサブコンポーネントや Vuex 状態管理も含めることができます。
(3)src/components/ディレクトリの下には、Vue アプリケーションのさまざまなコンポーネントがあります。これらのコンポーネントは独自の状態と動作を持つことができ、入力を受け入れて出力を発行できます。
(4)src/router/ディレクトリの下に、Vue アプリケーションのルーティング設定が見つかります。これらの構成は、ルーティング パスと対応するコンポーネントを定義します。
(5)src/store/ディレクトリの下に、Vuex の状態管理モジュールがあります。Vuex は Vue.js の公式状態管理ライブラリであり、アプリケーションの状態を一元管理するために使用されます。
2.Webページから作業工程を確認する
プロジェクト ディレクトリのいくつかの部分から、Vue の実際の動作は次のように結論付けることができます。
(1) ユーザーがページにアクセスすると、ページindex.htmlがブラウザに読み込まれます。
（2）index.htmlsrc/main.jsこのファイルは、 Vue アプリケーションを初期化するために導入されます。
(3) でsrc/main.js、new Vue()Vue インスタンスを作成し、ルート コンポーネントをロードしますApp.vue。
(4) にはApp.vue、独自のデータと動作を持つサブコンポーネントを含めることができます。
(5) ルーティング設定ファイルには異なるパスに対応するコンポーネントが定義されており、ユーザが異なるパスにアクセスすると、ルーティング設定に従って対応するコンポーネントが読み込まれます。
(6) Vuex を使用してコンポーネント内の状態を管理でき、this.$store呼び出すことで状態にアクセスして変更できます。
3. コードから作業プロセスを確認する
（1）、main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')このコードは、Vue.js を使用してアプリケーションを作成およびマウントするための基本的なテンプレートです。
まず、Vue ライブラリから createApp 関数をインポートします。createApp は、Vue インスタンスを作成するためのファクトリー関数です。
次に、「./App.vue」ファイルから App コンポーネントをインポートします。これはアプリケーションのルート コンポーネントであり、アプリケーションの全体的な構造とロジックが含まれています。
次に、createApp 関数を呼び出し、App コンポーネントをパラメーターとして渡します。このようにして、createApp 関数はアプリケーションの操作と制御に使用できる Vue インスタンスを返します。
最後に、mount メソッドを使用して Vue インスタンスを HTML 要素にマウントします。ここでは、ID「app」を持つ DOM 要素に Vue インスタンスをマウントします。これは、アプリケーションがレンダリングされ、「id=app」を使用して HTML 要素に挿入されることを意味します。
（2）、App.vue
このファイルは、html、css、js ファイルを組み合わせてページをレンダリングし、マウント ポイント #app に表示できます。これはデフォルトでページのエントリ ファイルであるため、最初に表示されるページは彼です。
(3)、その他
App.vue会根据网页的请求，搜索相关资源以呈现，这就涉及自定义的业务逻辑了。
2. 関連利用に関する議論
1. 消えたマウントポイント#app
main.js にはマウントポイント #app がありますが、この #app はどこにあるのでしょうか? 彼はここにいます：
2. createApp 関数が「vue」コンポーネントに存在することを確認するにはどうすればよいですか?
「vue」ビューに入ると、それがまったく表示されないことがわかるため、公式ドキュメントを参照することをお勧めします。
3. vue 2 と vue 3 のどちらを使用していますか?
これは、次のインターフェイスで表示できます。
4. 他の vue ファイルを使用して、App.vue ファイルをエントリ ファイルとして置き換えることはできますか?
はい、ただし必須ではありません。NewApp.vue をエントリ ファイルとして設定するなど、main.js で直接定義する方法です。
import Vue from 'vue'
import NewApp from './NewApp.vue'
new Vue({
render: h => h(NewApp),
}).$mount('#app')