Vue スキャフォールディング プロジェクトを作成するための詳細な手順

Vue スキャフォールディング プロジェクトを作成するための詳細な手順

vue スキャフォールディング -> vue.cli

大規模で完全に機能する Vue プロジェクト テンプレート (初期化プロジェクト) をすばやく作成します。

現実的な説明: 空の Vue プロジェクトをすばやく作成する

インストール(グローバルインストール)

  • グローバルインストール
> npm i @vue/cli -g
  • Vue スキャフォールディング プロジェクトを作成する
> vue プロジェクト名を作成

設定オプション

Vue CLI v4.5.11
? プリセットを選択してください: (矢印キーを使用)
> デフォルト ([Vue 2] babel、eslint) 
 デフォルト (Vue 3 プレビュー) ([Vue 3] babel、eslint) 
 手動で機能を選択する
  • 上下を押して選択し、Enterキーを押して確定します。ここでは3番目のオプションの手動を選択します。

機能を選択

Vue CLI v4.5.11
? プリセットを選択してください: 機能を手動で選択
? プロジェクトに必要な機能をチェックします: (選択するには <space> を、すべてを切り替えるには <a> を、選択を反転するには <i> を押します)
>(*) Vueのバージョンを選択
 (*) バベル
 ()タイプスクリプト
 ()プログレッシブウェブアプリ(PWA)のサポート
 ()ルーター
 ()ヴュークス
 ()CSSプリプロセッサ
 (*) リンター/フォーマッター
 ()ユニットテスト
 ()E2Eテスト
  • カーソルを上下に動かし、スペースキーを押して選択し、Enterキーを押して確定します。ここではオプション1 2 5 6を選択します。

バージョンを選択

プロジェクトに必要な機能を確認します: Vueバージョン、Babel、Router、Vuexを選択します
プロジェクトを開始する Vue.js のバージョンを選択します (矢印キーを使用)
> 2.x
 3.x (プレビュー)
  • ここで2.xを選択してください

履歴モードを使用するかどうか

? ルーターに履歴モードを使用しますか? (運用時のインデックス フォールバックには適切なサーバー設定が必要です) (Y/n)
  • ここでnと入力してEnterキーを押します

Babel、ESLint などの設定場所。

Babel、ESLint などの設定をどこに配置するのがよいでしょうか? (矢印キーを使用)
> 専用の設定ファイル内
 package.json内
  • ここで、保存する最初の専用設定ファイルを選択します

プリセットとして保存

? これを将来のプロジェクト用のプリセットとして保存しますか? (y/N)
  • ここではnを選択します

成功を創る

Vue CLI v4.5.11
D:\MyStudy\myvue2 にプロジェクトを作成しています。
⚙️ CLI プラグインをインストールしています。これにはしばらく時間がかかる場合があります...


> [email protected] インストール後 D:\MyStudy\myvue2\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> [email protected] インストール後 D:\MyStudy\myvue2\node_modules\ejs
> ノード ./postinstall.js

21.836秒で928人の貢献者から1208個のパッケージを追加しました

61のパッケージが資金を募集中
詳細については `npm fund` を実行してください

🚀 ジェネレーターを呼び出しています...
📦 追加の依存関係をインストールしています...

4.671 秒で 1 人の貢献者から 5 つのパッケージを追加しました

61のパッケージが資金を募集中
詳細については `npm fund` を実行してください    

⚓ 完了フックを実行しています...

📄 README.md を生成しています...

🎉 プロジェクト myvue2 が正常に作成されました。  
👉 以下のコマンドで開始します。

$ cd myvue2
$ npm 実行 サーブ

プロジェクトディレクトリに入る

> cd myvue2

サービスを開始する

> npm 実行サーブ
 完了 2492msで正常にコンパイルされました                   

 アプリの実行場所:
 - ローカル: http://localhost:8080/ 
 - ネットワーク: http://192.168.17.154:8080/

 開発ビルドは最適化されていないことに注意してください。
 プロダクションビルドを作成するには、npm run build を実行します。

これで、vue スキャフォールディング プロジェクトを作成するための詳細な手順に関するこの記事は終了です。より関連性の高い vue スキャフォールディング プロジェクト作成コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ポップアップレイヤープラグインをvue-cli scaffoldingに導入するいくつかの方法
  • vue-cli スキャフォールディングの静的リソース リクエストにおけるエラーの原因と解決策
  • VUE スキャフォールディングの具体的な使用法
  • vue-cli を模倣して独自のスキャフォールディングを構築する方法

<<:  mysql 基本操作文コマンドの詳細な説明

>>:  Linux での感嘆符コマンド (!) の使用の概要

推薦する

Centos7.x での Nginx のインストール、SSL 設定、一般的なコマンドの詳細な説明

1. インストールyumを使用してインストールする ##yum nginx を自動的にインストールす...

ドロップダウンメニューを表示または非表示にするJavaScript

この記事では、ドロップダウンメニューを表示および非表示にするJavaScriptの具体的なコードを参...

CentOS 8にdockerをインストールする最も詳細な方法

CentOS 8にDockerをインストールする公式ドキュメント: https://docs.doc...

MySQL は、現在のデータ テーブル内のすべての時間に対して指定された時間間隔を増加または減少させます (推奨)

DATE_ADD() 関数は、指定された時間間隔を日付に追加します。現在のテーブル内のすべてのデー...

Docker 接続 MongoDB 実装プロセスとコード例

コンテナが起動した後まず管理者にログインして新しいユーザーを作成してください $ docker ex...

Nginx/Httpd ロードバランシング Tomcat 設定チュートリアル

前回のブログでは、Nginx と httpd を使用して、逆生成用のバックエンド Tomcat サー...

MySQLデータベース最適化技術の簡単な紹介

成熟したデータベース アーキテクチャは、最初から高可用性、高スケーラビリティなどの機能を備えて設計さ...

カラフルな時計効果を実現する JavaScript キャンバス

キャンバスを使ってカラフルな時計を書いてみよう! 1. タイトル(1)時計のケースが与えられ、ページ...

ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

DockerにRabbitMQをインストールする詳細な手順

目次1. 鏡を見つける2. RabbitMQイメージをダウンロードする3. RabbitMQコンテナ...

インタビューの質問: ホーリー グレイル レイアウトとダブル ウィング レイアウトの違い

序文今日は、聖杯レイアウトとダブルウィングレイアウト、そしてそれらの違いについてお話しします。この2...

CentOS 8 に MariaDB をインストールするための詳細なチュートリアル

MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...

Dockerコンテナを使用する簡単な例

目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...

Docker Composeでコンテナ管理の問題を解決する

Docker の設計では、コンテナは 1 つのアプリケーションのみを実行します。しかし、現在のアプリ...