vue-cli3.0 のインストールと設定のチュートリアル (画像とテキスト)

この記事は、vue-cli3.0 のインストールと設定に関するチュートリアル (写真とテキスト) を提供します。一定の参考値があります。必要な友人は参照してください。お役に立てれば幸いです。 。

最近、会社が新しいプロジェクトを立ち上げて vue-cli3.0 で設定することになったので、それをやらせてもらい、記録を作成します。

インストール

まず、cli3.0 にアップグレードする必要があります。コマンドは次のとおりです。 (公式 Web サイトにアクセスして、cli3.0 のドキュメントを自分で読むのが最善です)

npm install -g @vue/cli-service-global

インストールが完了したら、次の図に示すように、インストールが成功したかどうかを確認します。

3.0 以降が表示されれば、インストールは成功です。

プロジェクトの作成

vue create hello-world

作成プロセス中に、一連の構成を選択するように求められます。キーボードの上下キーを使用して切り替えることができ、スペース バーを使用して切り替えることができます。が選択され、エンターキーが確定します。以下で一つずつ説明していきます。

最初のデフォルト設定では、babel と eslint のみがインストールされます。その他は自分で設定する必要があります。推奨されません。ここでは 2 番目の設定を選択します。手動設定＃＃＃。 Enter を押します (キーボードの上下キーで選択範囲を上下に切り替えることができます)

上から下へ (注: スペースバーで選択できます)

babel：用来将es6的代码编译为es5
typescript：javascript的一个超集，我这里没选
Progressive Web App (PWA) Support： pwa技术
Router：路由
Vuex：全局状态管理
CSS Pre-processors： css预处理
Linter / Formatter： 风格检查器
Unit Testing：单元测试
E2E Testing：e2e测试

こちら選択は個人のニーズに応じて行うことができます

次のステップでは、eslint スタイルを選択します。これ以上苦労することなく、3 番目の標準を選択するだけです (最初のいくつかはわかりません - _-)

ここでは、保存時に lint を設定するか送信時に設定するかを聞いています。ここでは保存時に lint を設定します (最初のもの)

これは、babel、eslint、および postcss の設定をどこに配置するかを尋ねています。

In dedicated config files：放在相应的文件中
In package.json：放在package.json中

ここでは、プリセットを保存するかどうかを尋ねられます。「はい」を選択すると、次回 vue create xxx を実行するときにこれらの設定がデフォルトで選択されます。 「いいえ」を選択することをお勧めします

ここに移動 構成は 1 ステップで完了し、インストールが完了するのを待ちます。

この記事はここで終了しています。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの

JavaScript ビデオ チュートリアル 列に注目してください。

以上がvue-cli3.0 のインストールと設定のチュートリアル (画像とテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。