vuejs に依存関係をインストールする方法

vuejs に依存関係をインストールする方法: 1. ノードと cnpm をインストールします; 2. vue-cli スキャフォールディング構築ツールをインストールします; 3. vue-cli でプロジェクトをビルドします; 4. cmd コマンド ウィンドウを開いて次を使用します特定のプロジェクト フォルダーに入力する cd コマンド; 5. 「cnpm install」コマンドを実行して依存関係をインストールします。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

1. 開発環境

vue推奨開発環境:

Node.js: JavaScript実行環境(ランタイム)、さまざまなシステムがさまざまなプログラミング言語を直接実行します

npm: Nodejs のパッケージ マネージャー。

webpack: その主な目的は、リソースのマージやパッケージ化など、CommonJS 構文を通じてブラウザーによって公開する必要があるすべての静的リソースを準備することです。

vue-cli: ユーザー生成の Vue プロジェクト テンプレート

2. 環境セットアップ

node.js をインストールします:
1.node.js公式Webサイトからnodeをダウンロードしてインストールします インストールプロセスは非常に簡単です。
2. npm のバージョンは 3.0 以降である必要があります。このバージョンより低い場合は、アップグレードする必要があります:

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

3. node.js に基づいて、淘宝網 npm ミラーを使用してインストールします関連する依存関係。中国で npm を使用すると非常に時間がかかるため、淘宝 NPM ミラー (http://npm.taabao.org/)

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

を使用することをお勧めします。完了後、npm の代わりに cnpm を使用して依存関係のあるものをインストールできます。パッケージ。

3. vue-cli スキャフォールディング構築ツールをインストールします

必要なテンプレート フレームワークの構築に役立つグローバル vue-cli スキャフォールディングをインストールします

$ cnpm install -g vue-cli
# 回车，等待安装...
$ vue
# 回车，若出现vue信息说明表示成功

4. vue-cli

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

5 を使用してプロジェクトをビルドします。依存関係をインストールします

cmd

1)。次のように入力します。 cd my-project (プロジェクト名) 、Enter キーを押し、特定のプロジェクト フォルダーを入力します

2).「cnpm install」と入力し、Enter キーを押し、しばらく待ちますしばらくしてから

#プロジェクト フォルダーに戻ると、プロジェクト構造に追加の node_modules フォルダーがあることがわかります (このファイルの内容は、以前にインストールされた依存関係です)

# #6. 環境が正常にセットアップされているかどうかをテストします

方法 1: cmd に入力します:

npm run dev

方法 2: ブラウザーに入力します: localhost :8080 (デフォルトのポートは 8080)

関連する推奨事項:「

vue.js チュートリアル」

以上がvuejs に依存関係をインストールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。