vue を使用した cli 脚手架でプロジェクトを構築する、実行したコマンドおよび関連する問題
1. node のインストールと確認#
成功裏にインストールされたかテストする、
$ 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 プロジェクトを構築できる。プロジェクトを置きたいフォルダを見つけ、ターミナルに入り、そのフォルダに cd する
コマンドを入力：
$ vue init webpack vuedemo
// 名前は要求に応じて自分で付ける、vuedemo
- プロジェクト名 (vuedomo)： ----- プロジェクト名、直接エンターを押して、括弧内のデフォルト名を使用（ここでの名前は大文字を含めてはいけない、大文字があるとエラーが出る Sorry, name can no longer contain capital letters）
- プロジェクトの説明 (A Vue.js project)： ---- プロジェクトの説明、デフォルト名を使用するためにエンターを押してもよい
- 作者 ()： ---- 作者、あなたの名前を入力
- Runtime + Compiler: most users に推奨 运行加编译、推奨されているのでこれを選ぶ
Runtime-only: 約 6KB 軽量な min+gzip だが、テンプレート（または Vue 特有の HTML）は.vue ファイルのみに許可され、他ではレンダリング関数が必要 仅运行时、推奨されているので最初の選択をする - vue-router をインストールしますか？ (Y/n) これは公式のルーターであり、ほとんどの場合使用されるので、ここで「y」と入力してエンターを押す
- ESLint を使用してコードをリントしますか？ (Y/n) これはコードスタイル管理ツールであり、コードスタイルを統一するために使用され、一般的にプロジェクトで使用される
- 次も選択肢です Pick an ESLint preset (Use arrow keys) これは vue プロジェクトのコードスタイルの ESLint プリセットを選択する、直接 y を押してエンター
- Karma + Mocha でユニットテストを設定しますか？ (Y/n) ユニットテストをインストールするか、私はインストールを選択し y を押してエンター
- Nightwatch で e2e テストを設定しますか？ (Y/n) e2e テストをインストールするか、私はインストールを選択し y を押してエンター
その後はゆっくりとした構築プロセス、構築が完了したら、cd で構築されたプロジェクトに入る
$ cd vuedemo
次に必要な依存関係をインストールする
$ npm install
5. プロジェクトを実行#
実行コマンドを入力し、プロジェクトが正常に実行できるか確認する
$ npm run dev
指示に従い、ブラウザにhttp://localhost:8080を入力
ポートが開かない場合、占有されている可能性があるため、設定ファイルを修正する必要がある、config > index.js
プロジェクトのディレクトリを確認する
6. その他#
いくつかの関連するコマンド
$ npm run build
// プロジェクトが完成した後にパッケージ化する
パッケージ化が完了した後、ルートディレクトリに dist フォルダが生成され、設定ファイルのパスを修正する必要があり、ローカルで確認できる
プロジェクトをオンラインで公開するには、dist をサーバーにアップロードするだけでよい