Vue.jsは、UI（ユーザインタフェース）開発用のJavaScriptフレームワークの一つです。シンプルな設計と学習難易度が易しいことから、人気の高いフレームワークです。
今回は、そのVue.jsのインストール方法を紹介します。Vue.jsのインストールにはNode.js（正確にはnpm）のインストールが必要なので、Node.jsのインストール方法も同時に紹介します。
インストールからHello World表示までの流れはこちらです。
- Homebrewをインストールする
- nodebrewをインストールする
- Node.jsをインストールする
- Vue.jsをインストールする
- Hello Worldを表示する
Homebrewのインストール
まずはHomebrewをインストールします。Homebrewとは、macOSまたは、Linux用のパッケージマネージャーです。詳しくはHomebrewの公式サイトを参照してください。
以下のコマンドをターミナルで実行して下さい。すでにインストールされている場合は、省略して下さい。
|
1 |
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" |
完了したら、インストールされているかを確認します。
|
1 2 3 |
$ brew -v Homebrew 3.0.2 Homebrew/homebrew-core (git revision ce25d; last commit 2021-02-25) |
nodebrewのインストール
次にnodebrewをインストールします。以下のコマンドを実行して下さい。
|
1 |
$ brew install nodebrew |
同じく、インストールされたかの確認を行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$ nodebrew -v nodebrew 1.0.1 Usage: nodebrew help Show this message nodebrew install <version> Download and install <version> (from binary) nodebrew compile <version> Download and install <version> (from source) nodebrew install-binary <version> Alias of `install` (For backword compatibility) nodebrew uninstall <version> Uninstall <version> nodebrew use <version> Use <version> nodebrew list List installed versions nodebrew ls Alias for `list` nodebrew ls-remote List remote versions nodebrew ls-all List remote and installed versions nodebrew alias <key> <value> Set alias nodebrew unalias <key> Remove alias nodebrew clean <version> | all Remove source file nodebrew selfupdate Update nodebrew nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version nodebrew exec <version> -- <command> Execute <command> using specified <version> Example: # install nodebrew install v8.9.4 # use a specific version number nodebrew use v8.9.4 |
Node.jsのインストール
Node.jsのインストール前に、インストール用のディレクトリを作成します。このディレクトリが用意されていないとエラーになってしまうので、注意して下さい。
|
1 |
$ mkdir -p ~/.nodebrew/src |
ls-remoteコマンドを入力すると、インストール可能なバージョン情報が表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$ nodebrew ls-remote v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6 v0.1.0 v0.1.1 v0.1.2 v0.1.3 v0.1.4 v0.1.5 v0.1.6 v0.1.7 v0.1.8 v0.1.9 v0.1.10 v0.1.11 v0.1.12 v0.1.13 v0.1.14 v0.1.15 v0.1.16 v0.1.17 v0.1.18 v0.1.19 v0.1.20 v0.1.21 v0.1.22 v0.1.23 v0.1.24 v0.1.25 v0.1.26 v0.1.27 v0.1.28 v0.1.29 v0.1.30 v0.1.31 v0.1.32 v0.1.33 v0.1.90 v0.1.91 v0.1.92 v0.1.93 v0.1.94 v0.1.95 v0.1.96 v0.1.97 v0.1.98 v0.1.99 v0.1.100 v0.1.101 v0.1.102 v0.1.103 v0.1.104 v0.2.0 v0.2.1 v0.2.2 v0.2.3 v0.2.4 v0.2.5 v0.2.6 省略 io@v1.0.0 io@v1.0.1 io@v1.0.2 io@v1.0.3 io@v1.0.4 io@v1.1.0 io@v1.2.0 io@v1.3.0 io@v1.4.1 io@v1.4.2 io@v1.4.3 io@v1.5.0 io@v1.5.1 io@v1.6.0 io@v1.6.1 io@v1.6.2 io@v1.6.3 io@v1.6.4 io@v1.7.1 io@v1.8.1 io@v1.8.2 io@v1.8.3 io@v1.8.4 io@v2.0.0 io@v2.0.1 io@v2.0.2 io@v2.1.0 io@v2.2.0 io@v2.2.1 io@v2.3.0 io@v2.3.1 io@v2.3.2 io@v2.3.3 io@v2.3.4 io@v2.4.0 io@v2.5.0 io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1 |
最新バージョンをインストールする場合は、以下のコマンドを実行して下さい。
|
1 2 3 4 5 6 |
$ nodebrew install-binary latest Fetching: https://nodejs.org/dist/v15.10.0/node-v15.10.0-darwin-x64.tar.gz ######################################################################## 100.0% Installed successfully |
lsコマンドで、インストールされたか確認を行います。
|
1 2 3 4 |
$ nodebrew ls v15.10.0 current: none |
current: noneとなっている場合は、使用するバージョンを指定する必要があります。
|
1 2 |
nodebrew use v15.10.0 use v15.10.0 |
もう一度バージョン確認を行うと、current：に値が代入されています。
|
1 2 3 4 |
$ nodebrew ls v15.10.0 current: v15.10.0 |
最後に、Node.jsのパスを通します。
|
1 |
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile |
パスを通したことで、nodeコマンドが使用できるようになりました。Node.jsがインストールされたかの確認を行います。
|
1 2 |
$ node -v v15.10.0 |
Node.jsがインストールされると、npmも同時にインストールされます。npmとは、Node Package Managerの略で、その名の通りパッケージ管理ツールです。Vue.jsはこのnpmを使用してインストールを行います。
|
1 2 |
$ npm -v 7.5.3 |
Vue.jsのインストール
いよいよ、Vue.jsのインストールです。Vue.jsのインストールはVue CLIを使用します。Vue CLIとは、その名の通り、Vue専用の コマンドラインインターフェースのことです。公式ドキュメントを参考に、以下のコマンドを実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$ npm install -g vue-cli npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli added 236 packages, and audited 237 packages in 15s 7 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New minor version of npm available! 7.5.3 -> 7.6.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.6.0 npm notice Run npm install -g npm@7.6.0 to update! npm notice |
これで、Vue.jsのインストールは完了です。インストールされたかの確認を行います。
|
1 2 |
$ vue -v 2.9.6 |
次に、プロジェクトを作成します。initコマンドを実行するといくつか質問がされますが、基本YesでOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$ vue init webpack my-project ? Project name my-project ? Project description A Vue.js project ? Author my-funs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recom mended) npm |
作成したプロジェクトに移動し、実行します。
|
1 2 |
$ cd my-project $ npm run dev |
ブラウザで「http://localhost:8080/」にアクセスして以下のような画面が表示されればOKです。
また、実行中止のコマンドは「ctrl + c」です。
Hello Worldを表示する
それでは、インストールしたVue.jsを使ってHello Worldを表示させます。「http://localhost:8080/」で表示させている実ファイルは「my-project/src/components/HelloWorld.vue」です。このファイルを開き、91行目の「msg: 'Welcome To Your Vue.js App'」を「msg: 'Hello World'」に書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li> <a href="https://vuejs.org" target="_blank" > Core Docs </a> </li> <li> <a href="https://forum.vuejs.org" target="_blank" > Forum </a> </li> <li> <a href="https://chat.vuejs.org" target="_blank" > Community Chat </a> </li> <li> <a href="https://twitter.com/vuejs" target="_blank" > Twitter </a> </li> <br> <li> <a href="http://vuejs-templates.github.io/webpack/" target="_blank" > Docs for This Template </a> </li> </ul> <h2>Ecosystem</h2> <ul> <li> <a href="http://router.vuejs.org/" target="_blank" > vue-router </a> </li> <li> <a href="http://vuex.vuejs.org/" target="_blank" > vuex </a> </li> <li> <a href="http://vue-loader.vuejs.org/" target="_blank" > vue-loader </a> </li> <li> <a href="https://github.com/vuejs/awesome-vue" target="_blank" > awesome-vue </a> </li> </ul> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Hello World' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> |
再度「http://localhost:8080/」に接続すると、「Welcome To Your Vue.js App」の表記から「Hello World」に変わりました。
以上で完了です。お疲れ様でした！
おすすめ記事はこちら！
-
-
おすすめ【5分簡単】Go言語をインストールしてHelloWorldを表示する
こんにちは！近年、多くのプログラミング言語の中で「稼げる言語」として人気が爆発しているのは、Googleが開発したGo言語です。本記事では、そのGo言語のインストール方法と、実際にプログラムを動かして、「Hello World」を表示するまでの方法を、丁寧に紹介していきます。
続きを見る