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
実行が完了すると、ディレクトリにはさらに多くの依存関係があります
問題がある場合は、次のように対処するためのプロンプトを表示できます
。アップロード...再アップロードしてキャンセル