Node.jsとnpmのインストール
Node.jsが必要なので、まだインストールしていない方は公式サイトからインストールしてください。
本記事ではNode.jsのバージョンは 11.0.0 を使用しています。
バージョンはターミナルを開いて、
node -vNode.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のロゴが入ったサンプルページが表示されます。