vue 使用 cli 脚手架构建项目工程，実行されるコマンドと関連する問題
1. ノードのダウンロードとインストール#
インストールが成功したかどうかをテストします。
$ node -v
// ダウンロードしたバージョン番号が返されます
2. webpack の環境をインストール#
$ npm install webpack -g
// 失敗した場合、ユーザーに権限がない可能性があります
// 以下のように、管理者権限を使用します
$ sudo npm install webpack -g
バージョン番号が返されれば成功です。返されない場合は、以下のコマンドを入力する必要があります。
$ npm install webpack webpack-cli -g
webpack 4.X 以降、webpack-cli の依存関係をインストールする必要があります
3. vue-cli をグローバルにインストール#
$ npm install --global vue-cli
// 失敗した場合、sudoを使用します
$ sudo npm install --global vue-cli
インストールが完了したら、次のコマンドを入力します。
$ vue -V
バージョン番号が返されれば、インストールが成功しています
4. プロジェクトの構築#
前述のコマンドを実行した後、ci プロジェクトを構築することができます。プロジェクトを配置したいフォルダを見つけて、ターミナルに入力し、そのフォルダに移動します。
次のコマンドを入力します：
$ vue init webpack vuedemo
// 名前は要件に従って自分で決めてください、vuedemoなど
- Project name (vuedomo)： ----- プロジェクト名、デフォルトの名前に従って Enter キーを押します（注意：ここでは大文字を含めることはできません。大文字が含まれている場合、エラーが発生します）
- Project description (A Vue.js project)： ---- プロジェクトの説明、デフォルトの名前を使用するため、Enter キーを押します
- Author ()： ---- 著者、あなたの名前を入力します
- Runtime + Compiler: recommended for most users 実行とコンパイル、推奨されているので、それを選択します
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere ただし、テンプレート（または Vue 固有の HTML）は.vue ファイルのみで許可されており、他の場所ではレンダリング関数が必要です - Install vue-router? (Y/n) vue-router をインストールしますか？これは公式のルーターであり、ほとんどの場合使用されます。ここでは「y」と入力して Enter キーを押します。
- Use ESLint to lint your code? (Y/n) ESLint を使用してコードをリントしますか？ESLint はコードスタイル管理ツールであり、コードスタイルを統一するために使用されます。一般的にはプロジェクトで使用されます。
- 接下来也是选择题 Pick an ESLint preset (Use arrow keys) ESLint のプリセットを選択します。Vue プロジェクトのコードスタイルを記述するため、y を選択して Enter キーを押します。
- Setup unit tests with Karma + Mocha? (Y/n) ユニットテストをセットアップしますか？y を選択して Enter キーを押します。
- Setup e2e tests with Nightwatch (Y/n)? e2e テストをセットアップしますか？y を選択して Enter キーを押します。
その後、ゆっくりとした構築プロセスがあります。構築が完了するまで待ち、構築されたプロジェクトに cd します。
$ cd vuedemo
必要な依存関係をインストールします
$ npm install
5. プロジェクトの実行#
コマンドを実行して、プロジェクトが正常に実行されるかどうかを確認します。
$ npm run dev
指示に従って、ブラウザにhttp://localhost:8080と入力します。
ポートが開かない場合は、使用されている可能性があります。設定ファイルを変更する必要があります。config > index.js
プロジェクトのディレクトリを表示する
6. その他#
その他の関連するコマンド
$ npm run build
// プロジェクトが完成したら、パッケージ化します
パッケージ化が完了すると、ルートディレクトリに dist フォルダが作成され、設定ファイルのパスを変更して、ローカルで表示できます。
プロジェクトをオンラインで公開するには、dist をサーバーにアップロードするだけです。