ホームページ >ウェブフロントエンド >Vue.js >vue.js の 3 つのインストール方法の詳細については、こちらをご覧ください。
vue.js の 3 つのインストール方法の詳細については、こちらをご覧ください。
- 青灯夜游転載
- 2021-06-03 11:21:142878ブラウズ
この記事では、Vue.js の 3 つのインストール方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
Vue.js (/vjuː/ と発音、ビューに似ています) は、データ駆動型の Web インターフェイスを構築するための進歩的なフレームワークです。 Vue.js の目標は、可能な限りシンプルな API を使用して、応答性の高いデータ バインディングと合成ビュー コンポーネントを有効にすることです。簡単に始められるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。 [関連する推奨事項: 「vue.js チュートリアル 」]
以下では、Vue.js の 3 つのインストール方法を紹介します:
1. 独立バージョン
## Vue.js の公式 Web サイトから vue.js を直接ダウンロードし、<script> タグを介して .html で参照できます。 -> <script src = ../vue.js> </script> 開発環境では最小限に圧縮されたバージョンを使用しないでください。そうしないと、エラー プロンプトや警告が表示されなくなります。 (ページ内で直接使用)
vue マルチページ開発を使用する:- vue.js を導入する
- vue root 例 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 で大規模なアプリケーションを構築する場合は、NPM インストール方法を使用することをお勧めします。NPM は、Webpack や Browserify などのモジュール パッケージャーとうまく併用できます。 Vue.js は、単一ファイル コンポーネントを開発するためのサポート ツールも提供します。
まず、次に必要なものを列挙します。
node.js 環境 (npm パッケージ マネージャー)- vue-cli スキャフォールディング構築ツール
- cnpm npm 淘宝ミラー
node.js 公式 Web サイトからノードをダウンロードしてインストールします。インストールプロセスは非常に簡単です。簡単です。[次へ] をクリックするだけでOKです。インストール後、コマンド ライン ツール (win R) を開き、
node -v コマンドを入力してノードのバージョンを確認します。対応するバージョン番号が表示されたら、インストールが成功したことを意味します。
npmパッケージマネージャーはnodeに統合されているので、nodeをインストールすればnpmがインストールされるので、npm -vコマンドを直接入力するとnpmのバージョン情報が表示されます。
これまでのところ、ノード環境はインストールされており、npm パッケージ マネージャーも利用可能です。一部の npm リソースがブロックされているか、外部リソースであるため、npm によってインストールが頻繁に発生します。依存パッケージの修正に失敗したため、npm----cnpm の国内イメージも必要です。
をインストールし、コマンド ラインに npm install と入力します。 -g cnpm --registry=http://registry.npm.taabao.org をクリックして待ちます。エラーが報告されなければ、インストールは成功しています (私のものはすでにインストールされており、更新成功メッセージが表示されます)。以下に示す:
完了後、npm の代わりに cnpm を使用して依存パッケージをインストールできます。 cnpm について詳しく知りたい場合は、淘宝網 npm ミラー公式ウェブサイトをご覧ください。
コマンド ラインでコマンド npm install -g vue-cli を実行し、その後、インストールが完了するまで待ちます。
インストールが成功したかどうか: vue -V
上記の 3 つの手順を経て、準備する必要がある環境とツールが準備できました。次に、vue-cli を使用してビルドを開始します。プロジェクト。
まず、プロジェクトを保存する場所を選択する必要があります。次に、コマンド ラインを使用してプロジェクト ディレクトリに cd します。ここでは、C ドライブの下に新しいディレクトリ (NodeTest ディレクトリ) を作成することを選択します。 cd を使用してディレクトリを切り取り、以下に示すようにディレクトリに移動します。
NodeTest ディレクトリで、コマンド ラインでコマンド vue init webpack firstApp (プロジェクトの完全なバージョンを初期化) を実行します。このコマンドの説明: このコマンドは、webpack がビルド ツールであるプロジェクトを初期化することを意味します。つまり、プロジェクト全体が webpack に基づいています。ここで、 firstApp はプロジェクト フォルダー全体の名前です。このフォルダーは、以下に示すように、指定したディレクトリに自動的に生成されます (この例では、フォルダーは NodeTest ディレクトリに生成されます)。このプロジェクトが保存されているフォルダーはエディターで手動で作成されており、プロジェクトに cd します: vue init webpack; 初期化するだけで、webpack が依存するパッケージもロードします:
ですこのフォルダー内にありますか? ディレクトリに作成します
コマンドを入力した後、いくつかの簡単なオプションを尋ねられるので、必要に応じて入力するだけです。
- に変更しました。プロジェクトの説明: プロジェクトの説明。デフォルトは 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 プロジェクトを開き、プロジェクト内にあります。ディレクトリは次のとおりです。 
ディレクトリとその機能を紹介しましょう。 : 
Configuration
パス、ポート番号、その他の情報は、最初に学習を開始したときにデフォルトの構成を選択しました。node_modules: npm によってロードされるプロジェクトに必要なさまざまな依存モジュール。
src: これは開発のメイン ディレクトリ (ソース コード) です。基本的に行う必要があることはすべてこのディレクトリ内にあり、このディレクトリにはいくつかのディレクトリとファイルが含まれています: 資産: 画像を配置します(画像のサイズに応じて、base64 またはその他のメソッドに基づいて名前が付けられます)、ロゴなど。 コンポーネント: ディレクトリにはコンポーネント ファイルが 1 つずつ含まれます router/index .js：構成ルーティング場所# app.vue：プロジェクトエントリコンポーネント（コンポーネント付き）、コンポーネントディレクトリを使用する代わりにコンポーネントをここに記述することもできます。主な機能は、独自に定義したコンポーネントをページに接続してレンダリングすることです。Package-lock.json: プロジェクト構成情報ファイル/依存する開発パッケージのバージョン情報と依存するプラグイン情報。 (特定のバージョン)
README.md: プロジェクト説明ファイル。
webpack.config.js: webpack 構成ファイル。例: .vue ファイルをブラウザーが理解できるファイルにパッケージ化します。
.babelrc: es6 構文を検出するための設定ファイルです。例: どのブラウザが適応されるかの制限です。
.gitignore: どのファイルが適用されるかの設定サーバーにアップロードすると無視されます (たとえば、ローカル データ モックをシミュレートすると、オンラインで送信/パッケージ化されるときに無視されなくなります。使用しない場合は、ここで設定できます)
.postcssrc.js: プレフィックス設定 (CSS 変換設定)
.editorconfig: コードを標準化します。たとえば、root が検出されるかどうか、コードの末尾が改行かどうか、行の前のスペースの数などです。インデントされています... (この仕様を定義することをお勧めします)
.eslintrc. js: eslint 文法規則を構成します (規則属性でどの文法規則が無効かを構成します)
.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 ファイルをクリックして実行すると、成功します。 。
プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！
以上がvue.js の 3 つのインストール方法の詳細については、こちらをご覧ください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。