Vue cliを使用したプロジェクトの作成

9954 ワード
web vue
注意:Vue-cliがまだインストールされていない場合、またはバージョンが4未満の場合は、次のコマンドを実行してインストールまたはアップグレードします.
npm install --global @vue/cli

コマンドラインに次のコマンドを入力してVueアイテムを作成します.
vue create dome-master

1. 
Vue CLI v4.2.3
? Please pick a preset:
  default (babel, eslint)
> Manually select features

default:デフォルトでbabel、eslintをチェックし、車に戻った後、直接パッケージmanuallyに入ります:カスタムチェックプロパティ構成、選択が完了した後、パッケージ選択に入ります第2種:手動でプロパティを選択し、より多くのカスタムオプションをサポートします
2. 
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

それぞれ選択:Babel:es 6転es 5 Router:ルーティングCSS Pre-processors:CSSプリプロセッサ、後でless、sass、stylusなどのLinter/Formatter:コードフォーマットチェック、ESLintコードフォーマットチェック
3. 
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

historyルーティングモードを使用するかどうか、ここではnを入力して使用しません.
4. 
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

CSSプリプロセッサを選択し、ここでおなじみのLessを選択します.
5. 
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

検査ツールを選択し、ここでESLint+Standard configを選択します.
6. 
? Pick additional lint features:
 (*) Lint on save

>(*) Lint and fix on commit

コードフォーマットチェックをトリガーするタイミングを選択します.
  • Lint on save:ファイルを保存するたびに
  • Lint and fix on commit:git commitコミットが実行されるたびに
    • ここではどちらも選んで、もっと厳格にすることをお勧めします.
    7. 
    ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

    Babel、ESLintなどのツールには、追加のプロファイルがあります.ここでは、これらのツールに関連するプロファイルをどこに書くかを尋ねます.
  • In dedicated config fies:個別のプロファイル
    • にそれぞれ保存
  • In package.json:packageに保存します.jsonファイル
    • ここでは、1つ目を選択して、個別のプロファイルに保存することをお勧めします.これにより、カスタム構成が容易になります.
    8. 
    ? Save this as a preset for future projects? (y/N)

    ここでは、さっき選択した一連の構成を保存する必要があるかどうかを聞いてみます.次に直接再利用するために、上記の一連の選択を覚えておくことができます.
    ここでは自分の必要に応じてyまたはnを入力します
    9. 
    ✨  Creating project in C:\Users\LPZ\Desktop\topline-m-fe89\topline-m-89.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

[          ........] - extract:object-keys: sill extract json5@2.1.1

    ウィザードの構成が終了し、パッケージのインストールが開始されます.パッケージのインストール時間が長くなる可能性がありますので、お待ちください...
    10. 
    ⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project topline-m-89.
�  Get started with the following commands:

 $ cd topline-m
 $ npm run serve

    インストールが完了すると、プロジェクトの作成に成功したことを示すコマンドラインのプロンプトに従って端末にそれぞれ入力します.
    あなたのプロジェクトディレクトリに入ります
    cd dev-dome
    開発サービスの開始
    npm run serve
    11. 
     DONE  Compiled successfully in 7527ms


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.10.216:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

    起動に成功し、コマンドラインに出力されたアイテムのhttpアクセスアドレス.ブラウザを開き、いずれかのアドレスを入力してアクセスします.
    このページが表示されたら、おめでとうございます.プロジェクトの作成に成功しました.
    /bin/sh: next: command not found
    6. Java IO: Byte & Char Arrays