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

青灯夜游
リリース: 2023-01-13 00:45:46
オリジナル
16346 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート