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

推薦する

MySQL 数千万のビッグデータに対するSQLクエリ最適化の知識ポイントのまとめ

1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...

VMware ESXi CLI の一般的なコマンドを調べる

目次【共通コマンド】 [一般的な esxi コマンドの概要] [esxcli コマンドの調査] ES...

MySQL のデッドロック チェックとデッドロック除去の例の詳細な説明

1. クエリプロセスプロセスリストを表示2. 対応するプロセスを照会し、IDを強制終了します。検証(...

DockerでSpring Bootアプリケーションを実行する方法

ここ数日、dockerでSpring Bootアプリケーションを実行する方法を勉強してきました。以前...

Dockerコンテナ起動時に固定IPを設定する実装

Dockerインストール後のネットワークタイプ [root@insure updev]# docke...

Windows 2016 Server セキュリティ設定

目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...

HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

序文馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います...

MySQLのconcat関連関数の詳細な説明

1. concat() 関数機能: 複数の文字列を 1 つの文字列に連結する構文: concat(s...

異なる列を持つテーブルのクエリ結果のSQLマージ操作

2 つの異なるテーブルをクエリするには、結果をマージする必要があります。たとえば、table1 の列...

ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...

Reactドラッグフックを実装するための100行以上のコード

序文ソースコードは合計で 100 行強しかありません。これを読めば、react-dnd などの成熟し...

Ubuntu インストール cuda10.1 ドライバ実装手順

1. cuda10.1をダウンロードします。 NVIDIA 公式ウェブサイト リンク: https:...

divの背景を透明に設定する方法の例

div の背景を透明にする一般的な方法は 2 つあります。 1. 不透明度属性を 0 ~ 1 の値に...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...

Nginxを再コンパイルしてモジュールを追加する方法

Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...