今回はVue.jsをまだ触ったことが無い方が開発環境の構築を行い、Hello Worldを表示できるようにするところまでを紹介します。

Node.jsとnpmのインストール

Node.jsが必要なので、まだインストールしていない方は公式サイトからインストールしてください。
本記事ではNode.jsのバージョンは 11.0.0 を使用しています。
バージョンはターミナルを開いて、

node -v
Node.jsがインストールされているとnpmを使用することができますので、こちらもバージョンを確認しておいてください。
npm -v
本記事ではnpmのバージョンは 6.4.1 を使用しています。

Node.jsのアップデートはnをインストールするとアップデートが簡単になります。

npm install -g n

これでNode.jsの安定版がインストールされます。
基本的には安定版で問題ありません。

sudo n stable

バージョンを変えたい場合はバージョンを指定するだけで切り替えることができます。

sudo n 10.0.0

npmのアップデートは

npm update -g npm

作業ディレクトリの準備

作業するディレクトリを適当に作ります。
ここでは仮にデスクトップにsampleディレクトリを作成して進めます。

cd ~/desktop
mkdir sample
これでsampleディレクトリがデスクトップに作成されました。
Linuxコマンドじゃなくても特に問題はありませんが、少し慣れておいたほうがいいと思います。

Vue.js開発環境の構築

それではいよいよVue.js開発環境の構築へ移ります。
cdコマンドでsampleディレクトリに移動しましょう。

cd ~/desktop/sample

vue-cliのインストール

vue-cliをインストールすると簡単に開発環境が構築することができるようになるので、まずはvue-cliをインストールしていきます。

npm install -g @vue/cli
パーミッションエラーが出る場合はsudoを付けて実行してください。
sudo npm install -g @vue/cli

インストールができたかチェック。本記事のvue-cliはバージョン 3.0.5 です。

vue -V

Node.jsのバージョンが 8.9.0 以下だと、vue-cliのバージョンが3以上に上がりません。
2系でも動きますが、3系を使いたい方はNode.jsのバージョンを上げて試してみてください。

vue-cliのバージョンアップは一旦アンインストールしてからインストールし直します。

npm uninstall -g vue-cli
npm install -g @vue/cli

vueコマンドの実行

vueコマンド1つで環境構築ができます。
***を作成するディレクトリ名に変更して実行してください。

vue init webpack ***
例として、ここではvue-sampleとして実行します。
vue init webpack vue-sample
すると、いくつか質問が出てきます。
全部Enterで飛ばしてOKです。
? Project name
? Project description
? Author
? Vue build
? Install vue-router?
? Use ESLint to lint your code?
? Pick an ESLint preset
? Set up unit tests
? Pick a test runner
? Setup e2e tests with Nightwatch?
? Should we run `npm install` for you after the project has been created? (recommended)

Hello World

これで準備が整いました。
とりあえず

npm run dev
でdevを実行してみましょう。
処理が終わると最後に
Your application is running here: http://localhost:8080
と表示されます。
http://localhost:8080にアクセスすると、Vue.jsのロゴが入ったサンプルページが表示されます。

SNSでシェアする:

大場 正樹 (Masaki Oba)

Web制作会社に3年ほど勤務し、2014年1月にフリーランスとして「Cleysense」を立ち上げ、Webデザイン・DTPデザイン・フロントエンド・バックエンド・ディレクション・コンサルティングなど、幅広く活動中。