ホームページ ウェブフロントエンド Vue.js vue.js プロジェクトを開始する方法

vue.js プロジェクトを開始する方法

Dec 17, 2020 am 11:50 AM
vue.js

vue.js プロジェクトを開始する方法: 最初に「cd プロジェクト名」コマンドを使用してプロジェクト ディレクトリに入り、次に「npm install」コマンドを使用して依存関係をインストールし、最後に「npm run dev」を使用します。プロジェクトを開始するコマンド。

vue.js プロジェクトを開始する方法

このチュートリアルの動作環境: Windows7 システム、vue2.9 バージョン。この方法はすべてのブランドのコンピューターに適しています。

関連する推奨事項: 「vue.js チュートリアル

vue.js プロジェクトを開始して実行する方法 (他の人のプロジェクトを維持する)

#1: cnpm のインストール

一部の npm リソースがブロックされているか外部リソースであるため、npm を使用して依存パッケージをインストールすると失敗することがよくあります。必要なのは、npm---cnpm
の国内イメージだけです。コマンドラインに

npm install -g cnpm --registry=http://registry.npm.taobao.org
ログイン後にコピー

vue.js プロジェクトを開始する方法

と入力します。 2: webpack# をインストールします。
##

npm install webpack -g
ログイン後にコピー

Webpack は、JS (JSX を含む)、Coffee、スタイル (less/sass を含む)、画像などのさまざまなリソースをモジュールとして使用および処理できるモジュール ローダーおよびパッケージング ツールです。 。 Webpack の中核は依存関係の分析であり、依存関係が分析されれば、残りは細かい部分だけです。


vue.js プロジェクトを開始する方法

3: vue-cli をインストールします

cnpm install vue-cli -g
ログイン後にコピー

vue-cli は vue.js の足場ですvue.js Webpack プロジェクト テンプレートを自動的に生成するために使用されます。このプロセスには 10 秒以上かかります。完了するまでお待ちください。OK、これで環境全体がセットアップされました


vue.js プロジェクトを開始する方法

#4: cd/プロジェクト名次はプロジェクトを実行するためのものです。cd/プロジェクト名、ファイルは D ドライブに配置されているため、最初に d ドライブに入り、次にプロジェクトに入ります。

cd ShopApp
ログイン後にコピー

vue.js プロジェクトを開始する方法

5: 依存関係のインストール

プロジェクトに入った後、依存関係をインストールすると、インストールは成功します


vue.js プロジェクトを開始する方法

注: この手順ではこのようなエラーが発生する可能性があります。他の人のプロジェクトを開いているため、プロジェクト内に node_modules モジュールが存在する必要があるため、最初にそれを削除してから、次に実行

npm installコマンド

vue.js プロジェクトを開始する方法

6: プロジェクトの開始

すべての準備が整ったので、プロジェクトを開始します

npm run dev
ログイン後にコピー

vue.js プロジェクトを開始する方法

7: ブラウザが自動的に起動し、プロジェクトが開きます。

http://localhost:8080/#/ と入力します。ブラウザで、プロジェクトのホームページに入ります。

他のページにアクセスしたい場合は、# の直後にコンポーネント名を追加します: 例: http://localhost:8080/#/adjustIntegral

関連する推奨事項:


2020 年のフロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年の最新vue.js ビデオ チュートリアル 5 選

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

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

以上がvue.js プロジェクトを開始する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vue-cropper を使用して vue プロジェクト内の画像をトリミングする vue-cropper を使用して vue プロジェクト内の画像をトリミングする Oct 31, 2022 pm 07:16 PM

vue-cropper を使用して vue プロジェクト内の画像をトリミングする

実践的な戦闘: vue ファイルをサポートして定義にジャンプするプラグインを vscode で開発する 実践的な戦闘: vue ファイルをサポートして定義にジャンプするプラグインを vscode で開発する Nov 16, 2022 pm 08:43 PM

実践的な戦闘: vue ファイルをサポートして定義にジャンプするプラグインを vscode で開発する

vue3 の reactive() について詳しく話しましょう vue3 の reactive() について詳しく話しましょう Jan 06, 2023 pm 09:21 PM

vue3 の reactive() について詳しく話しましょう

Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明 Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明 Apr 24, 2023 am 10:52 AM

Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明

Vue3 で単体テストを作成する方法を調べる Vue3 で単体テストを作成する方法を調べる Apr 25, 2023 pm 07:41 PM

Vue3 で単体テストを作成する方法を調べる

Vue3 動的コンポーネントで例外を処理する方法の簡単な分析 Vue3 動的コンポーネントで例外を処理する方法の簡単な分析 Dec 02, 2022 pm 09:11 PM

Vue3 動的コンポーネントで例外を処理する方法の簡単な分析

vue のコンポーネント化とモジュール化の違いは何ですか vue のコンポーネント化とモジュール化の違いは何ですか Dec 15, 2022 pm 12:54 PM

vue のコンポーネント化とモジュール化の違いは何ですか

vite が .env ファイルを解析する方法についての詳細な説明 vite が .env ファイルを解析する方法についての詳細な説明 Jan 24, 2023 am 05:30 AM

vite が .env ファイルを解析する方法についての詳細な説明

See all articles