ホームページ > 開発ツール > VSCode > vscode が vue プロジェクトをビルドする方法

vscode が vue プロジェクトをビルドする方法

王林
リリース: 2019-12-16 16:54:20
オリジナル
16430 人が閲覧しました

vscode が vue プロジェクトをビルドする方法

1. 事前に Vscode、nodejs などをインストールしてください。

2. vue-cli をグローバルにインストールします。vue-cli は、Vue プロジェクトを迅速に構築するのに役立ちます。

インストールコマンド:

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

VScode のターミナルを開き、コマンド入力ボックスを表示します。 [ターミナル] - [新しいターミナル] をクリックし、上記のコマンドを入力して Enter キーを押し、インストールが完了するまで待ちます。

vscode が vue プロジェクトをビルドする方法

3. jsをパッケージ化するツールであるwebpackをインストールします

インストールコマンド:

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

インストール方法は上記と同じです。その上。

4. インストールが完了したら、vue プロジェクトの作成を開始できます。まずプロジェクトを保存するフォルダーを作成し、vscode で対応するフォルダーを開き、ターミナルの対応するフォルダーに cd します。たとえば、私のフォルダーは myvue

プロジェクトの作成コマンドです。

vue init webpack myvue
ログイン後にコピー

と入力します。myvue はプロジェクト名で、好みに応じて選択します。

vscode が vue プロジェクトをビルドする方法

次に、いくつかの構成項目が表示されます。これらは必要に応じて構成することも、デフォルトのまま Enter キーを押すこともできます。

vscode が vue プロジェクトをビルドする方法

その後、依存関係がインストールされるまで待ち続けます。完了後、基本的な vue プロジェクトがビルドされます。完了すると、vscode の左側に次のディレクトリが表示されます。そのエントリが main.js です。

vscode が vue プロジェクトをビルドする方法

#5. 次に、プロジェクトを実行し、最初にプロジェクト フォルダーに移動し、cd myvue を実行して、次のコマンド

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

## を入力します。 vscode が vue プロジェクトをビルドする方法 #成功後、ブラウザに

:http://localhost:8080

と入力し、以下の画面が表示されれば成功です。

vscode が vue プロジェクトをビルドする方法6. プロジェクトのパッケージ化とオンラインでのリリース

コマンドを入力します:

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

完了後、プロジェクトに dist フォルダーが表示されます。このフォルダーにはパッケージ化されたコンテンツが含まれており、直接デプロイできます。

おすすめの関連記事とチュートリアル:

vscode チュートリアル

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

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