VueJS-環境のセットアップ

VueJSをインストールする方法はたくさんあります。インストールを実行する方法のいくつかの方法については、前に説明します。

HTMLファイルで直接<script>タグを使用する

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

ホームサイトに移動します https://vuejs.org/v2/guide/installation.htmlVueJSを使用して、必要に応じてvue.jsをダウンロードします。使用するバージョンには、製品版と開発版の2つがあります。次のスクリーンショットに示すように、開発バージョンは最小化されていませんが、製品バージョンは最小化されています。開発バージョンは、プロジェクトの開発中の警告とデバッグモードに役立ちます。

CDNの使用

CDNライブラリからVueJSファイルの使用を開始することもできます。リンクhttps://unpkg.com/vueVueJSの最新バージョンを提供します。VueJSはjsDelivrでも利用できます(https://cdn.jsdelivr.net/npm/vue/dist/vue.js)およびcdnjs(https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js)。

必要に応じて、最後にファイルをホストし、VueJS開発を開始できます。

NPMの使用

VueJSを使用する大規模なアプリケーションの場合、npmパッケージを使用してインストールすることをお勧めします。BrowserifyとWebpackに加えて、開発に役立つその他の必要なツールが付属しています。以下は、npmを使用してインストールするコマンドです。

npm  install vue

CLIコマンドラインの使用

VueJSは、vueをインストールしてサーバーのアクティブ化を開始するためのCLIも提供します。CLIを使用してインストールするには、CLIをインストールする必要があります。これは次のコマンドを使用して実行されます。

npm install --global vue-cli

完了すると、VueJSのCLIバージョンが表示されます。インストールには数分かかります。

+ [email protected]
added 965 packages in 355.414s

以下は、Webpackを使用してプロジェクトを作成するコマンドです。

vue init webpack myproject

開始するには、次のコマンドを使用します。

cd myproject
npm install
npm run dev

npm run devを実行すると、サーバーが起動し、次のスクリーンショットに示すように、ブラウザーに表示されるURLが提供されます。

CLIを使用したプロジェクト構造は次のようになります。