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 での感嘆符コマンド (!) の使用の概要

推薦する

Linux/CentOS システムでネットワーク時間を同期する 2 つの方法の詳細な説明

ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...

画像の色を変更するための純粋なCSS

画像の色を変更するための CSS テクニックは非常にシンプルです。具体的なコードは次のとおりです。ヒ...

MySQL 8.0はJSONを扱えるようになりました

目次1. 概要2. JSON基本ツール3. JSONパス式4. JSONを検索して変更する序文:長い...

Linux md5sumコマンドの使い方

01. コマンドの概要md5sum - MD5検証コードを計算して検証するmd5sum コマンドは、...

MySQL DMLステートメントの使用に関する詳細な説明

序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...

Vueルーティングナビゲーションガードの簡単な理解

目次1. グローバルガード1. グローバル前線警備2. グローバル解像度ガード3. グローバルポスト...

Centos7 に Nginx 統合 Lua サンプル コードをインストール

序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...

ツリー チャートの実装方法に関する Echarts チュートリアル

ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...

ウェブサイトのコードブロックのpreタグにコピーコードボタンコードを追加します

他のよりプロフェッショナルなブログ システムを参照すると、コード ブロックにコードのコピー ボタンが...

CSS 境界線の長さ制御機能の実装

以前は、境界線の長さをコンテナーよりも小さくする必要があったときに、div ネストを使用していました...

MySQLシリーズのMariaDBサーバーのインストール

目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...

ブートストラップテーブルの使い方のまとめ

この記事では、bootstrapテーブルの使い方を参考までに紹介します。具体的な内容は次のとおりです...

Node+Express テストサーバーのパフォーマンス

目次1 テスト環境1.1 サーバーハードウェア1.1.1 t2.マイクロ1.1.2 c5.large...

MySQL 5.6 圧縮パッケージのインストール方法

MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...

vue.js ルーターのネストされたルート

序文:ルートでは、主要部分は同じでも、基礎となる構造が異なることがあります。たとえば、ホームページに...