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

推薦する

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...

JavaScriptの記事では、Webフォームの操作方法を説明します。

1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...

WeChatミニプログラムにナビゲーション機能を実装する方法

1. レンダリング2. 操作手順1. テンセントマップキーを申請する - 住所2. ミニプログラムの...

nginx をベースにした Web クラスター プロジェクトをすばやく構築する方法を説明します。

目次1. プロジェクト環境2. プロジェクトの説明3. プロジェクトの手順1. インストール2. 構...

Docker の詳細なイラスト

1. Dockerの紹介1.1 仮想化1.1.1 仮想化とは何ですか?コンピュータにおける仮想化とは...

Linuxでポートが開いているかどうかを確認する方法のまとめ

方法1: lsofコマンドを使用するlsof コマンドを使用して、ポートが開いているかどうかを確認で...

Linux の fsevents モジュールによって発生する npm ls エラーの解決方法の詳細な説明

Mac で開発されたプロジェクトがあり、パッケージ npm i がインストールされており、すべて正常...

MySQL 8.0 の新しいリレーショナル データベース機能の詳細な説明

序文MySQL 8.0 の最新バージョンは 8.0.4 rc であり、正式版は近日中にリリースされる...

mysql データ型変換の実装

1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...

雨滴効果を実現する JavaScript キャンバス

この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...

MySQL の where と on の違いと、いつ使用するか

以前、テーブル結合クエリを書いていたとき、whereとonの違いがわからず、SQLに小さな問題が発生...

Vueは動的コンポーネントを使用してTAB切り替え効果を実現します

目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...

MySQLマスタースレーブデータベース構築方法の詳細な説明

この記事では、MySQL マスター/スレーブ データベースの構築方法について説明します。ご参考までに...

ネイティブ js でカスタム スクロール バーを実装する

この記事の例では、カスタムスクロールバーを実装するためのjsの具体的なコードを参考までに共有していま...

MySQL で重複レコードをクエリして削除する方法の完全なガイド

序文この記事では主に、MySQL で重複レコードをクエリして削除する方法を紹介します。参考と学習のた...