1.Vueの紹介

1.MVVMのアイデア

M：モデル、データを含むモデル、およびいくつかの基本操作
V：ビュー、ビュー、ページレンダリング結果
VM：ビュー-モデル、モデルとビュー間の双方向操作（開発者の介入なし）
MVVMの前は、開発者はバックエンドから開始しました必要なデータモデルを取得し、それをDOM操作モデルを介してビューにレンダリングします。次に、ユーザーがビューを操作するときに、DOMを介してビュー内のデータを取得し、それをモデルに同期する必要もあります。
MVVMのVMが行う必要があるのは、DOM操作を完全にカプセル化することであり、開発者はModelとVIewが互いにどのように影響するかを気にする必要がなくなります。

2.Vueのインストール方法

①CDN方式

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

②NPM方式

npm install vue

3.vueを使用する簡単な手順

①vueインスタンスを作成し、ページテンプレートを関連付け、独自のデータ（データ）を関連付けられたテンプレートにレンダリングします。
レスポンシブ②手順
により、domでの一部の操作が簡素化されます③メソッドを宣言して、より複雑な操作を実行します。メソッドはメソッドにカプセル化できます。

4.Vueモジュラー開発

①webpackを
npm install webpack -g
グローバルにインストールする②vuescaffoldをグローバルにインストールする③vue
npm install -g @vue/cli-init
プロジェクトを初期化する
vue init webpack appname：vuescaffoldはwebpackテンプレートを使用してappnameプロジェクトを初期化します④vueプロジェクトを
開始しますプロジェクト
のpackage.jsonには、実行できるコマンドを表すスクリプトがあります
npm start = npm run dev：
startProject⑤保存ステップ④、VsCodeでファイルを開き、
ここに画像の説明を挿入します
ファイル構造：
build：パッケージツールwebpackに関連するコード;
config：ポート構成などの構成情報
node_modules：現在の依存関係npm installによってインストールされたものなどのプロジェクトのインストールここに配置します
src：コードが記述
されているフォルダーstatic：静的リソースファイル、イメージフォントファイルなど
index.html：ホームページコンテンツ
package-lock.jsonおよびpackage.json ：npm依存パッケージに関する情報

5.プロジェクト運営の原則

まず、プロジェクトのindex.htmlファイルがプロジェクトのメインエントリページです。

メインプログラムであるsrcディレクトリにmain.jsファイルがあります。Vueインスタンスを作成し、index.htmlページをマウントします#app。App.vue成分が使用されます。

そして、ルーティングルールが定義されてい/ます。パスにアクセスするときにHelloWorldコンポーネントを表示します。
ここに画像の説明を挿入します

二、整合ElementUI

Element、開発者、デザイナー、製品マネージャー向けのVue2.0ベースのデスクトップコンポーネントライブラリのセット。

1.インストール

1️⃣npmのインストール

npmを使用してインストールすることをお勧めします。これは、webpackパッケージツールでより適切に機能します。

npm i element-ui -S

2️⃣CDNのインストール

現在、unpkg.com / element-uiから最新バージョンのリソースを入手でき、ページにjsファイルとcssファイルを導入することでリソースの使用を開始できます。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3️⃣ 导入ElementUI

メインプログラムmain.jsファイルに書き込む

import ElementUI from 'element-ui';  //导入ElementUI
import 'element-ui/lib/theme-chalk/index.css';  //导入样式

Vue.use(ElementUI);  //使用ElementUI

2.vueコンポーネントをインポートします

①コンポーネントのインポート：「コンポーネントアドレス」からcomponentNameをインポート
②インポートされたコンポーネントをコンポーネントに記述します

components: {
    
    comp:componentName}

③テンプレートでコンポーネントを使用する

<comp></comp>

Vue_studyノート