Vue-CLIをダウンロードするまで苦労したので、その方法を備忘録を兼ねて記載しておきます。
Vue.jsにおいて、実際のアプリを開発する際は.vueの形式でコードを記載していくことになります。
最終的には複数のVueファイルから単一のコンポーネントを作成し、本番環境にデプロイしていくことになり、Vue-CLIを使うことで、素早く本番環境にデプロイすることができます。
Vue-CLIとは？
Vue-CLIとはコマンドラインを使って、アプリ開発の際に使用するコンポーネントを提供してくれるツールです。
プロジェクトで利用する機能を一緒にダウンロードしてくれるので直ぐに開発を始められることができます。
Vue-CLIのインストール手順
Vue-CLIを利用する為にはVue-CLIをインストールする必要があり、npmが使用できる環境で、下記コマンドを実行することで、インストールすることができます。
npm install -g @vue-cli
Vue-CLIが問題なくインストールされていれば、下記コマンドを実行することでVue-CLIのバージョンを確認することができます。
vue --version
すでにVue-CLIをインストール済みで、最新版にアップデートしたい場合は
npm update -g @vue/cli
となります。
Vue-CLIのインストールが完了したら、プロジェクトの作成を行います。プロジェクトの作成には下記コマンドを実行します。vue createの後には自身で考えたファイル名を記載します。
今回はVue-appと記載しましょう。
vue create Vue-app
presentを選択するコマンドが現れるので、デフォルトのdefault(babel, eslint)を選択します。
Vue CLI v4.4.6
? Please pick a preset:
❯ default (babel, eslint)
Manually select features
もしマニュアルを選択すると、下記のような表示が現れて、必要な機能を選択することができます。
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
◉ Babel
◯ TypeScript
❯◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
さらにnpm run serveとnpm run buildを実行することで、本番環境にデプロイすることができます。
$ npm run serve
DONE Compiled successfully in 2515ms 15:19:27
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.2.111:8080/
Note that the development build is not optimized.
To create a production build, run npm run build
LocalとNetworkの2つのURLが表示されます。
ブラウザで「 Local: http://localhost:8080/ 」にアクセスします。
この画面が表示されたらプロジェクトの作成は完了でVueも正常に動作しています。