vue-cli基本知識ポイント1

1.フロントエンドとバックエンド;フロントエンドとバックエンドの概念。

• フロントデスク：基本要素としてhtml、css、jsで記述されたページ関数。
• バックエンド：flask、Djangoなどを介して提供されるWebサービスです。
• フロントエンドとバックエンド：これらはすべてフロントエンド部分に属し、フロントエンドは主にページの美化とレイアウトを指します。バックエンドは主に、ページへのリダイレクトや変数共有などの機能を提供するサービスを指します。
  vue-cliスキャフォールディングはフロントエンドフレームワークです。vueの学習には必ずしもノードの知識は必要ありませんが、ノードのいくつかの命令が必要です。主にノードのnpm命令を使用します。
  Node.jsはバックエンドであり、ページにサービスを提供するため、ページを効果的かつ効率的にリダイレクトできます。

2つ目は、docコマンドを理解する必要がある

ディスクオペレーティングシステム）は、広く使用されているディスクオペレーティングシステムです。主にマイクロソフトによって開発されました。
その中で、git CMDはWindowsシステムの自動CMDと同じ端末を持っており、gitCMDはマウスをスクロールすることでフォントをズームインおよびズームアウトできます。

• cd myfilesなどのフォルダを開くにはcd /別のディスクに入るときは、最初d:に対応するディスク文字を入力します。
• mdは、mdmyfilesなどの新しいフォルダを作成します
• dir linux lsと同様に、フォルダーの内容を表示します
• cd…上位フォルダに戻る
• clsは現在の画面をクリアします
• type：linux catと同様に、対応するファイルの内容を出力します。

3つ目は、npmとcnpmの違い、vue-cli2のインストールとアンインストールです。

npm（ノードパッケージマネージャー）は、ノードプラグイン管理用のnodejsパッケージマネージャーです：インストール、アンインストール、依存関係の管理を含みます。
cnpm：npmインストールプラグインは外部サーバーからダウンロードされ、cnpmはTaobaoチームが共有するミラーURLからダウンロードされるためです。一般的に使用されます。インストール手順は次のとおりです。

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm -root -g ：グローバルインストールのフォルダーの場所を表示します。

vue-cli2のインストール：

• 最初のものはcnpmを直接使用します

cnpm install -g vue-cli 

インストールが失敗し、現時点で解決できない場合は、次の方法を使用して、外部サーバーから直接ダウンロードしてインストールしてみてください。

• npmを使用する

npm install -g vue-cli

インストール時間は約1〜2分です。
アンインストール手順は次のとおりです。
グローバルインストールであるため、アンインストール時にグローバルアンインストールも使用する必要があります。-gを使用してください。次に、nodejsにインストールされているパッケージをアンインストールします。

npm uni -g vue-cli

npmを使用してインストールする場合は、アンインストールにもnpmを使用する必要があります。cnpmの場合は、アンインストール時にcnpmも使用する必要があります。

• npmを使用しますが、リモートミラーリポジトリを知っています。
  このコマンドを使用して正常にインストールしました。cnpmを使用するとエラーが発生し、海外に直接インストールされたvueを使用すると機能しません
  。vueinitwebpackを実行するとエラーが発生します。

npm install -gd vue-cli --registry==http://registry.npm.taobao.org

• npmのウェアハウスアドレスを指定されたアドレスに設定すると、アドレスを指定しなくても、将来npmを直接使用できます。

npm config set registry http://registry.npm.taobao.org

vue-cliをインストールした後、次のコマンドでvueバージョン-大文字Vを確認できます。

vue -V

その中で、-gはnodejsのグローバルインストールディレクトリC：\ Users \ yang \ AppData \ Roaming \ npm \ node_modulesにパッケージをインストールし、-gの
ないものは現在の[node_modules]ディレクトリにインストールされます。プロジェクトディレクトリ。

4つの-S-Dパラメーター：

-S --saveインストールパッケージ情報が依存関係に追加されます-本番フェーズの依存関係npm i -g --save vue-cli
-Dは、-save-devの組み合わせを表します。インストールパッケージ情報はdevDependenciesに追加されます—開発フェーズの依存関係
。iはinstallの略語であり、その前に「-」はありません。たとえば、npm i -g vue-cli

5、CLIプロジェクト構成を作成します

vue-cliプロジェクトを作成するときは、テンプレートを使用できます。テンプレートの中で最も頻繁に使用されるのはwebpackです。ここでは、プロジェクトを作成するためのテンプレートとして使用します

• プロジェクトを初期化
  cdします。手順は次のとおりです。独自のプロジェクトディレクトリに移動します

