vue.js をインストールする 3 つの方法についての簡単な説明

vue.js をインストールするにはどうすればよいですか?次の記事では、vue.js をインストールする 3 つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Vue.js (/vjuː/ と発音、ビューに似ています) は、データ駆動型の Web インターフェイスを構築するための進歩的なフレームワークです。 Vue.js の目標は、可能な限りシンプルな API を使用して、応答性の高いデータ バインディングと合成ビュー コンポーネントを有効にすることです。簡単に始められるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。

以下では、Vue.js の 3 つのインストール方法を紹介します。

1. 独立したバージョン

# にインストールできます。 Vue. js 公式 Web サイトから vue.js を直接ダウンロードし、<script> タグを介して .html 内で参照します。 -> <script src = ../vue.js> </script> 開発環境では最小限に圧縮されたバージョンを使用しないでください。そうしないと、エラー プロンプトや警告が表示されなくなります。 (ページ内で直接使用)

マルチページ開発に vue を使用する:

1. vue.js を導入する
2. vue ルート インスタンスを作成する new Vue({option })

2. CDN メソッドを使用します

• BootCDN (国内): https://cdn.bootcss.com/vue/2.2。 2/vue .min.js、(国内の不安定性)
• unpkg: https://unpkg.com/vue/dist/vue.js は、npm によってリリースされた最新バージョンとの一貫性を保ちます。 (推奨)
• cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js (

# 3.NPM 方式 (推奨)

Vue.js で大規模なアプリケーションを構築する場合は、Webpack や Browserify などのモジュール パッケージャーと組み合わせて使用​​できる NPM インストール方法を使用することをお勧めします。 Vue.js は、単一ファイル コンポーネントを開発するためのサポート ツールも提供します。

まず、次に必要なものを列挙します。

node.js 環境 (npm パッケージ マネージャー)

• vue-cli スキャフォールディング構築ツール
• CNPM NPM の淘宝ミラー
• 1) node.js をインストールします

インストールが完了したら、コマンド ライン ツール (win R) を開いてノードのバージョンを確認できます。 ) を入力し、

node -v コマンドを入力します。対応するバージョン番号が表示されれば、インストールは成功したことを意味します。

。

## ここまでで、NODE の環境がインストールされ、NPM パッケージ マネージャーにもインストールされました。一部の NPM リソースがブロックされている、または外部リソースがあるため、多くの場合、NPM が発生します。依存パッケージのインストールに失敗しました。そのため、npm----cnpm.

の国内イメージも必要です。 2) cnpm

をインストールします。 npm install -g cnpm -- と入力します。コマンド ラインで registry =http://registry.npm.taabao.org と入力し、待機します。エラーが報告されない場合は、インストールが成功したことを意味します (私のバージョンはインストールされており、更新成功メッセージが表示されます)。以下に示す:

完了後、npm の代わりに cnpm を使用して依存関係パッケージをインストールできます。 cnpm について詳しく知りたい場合は、淘宝網 npm ミラー公式ウェブサイトをご覧ください。

3) vue-cli スキャフォールディング構築ツールをインストールします (グローバルにインストールする必要があります)

コマンド ラインでコマンド npm install -g vue-cli を実行し、その後、インストールが完了するまで待ちます。

インストールは成功しましたか: vue -V

上記の 3 つのステップを経て、準備する必要のある環境とツールが準備できたので、vue-cli を使用してプロジェクトをビルドしていきます。

まず、プロジェクトを保存する場所を選択する必要があります。次に、コマンド ラインを使用してプロジェクト ディレクトリに移動します。ここでは、新しいディレクトリ (NodeTest ディレクトリ) を作成することを選択します。 c ドライブの下で、次に示すように cd を使用してディレクトリをこのディレクトリにカットします:

NodeTest ディレクトリで、コマンド vue init webpack firstApp を実行します。行 (フルバージョンのプロジェクトを初期化します) 。このコマンドの説明: このコマンドは、webpack がビルド ツールであるプロジェクトを初期化することを意味します。つまり、プロジェクト全体が webpack に基づいています。ここで、 firstApp はプロジェクト フォルダー全体の名前です。このフォルダーは、以下に示すように、指定したディレクトリに自動的に生成されます (この例では、フォルダーは NodeTest ディレクトリに生成されます)。このプロジェクトが保存されているフォルダーはエディターで手動で作成されており、プロジェクトに cd します: vue init webpack; 初期化するだけで、webpack が依存するパッケージもロードします:

ですこのフォルダー内にありますか? ディレクトリに作成します

コマンドを入力した後、いくつかの簡単なオプションを尋ねられるので、必要に応じて入力するだけです。

プロジェクト名: プロジェクト名。変更する必要がない場合は、Enter キーを押してください。注: ここでは大文字は使用できないため、名前を vueclitest

