macOS上でVueプロジェクトを作成するまで
はじめに
最近、転職に向けて色々と遊びながらネタを作っています。 そこでふと「ブログはあるけど、ポートフォリオみたいなWebページ作りたい！」と思ったのです。 思い立ったが吉日、ということでWebページ作成にさっそく着手してみることにしました。 ついでに、せっかくならトレンドになっている技術に触れておこうということで、Vue.jsを使うことに。 それにあたって、まずは開発環境を用意しようということで、今回は手順を整理してみました。 と言っても、単にQiitaの記事にしたがって作業しただけですが、備忘録として残します。 前提として、Homebrewはインストール済とします。
Vue.jsとは
まず、Vue.jsが何なのか。 Vue.jsはJavaScriptのフレームワークの一種です。 他にはReactやAngularJSなどが同列のフレームワークとして挙げられるようですが、正直どのような違いがあるのかは全く理解していません。Vue.jsが何やら流行っているようなので、単純思考で使ってみることにしました。
Vue CLIとは
Vue CLIはその名の通り、Vue.jsを使用したプロジェクト構築をサポートするコマンドラインインターフェースだそうです。 後ほどコマンドを使用しますが、対話形式でプロジェクトの初期設定を実行できます。 他にもいろいろな役割があるとは思いますが、現時点ではVue.jsをさっぱり理解できていないので、慣れてきた頃に詳しく調べておきます。
Node.jsのインストール
それでは、環境の構築を始めましょう。 Vueプロジェクトの構築環境を整える際にnpmを使用するため、まずはNode.jsの環境を整備していきます。 これはありふれた話なので、先人の記事に従います。 qiita.com
nodebrewのインストール
他の言語と同じく、バージョンを気軽に変えられるようにしておこうということで、まずはnodebrewをインストールします。
$ brew install nodebrew
$ 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
問題なく、バージョンが表示されました。 OSバージョンアップに伴ってコマンドが打てなくなったりするケースがあるようなので、ついでにパスを通しておきます。 .bash_profileに下記のものを追記します。
# nodebrew export PATH=$HOME/.nodebrew/current/bin:$PATH
Node.jsのインストール
次に、Node.js本体をインストールしていきましょう。 まずは、配布されているNode.jsのバージョンを確認します。
$ nodebrew ls-remote
今回は、2018/12/26時点で最新のv11.5.0をインストールします。 バージョン指定する方法でも良いのですが、最新版を取ってくる場合は下記コマンドでインストールできるようです。
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v11.5.0/node-v11.5.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/jscmla1118/.nodebrew/src/v11.5.0/node-v11.5.0-darwin-x64.tar.gz
Warning: : No such file or directory
0.0%
curl: (23) Failed writing body (0 != 1056)
download failed: https://nodejs.org/dist/v11.5.0/node-v11.5.0-darwin-x64.tar.gz
と、ここでエラーが出てしまいました。 ダウンロードパッケージを格納するディレクトリを作ってあげましょう。
$ mkdir -p ~/.nodebrew/src
再度インストールコマンドを実行し、使用するバージョンを設定してやります。
$ nodebrew ls v11.5.0 current: none $ nodebrew use v11.5.0 use v11.5.0 $ nodebrew ls v11.5.0 current: v11.5.0
念の為、Node.jsとnpmコマンドが使えることを確認しましょう。
$ node -v v11.5.0 $ npm -v 6.4.1
大丈夫そうですね。これでNode.jsの設定は完了です。
Vue CLIのインストール
Node.jsの環境が整ったので、Vue環境の設定に入ります。 ここからは、手元にある参考書「基礎から学ぶVue.js」に基づきながら、設定を進めていきます。 早速ですが、Vue CLIをインストールしちゃいます。
$ npm install -g vue-cli npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) /Users/jscmla1118/.nodebrew/node/v11.5.0/bin/vue -> /Users/jscmla1118/.nodebrew/node/v11.5.0/lib/node_modules/vue-cli/bin/vue /Users/jscmla1118/.nodebrew/node/v11.5.0/bin/vue-init -> /Users/jscmla1118/.nodebrew/node/v11.5.0/lib/node_modules/vue-cli/bin/vue-init /Users/jscmla1118/.nodebrew/node/v11.5.0/bin/vue-list -> /Users/jscmla1118/.nodebrew/node/v11.5.0/lib/node_modules/vue-cli/bin/vue-list + vue-cli@2.9.6 added 239 packages from 206 contributors in 17.066s $ vue --version 2.9.6 $ which vue /Users/jscmla1118/.nodebrew/current/bin/vue
難なく、入りました。 ログを見ると、nodebrew管理下のディレクトリに入っているようです。 Node.jsのバージョンを切り替えたタイミングでおそらく使えなくなるような気がしますが、今のところは困らないので気にしません。
Vueプロジェクトを作ってみる
Vue環境が整ったので、お試しプロジェクトを作ってみましょう。
$ vue init webpack my-app ? Project name my-app ? Project description A Vue.js project ? Author Jessica Mellia <jscmla1118@gmail.com> ? 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? (recommended) npm ~ 省略 ~ gyp ERR! configure error gyp ERR! stack Error: Command failed: /usr/local/var/pyenv/shims/python2 -c import sys; print "%s.%s.%s" % sys.version_info[:3]; gyp ERR! stack pyenv: python2: command not found ~ 省略 ~ To get started: cd my-app npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack $ echo $? 0
プロジェクト作成にあたって、対話ベースで色々と質問されます。 今回はひとまず動くところまでを確認したいので、詳細は割愛します。 Vueプロジェクトの構成解説と併せて、別記事を書く予定です。
一通り質問に答えたらインストールが始まるのですが、なんか途中でPythonコマンドを実行していて、そこでエラー吐いてました。 一方でvueコマンドのリターンコードは0だったので、ひとまず無視して先に進めちゃいます。
サーバのテスト起動とアクセスチェック
さて、プロジェクトとしては構築が完了したので、さっそくサーバを起動してみます。 プロジェクト構築時のログにテスト起動のコマンドが記載されているので、そのまま打ちます。
$ cd my-app $ npm run dev > my-app@1.0.0 dev /Users/jscmla1118/Project/my-app > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting DONE Compiled successfully in 4423ms 22:54:54 I Your application is running here: http://localhost:8080
ビルドが実行され、サーバが起動されます。
指定の通り、localhost:8080をブラウザで開いてみます。
想定通りのWelcomeページが開きました。 が、何故かこれを開こうとするとブラウザが途端に重くなる...。 まぁ、目的は一応達成できたので、今回は良しとします。
おわりに
Vue.jsを使用したWeb開発環境を一通り整えました。 ここから、Vue.jsの勉強を進めつつ、Webページを構築していく予定です。 進捗に応じて、備忘録としてまた記事は書こうと思います。