vue init webpack projectName

その中で、プロジェクトを作成するためにユーザーの参加が必要な構成、主に次の2つ、その他はデフォルトを使用でき、Enterキーを押すだけです。
vue-routerをインストールしますか？（Y / n）vue-routerをインストールするかどうか、これは公式ルートです。ほとんどの場合、「y」と入力してEnterキーを押すだけで使用されます。
ESLintを使用してコードをリントしますか？y / n ESLintを使用してコードを管理するかどうかは、一般的なコードスタイルを使用してコードを管理することです。初期化中にESlintでyを選択しない場合は、後で手順を使用してこれを追加できます。

• 初期化が成功したら、次のコマンドを入力します。

cd projectName
npm run dev 

その中にnpm run devは、サービスを開始することも含まれますが、これは「はい」と言えます后端。
その際、localhost：8080のURLが表示されます。ブラウザでログインすると、Vueの情報表示ページが表示されます。それはすべての成功を意味します。

6、Vueインターフェースの書き込み

そのうちの1つは大文字と小文字を区別せず、後者はインポート時間ファイルを参照し、後者は-Fistに変更することもできます。
次に、ctrl + sの後、3ページが自動的に変更をキャプチャし、ページ表示を変更します。

7つのvue構文の強調表示、スマートプロンプト

これは主に崇高な構文の強調表示用であり、サードパーティのプラグインです。アドレスは次のとおりです：https：
//github.com/vuejs/vue-syntax-highlight

• ハイライトの構成方法：
  ダウンロードして解凍した後、パッケージパスを崇高に構成し、次のようにクリックします。
  
• 開いたファイルダイアログボックスのディレクトリに新しいvueフォルダ[ ]を作成し、ダウンロードして解凍した後、フォルダの内容を新しく作成した[ vue]ディレクトリにコピーします。
• 次に、Tools->Command PaletteまたはCtrl+shift+Pパッケージ検索ボックスを開くにはvue、と入力し、最後に[ Set Syntax Vue Compoment]を選択して構成を完了します。

8.ページ書き込み、サブルートマウント、およびURLの#conformityの一般的なタグ

• <router-link to="/first"></router-link>内部のテキスト、ジャンプのルーティングアドレスをrouter定義し、ルーティングアドレスをフォルダの下に定義し、各ルーティングアドレスを1つにバインドしcomponentます。
• 次のように子供のサブ経路は、その親ページ情報も、父との共通のコンテンツを持っているサブページとメインページと一緒に表示されます：
  
  其中子路由挂载：
  ということroutesが追加されたchildrenページファイル内の親ファイルの後に接尾辞VUEあなたをページの後ろにルートマウントラベルを追加する必要があります。そうしないと、次のようにサブルートが機能しません。

<router-view></router-view/>

• URLの＃の役割を削除できますか？
  URLのアクセスモード：
  hash模式：アドレスバーには＃記号が含まれており、記号の後の記号はバックグラウンドで取得されません。つまり、アドレスバーのアドレスが変更されない場合、ブラウザはバックグラウンドサービスを要求しないため、要求の数を減らすことができます。＃番号を基準に変更するかどうかは、右側のアドレスをどのように変更しても、左側のアドレスが同じであればリロードされません。例えば：

http://localhost:8080/#/a1

不十分：しかし、URLの＃は特別な一致であり、通常はURLにはありません。通常使用されるURLは履歴モードであるため、バックグラウンドへのアクセス数を減らすこともできます。
history模式：URL履歴を修正する機能があります。また、バックグラウンドへのリクエストの数を減らすこともできます。
不十分：ページが更新されたときに、ページが存在しない場合、404エラーが報告されます。ハッシュはしません。
注：WeChatの支払いと共有URLがパラメーターとして渡されると、＃は需要を満たすことができません。歴史は404の問題に対処するためにバックエンドの協力を必要とします。
ルーターにパラメーターを追加し、URLモードを履歴に変更します。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from "@/components/fist"

Vue.use(Router)

export default new Router({
    
    
  mode:'history',
  routes: [
    {
    
    
      path: '/',
      name: 'First',
      component: First
    }
  ]
})

現時点では、ブラウザに入力されたURLに記号なしでアクセスできます。http://localhost:8080/

9、eslintを個別にインストールし、他のパッケージ方法も同様です

