Vueシリーズ9:最初のvue-cliプロジェクト

9.1.vue-cliとは

vue-cliによって公式に提供されたスキャフォールディングを使用して、vueプロジェクトテンプレートをすばやく生成します。
  事前定義されたディレクトリ構造と基本コードは、Mavenプロジェクトを作成するときと同じように、スケルトンプロジェクトの作成を選択できます。この推定プロジェクトは次のとおりです。足場。私たちの開発はより速く
  、プロジェクトの機能

  • 統一されたディレクトリ構造
  • ローカルデバッグ
  • ホットデプロイメント
  • 単体テスト
  • オンライン統合パッケージ

9.2、必要な環境

  • Node.js:http://nodejs.cn/download/
    インストールは頭脳のない次のステップです。自分の環境ディレクトリにインストールするだけです。
  • Git:https://git-scm.com/doenloads
    ミラー:https://npm.taobao.org/mirrors/git-for-windows/

nodejsが正常にインストールされていることを確認します。

  • cmdの下に入力してnode -v、バージョン番号を正しく印刷できるかどうかを確認してください。
  • cmdの下に入力してnpm -v、バージョン番号を正しく印刷できるかどうかを確認してください。
    このnpmはパッケージ管理ツールであり、Linuxでのaptソフトウェアのインストールに似ています。
      Node.js Taobao Mirror Accelerator(cnpm)をインストールする
      と、ダウンロードがはるかに高速になります〜
# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

インストールプロセスは少し遅いかもしれません〜、しばらくお待ちください!cnpmはインストールされていますが、できるだけ使用しないようにしてください。
  インストール場所:C:\Users\administrator\AppData\Roaming\npm

 

 

アップロード中...再アップロード
  アンインストールvue-cli

cnpm instal1 vue-cli-g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序,通常我们选择webpack
vue list

アップロード中...再アップロードがキャンセルされました

9.3.最初のvue-cliアプリケーション

1.Vueプロジェクトを作成します。コンピューター上に空のフォルダーを作成しましょう。Dドライブの下に新しいディレクトリを作成します。

D:\Project\vue-study;

2.webpackテンプレートに基づいてvueアプリケーションを作成します

#1、首先需要进入到对应的目录 cd D:\Project\vue-study
#2、这里的myvue是顶日名称,可以根据自己的需求起名
vue init webpack myvue

あなたはずっと選択することはできません;
  説明:

  • プロジェクト名:プロジェクト名、デフォルトでEnterキーを押します
  • プロジェクトの説明:プロジェクトの説明。デフォルトでEnterキーを押すだけです。
  • 作成者:プロジェクトの作成者。デフォルトでEnterキーを押します
  • vue-routerのインストール:vue-routerをインストールするかどうか、インストールしない場合はnを選択します(後で手動で追加する必要があります)
  • ESLintを使用してコードをリントする:コードチェックにESLintを使用するかどうか、インストールしない場合はnを選択します(後で手動で追加する必要があります)
  • 単体テストの設定:単体テストに関連して、インストールしないnを選択します(後で手動で追加する必要があります)
  • ナイトウォッチを使用したSetupe2etests:単体テストに関連して、インストールしないnを選択します(後で手動で追加する必要があります)
  • プロジェクトが作成された後にnpminstallを実行する必要があります。作成直後に初期化し、nを選択すると、手動で実行されます。結果を実行します。

(1)初期化して実行します

cd myvue
npm install
npm run dev

実行が完了すると、ディレクトリにはさらに多くの依存関係があります

問題がある場合は、次のように対処するためのプロンプトを表示できます
。アップロード...再アップロードしてキャンセル

 

おすすめ

転載: blog.csdn.net/qq_21137441/article/details/123768261