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を使用したプロジェクト構造は次のようになります。