ホームページ  >  記事  >  ウェブフロントエンド  >  vue-cli3.0 のインストールと設定のチュートリアル (画像とテキスト)

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

不言
不言転載
2019-03-23 09:25:012468ブラウズ

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

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

インストール

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

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

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

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

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

プロジェクトの作成

vue create hello-world

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

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

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

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

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

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 番目の標準を選択するだけです (最初のいくつかはわかりません - _-)


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

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


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

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


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

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

ここでは、プリセットを保存するかどうかを尋ねられます。「はい」を選択すると、次回 vue create xxx を実行するときにこれらの設定がデフォルトで選択されます。vue-cli3.0 のインストールと設定のチュートリアル (画像とテキスト) 「いいえ」を選択することをお勧めします

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

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

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

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

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。