• に変更しました。プロジェクトの説明: プロジェクトの説明。デフォルトは Vue.js プロジェクトです。Enter キーを押すだけで、書く必要はありません。
• Author: 著者、git author を設定している場合は、著者がそれを読みます。
• vue-router をインストールしますか? vue のルーティング プラグインをインストールしますか? ここでインストールする必要があるので、Yを選択してください
• Use ESLint to lint your code? 使用しますか? ESLint でコードのエラーとスタイルを制限するには?ここでは n を入力する必要はありません (推奨)。大規模なチームで開発している場合は、これを設定することをお勧めします。
• Karma Mocha を使用して単体テストをセットアップしますか? 単体テスト ツール Karma Mocha をインストールする必要がありますか? ここでは必要ないので、「n」と入力します。
• Nightwatch で e2e テストをセットアップしますか? ユーザー動作シミュレーション テストのために e2e をインストールしますか? ここでは必要ないので、n
• と入力します。初期化コマンドを実行するときは、ユーザーは、プロジェクト名、プロジェクトの説明、作成者情報など、いくつかの基本構成オプションを入力するよう求められます。理解できない情報や入力したくない情報については、Enter キーを押して入力することができます。しばらくすると、以下に示すように、プロジェクトが正常に作成されます。

次に、NoteTest ディレクトリに移動して、ファイルが作成されたかどうかを確認します。

## firstApp プロジェクトを開き、プロジェクト内にあります。ディレクトリは次のとおりです。

ディレクトリとその機能を紹介しましょう。 :

ビルド: 最終的にリリースされたコードの保存場所。

config: パス、ポート番号、その他の情報を設定します。最初に学習を開始したときは、デフォルトの構成を選択しました。

node_modules: npm によってロードされるプロジェクトに必要なさまざまな依存モジュール。

src: これは開発のメイン ディレクトリ (ソース コード) です。基本的に行う必要があることはすべてこのディレクトリ内にあり、このディレクトリにはいくつかのディレクトリとファイルが含まれています:

資産: 画像を配置します

コンポーネント: ディレクトリにはコンポーネント ファイルが 1 つずつ含まれています

router/index.js: ルーティングを設定する場所

App.vue: プロジェクトエントリ コンポーネント (コンポーネント付き) の場合は、コンポーネント ディレクトリを使用する代わりに、ここにコンポーネントを記述することもできます。主な機能は、独自に定義したコンポーネントをページに接続してレンダリングすることです。 は必須です。

Main.js: プロジェクトのコア ファイル (プロジェクト全体のエントリ js) には、依存関係パッケージ、デフォルトのページ スタイルなどが導入されます (app.js ファイルは、プロジェクトが実行されます)。

static: 画像、フォントなどの静的リソース ディレクトリ。

test: 初期テスト ディレクトリ。削除可能

.XXXX ファイル: 設定ファイル。

Index.html: 単一の HTML ページのエントリ ページ。メタ情報、統計コード、ページ リセット スタイルなどを追加できます。

Package.json: プロジェクト構成情報ファイル/依存する開発パッケージのバージョン情報と依存するプラグイン情報。

README.md: プロジェクト説明ファイル。

Webpack.config.js: Webpack の構成ファイル。.vue ファイルをブラウザーが読み取れるファイルにパッケージ化します。

.babelrc: es6 構文を検出するファイルの構成です。

.getignore: ファイルの構成を無視します (ローカル データのモックをシミュレートするなど)。 get で送信/パッケージ化できるようにします。オンラインになるときは無視してください。使用しない場合は、ここで設定できます)

.postcssrc.js: プレフィックス設定

.eslintrc .js: eslint 構文ルールを設定します (rules 属性で設定します) どの文法ルールが無効ですか)

.eslintignore: プロジェクト内の特定のファイルの文法ルールの eslint チェックを無視します

# これはプロジェクト全体のディレクトリ構造ですが、このうち主に src ディレクトリを変更します (モジュール開発)。このプロジェクトはまだ単なる構造フレームワークであり、プロジェクト全体に必要なすべての依存リソースがまだインストールされていません。

cd プロジェクト名; プロジェクトを入力

プロジェクトに必要な依存関係パッケージ/プラグインをインストールします (package.json で表示可能):

cnpm install (npm) を実行します。警告があります。ここでは npm の代わりに cnpm を使用できます。他の人のコードを実行するには、最初に依存関係をインストールする必要があります)プロジェクトの作成時にエラーが報告されない場合は、この手順を省略できます。エラーが報告された場合は、プロジェクトに cd して cnpm install / npm install を実行します