開発環境と本番環境のパッケージインストールパッケージを確認します。ファイルの場所は、プロジェクトディレクトリの下package.jsonです。
フィールドdependenciesは実稼働環境のパッケージに対応し、
フィールドdevDependenciesは開発環境のパッケージに対応します。
eslintのコード仕様パッケージなど、一部のパッケージは開発中または本番環境でのみ使用されるため、将来の開発に慣れると、開発環境にインストールされているパッケージと本番環境にインストールされているパッケージがわかります。開発環境にインストールされましたそれだけです。開発されている場合は、コード仕様チェックを変更する必要はありません。

インストールは開発環境でのみ行われます。

npm i eslint --save--dev

–saveが追加されていない場合、本番環境にのみインストールされ、開発環境にはインストールされません。-saveしかない場合は、実稼働環境にのみインストールされます。

実稼働環境をアンインストールするルーターは次のとおりです。

npm uni vue-router --save

10. vue-cliプロジェクトをインポートする方法：

vue-cliバージョンには下位互換性があります。つまり、バージョン3のプロジェクトを2のプロジェクトにインポートできます。

プロジェクトを指定されたディレクトリにコピーする場合は、最初に次のコマンドを使用して、プロジェクトを実行できるかどうかを確認できます。

npm run dev

実行に失敗した場合は、npm環境のpackage.jsonに実際にいくつかのパッケージがあることを意味します。この時点で、通常のディレクトリで次のコマンドを実行して、対応するパッケージをインストールできます。

npm install

11.テンプレートを使用せず、vuecliランタイム環境を手動で構築する場合：

テンプレートを使用して実際のシーン環境を構築することをお勧めします。これにより、手動の作業負荷を軽減でき、多くの環境パッケージを見逃しがちです。

五、创建cli工程配置
テンプレートの使用方法を参照できます。テンプレートを使用しない方法は次のとおりです。

• 新しいファイルディレクトリを作成します
• インストールの依存関係：npm install
• 初期化-fは、すべてのオプションがデフォルトであることを意味します：npm init -f
• コンポーネントをインストールします。Dは–save-devを表します。例：npm i -g vue-router -Dこれ
  までのところ、開発環境全体がセットアップされています。

その中で、-gはnodejsのグローバルインストールディレクトリC：\ Users \ yang \ AppData \ Roaming \ npm \ node_modulesにパッケージをインストールし、-gの
ないものは現在の[node_modules]ディレクトリにインストールされます。プロジェクトディレクトリ。

12、vue-cli3をインストールし、プロジェクトを作成します。

• インストール
  ダウンロードアドレスミラーを追加できます。実際、イメージインターフェイスとインストールパッケージの構成手順を使用するのが最善ですが、UIのさまざまな操作が比較的遅いため、メインストリームが最適です。

npm install -g @vue/cli

最新バージョンがインストールされます。バージョン3をインストールする場合は、次のコマンドを使用します。

npm install -g @vue/[email protected]

以下はコマンドラインから作成されたもので、UIはこのチュートリアルには含まれていません。

• プロジェクトを作成します。createの
  後にプロジェクト名が続き、ルーターを選択する必要があります。

vue create vue-test3 

次のように、手動で選択したいくつかのオプションを実行します。

• スタートアッププロジェクト：

npm run serve

• プロジェクトのインポート
  cli3環境を使用して2プロジェクトを実行する場合、プロジェクトを開始するときに
  2コマンドを使用する必要があり、3コマンドはエラーを報告します。それは次のとおりです。

npm run dev

13.スタイルを追加する3つの方法：

スタイルを追加する最良の方法は、パブリックのindex.xmlファイルにスタイルファイルを導入することです。
次善の方法は、排他的スタイルを対応するvueファイルに直接渡すことができることです。

• 対応するvueファイルにスタイルを追加します。

<template>
	<div>
		<router-link to='/' id='hao'>转向A页面</router-link>
	</div>

</template>
<style type="text/css">
	#hao{
     
     
		color: red;
	}
</style>>

• スタイルをcssファイルに入れ、-first.cssという名前を付けて、パブリックディレクトリに配置します。vueファイルに参照を追加します。
  内部に配置されたコードは次のとおりです。

#hao{
    
    
	color: blue;
	}

次に、vueファイルのスタイルで追加およびインポートします。

<template>
	<div>
		<router-link to='/' id='hao'>转向A页面</router-link>
	</div>

</template>
<style type="text/css">
	@import "../../public/First.css"
</style>

• スタイルをcssファイルに入れ、-first.cssという名前を付けて、パブリックディレクトリに配置します。index.htmlファイルにアプリケーションを追加すると、その追加はグローバルになります。
  htmlファイルに追加されたインポートコードは次のとおりです。

    <link rel="stylesheet" type="text/css" href="First.css">