Vue.js 環境構築(CLI)
このページで学べる内容
- Vue.jsの環境構築
難易度
☆☆
今回インストールするバージョン
- @vue/cli : 5.0.4
動作環境
- OS : Mac
- yarn : 1.22.18
はじめに
Vue.jsは、ユーザーインターフェイスを構築するためのJavascriptで作成されたプログレッシブフレームワークです。 このサイトでは、環境構築から少しずつVue.jsの特徴を学んでいけるようなサイトにできればと思っています。
対象としてはHTML、Javascriptの基礎的な内容についてある程度知識がある前提で進行していきます。
インストール
Vue.jsでは主に4つの方法でプロジェクトに追加する方法を公式サイトで紹介しています。 今回はCLIをつかってVueのWebサイトを構築しようと思います。
yarn global add @vue/cli
下記のコマンドでバージョが表示されていればインストール完了です。
vue -V
@vue/cli 5.0.4 # バージョンはインストールしたタイミングで異なると思います
Vueプロジェクトの作成
プロジェクトを作成するには vue create プロジェクト名で作成できます。
早速sampleというプロジェクトを作成してみましょう。
# まずプロジェクトを作成するディレクトリを作成
mkdir -p /var/www/html/vue_project
# 作成したディレクトリに移動
cd /var/www/html/vue_project
# プロジェクトの作成
vue create sample
どのバージョンを使うか聞かれるので、今回はVue 3を選択しましょう。 Vue 3にカーソルがある状態でEnterキーを押下すればプロジェクトが作成されます。 別バージョンを指定する場合は矢印キーの↑↓かvim同様にjとkでカーソルを移動させることが出来ます。
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
次に利用するpakage managerを聞かれるので、Yarnを選択しましょう。
Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
Use NPM
成功すると下記の内容が出力されるので、指示に従ってcdコマンドとyarnコマンドを実行してみましょう
success Saved lockfile.
✨ Done in 11.28s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project sample.
👉 Get started with the following commands:
$ cd sample
$ yarn serve
yarn serveを実行するとローカルサーバが立ち上がり、ブラウザから確認できるようになります。
DONE Compiled successfully in 6370ms 13:01:56
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.11.16:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
http://localhost:8080にアクセスして、Vueの画面が表示されていれば成功です。
最後に
今回の講座で覚えておいてもらいたいことは下記です。
- Vue CLIのインストール
- Vue プロジェクトの作成
次回はVueの書き方について書いていこうと思います。
おまけ
本当は公式には掲載されていないvnoを利用したインストール方法についてレクチャーしようと思ったのですが、通常の方法だと最新のDenoでvnoがインストール出来ないため、辞めました。 githubにインストール出来るように修正したものをコミットしておいたので、vnoに興味ある人はこちらを利用すれば一応vnoを試すことが出来ます。
deno install -f --allow-net --unstable https://raw.githubusercontent.com/it-for-survivor/vno/main/install/vno.ts