#他の人のプロジェクトや gethub からダウンロードしたプロジェクトを入手した場合、最初のステップは cnpm install です。プロジェクトに依存するプラグインをプロジェクトにダウンロードし、npm run dev でプロジェクトを実行します。

インストールが完了したら、独自のプロジェクトを参照して、追加の node_modules フォルダーがあることを確認します。必要な依存関係パッケージのリソースは次のとおりです。

依存パッケージのリソースをインストールした後、プロジェクト全体を実行できます。

プロジェクトを実行します

プロジェクト ディレクトリで、コマンド npm run dev (npm run start) を実行します。 「ホット ロードでアプリケーションを実行する」を使用します。ホット ロードを使用すると、コードを変更した後にブラウザを手動で更新しなくても、変更された効果をリアルタイムで確認できます。

プロジェクトが開始された後、ブラウザにプロジェクト開始後のアドレスを入力します:

これは、プロジェクトが開始された後のアドレスをブラウザに入力します。 vue のロゴが表示されます:

この時点で、vue の 3 つのインストール方法が紹介されました。

プロジェクトが完了したら、パッケージ化コマンドを入力します: cnpm run build; パッケージ化ファイルである dist ファイルが生成されます。.html ファイルをクリックして実行すると、それは成功するでしょう。

1. vue の開発環境構築(概要)

node.js のインストールが必要
1. vue の開発環境構築、vue のスキャフォールディングツールのインストール公式コマンド ライン ツール

npm install - -global vue-cli

3. プロジェクトを作成します。対応するプロジェクト

#vue init webpack vue- に cd する必要があります。 demo01

cd vue-demo01

cnpm install / npm install プロジェクトの作成時にエラーが報告されない場合、この手順は省略できます。エラーが報告された場合は、プロジェクトに cd して cnpm install / npm install

npm run dev/npm run start

を実行します。

4. 小規模および中規模のプロジェクト向けにプロジェクトを作成する別の方法 (推奨) ***

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install

npm run dev

他の人のプロジェクトを取得して正常に実行できない場合は、 node_modules ファイル (すべてのプロジェクトの依存関係) (プロジェクトの依存関係をインストールするための CD がない場合): cnpm install/npm install

2. アップグレード: vue-cli3.0

1. vue-cli3.0

1. Vue CLI のパッケージ名が vue-cli から @vue/cli
2. に変更されました。 vue-cli の古いバージョン (グローバルに 3.0) がインストールされている場合は、まず npm uninstall vue-cli -g/yarn global delete vue-cli を使用してアンインストールする必要があります。
3. Node.js8.9
4. vue3.0 をインストールします npm install -g @vue/cli またはyarn global add @vue/cli
5. バージョン 3.x vue です--version/vue -V

• vue-cli によるプロジェクトの作成

1. プロジェクト コマンドの作成

vueプロジェクト名を作成します。プロジェクト名を大文字で -

で区切ることはお勧めしません。この時点では、プロジェクトを作成するために事前にインストールする必要があるプラグインに注意する必要があります。プロジェクト:

デフォルトは Babel ESLint ですが、推奨されません。デフォルトでは、次が選択されています:

##? プロジェクトに必要な機能を確認してください: ( を押して選択し、 を押してすべてを切り替え、 を押して選択を反転します)

>( ) Babel //トランスコーダーは次のことができます。 ES6 コードを ES5 コードに変換して、既存の環境で実行できるようにします。
( ) TypeScript// TypeScript は、JavaScript (接尾辞 .js) のスーパーセット (接尾辞 .ts) であり、JavaScript の構文を含めて拡張しています。ブラウザで実行するには、JavaScript としてコンパイルして出力する必要があります。現在、使用している人はほとんどいません。
( ) プログレッシブ Web アプリ (PWA) サポート// プログレッシブ Web アプリケーション
( ) Router // vue-router (vue ルーティング)
( ) Vuex // vuex (vue の状態管理) mode)
( ) CSS プリプロセッサ // CSS プリプロセッサ (less、sass など)
( ) Linter / Formatter // コード スタイルのチェックとフォーマット (ESlint など)
( ) Unitテスト中 // 単体テスト (単体テスト)
( ) E2E テスト中 // e2e (エンドツーエンド) テスト中

プロジェクトの初期化が完了するのを待っています完成しました。 。 。 。 。 。

1.cd でプロジェクトに移動します

2.npm runserve プロジェクトを実行します

または、グラフィカル インターフェイスを使用してプロジェクトを作成します:

vue ui

vue.js のインストール方法をたくさん読んだので、まとめてみましょう。何か質問があれば、アドバイスをお願いします！それが役に立てば幸い！

プログラミング関連の知識について詳しくは、

プログラミング教育をご覧ください。 ！

以上がvue.js をインストールする 3 つの方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。