2. JavaScript
  3. Vue.js開発環境のまとめ！(Mac)【失敗談と成功談】
Vue.js開発環境のまとめ！(Mac)【失敗談と成功談】
javascript

Vue.js開発環境のまとめ！(Mac)【失敗談と成功談】

どうも、Tommy(@SitommyBlog)です。

Vue.jsを使った開発環境を作成したくいろいろ調べながら取り組みました。
たくさんエラーがありましたが、最終的には無事『Welcome to Your Vue.js App』をブラウザに表示できたので良かったです。

Vue.jsスタート画面

nodebrewのインストール

まず始めに、node.jsを『brew』と『nodebrew』を使ってインストールをします。

$ brew install nodebrew

打つと、こういったエラーが返ってきました。

Error: The following directories are not writable by your user:
/usr/local/include
/usr/local/lib

You should change the ownership of these directories to your user.
  sudo chown -R $(whoami) /usr/local/include /usr/local/lib

And make sure that your user has write permission.
  chmod u+w /usr/local/include /usr/local/lib

私は、初っ端つまずきました。

たからくん たからくん

何！？このエラー

じぃじ じぃじ

簡単に説明すると、書き込み権限がないというエラーじゃ。

とりあえず、上記コードのハイライトの部分を一つずつ打ち込み、その後にもう一度インストールコマンドを打ち込みました。

$ sudo chown -R $(whoami) /usr/local/include /usr/local/lib
$ chmod u+w /usr/local/include /usr/local/lib
$ brew install nodebrew

すると、違うエラーに変わりました。

Error: nodebrew 0.9.7 is already installed
To upgrade to 1.0.1, run `brew upgrade nodebrew`.
...
...

「アップグレードして」ってことかと思ったので、

$ brew upgrade nodebrew

すると、なんかうまく行けたので確認してみると

$ nodebrew -v
nodebrew 1.0.1
...
...
Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

なんとかここまでうまくいきました！
次に『インストール可能なnode.jsのリストを表示』させます。

$ nodebrew ls-remote

すると、結構長いリストが表示されます。

ここで、『version8.9.4をインストール』します。

$ nodebrew install-binary v8.9.4
$ nodebrew ls
$ nodebrew use v8.9.4

続けて、『nodeとnpmコマンドのパスを通す』と調べたら出てきたので言われたとおり打ち込んでいきました。

$ nodebrew setup
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

最後に、もう一度version確認しておきます。

$ node -v
v8.9.4
$ npm -v
5.6.0

無事、成功しました！

Vue-cliのインストール

ここから、本題の『Vue.jsの開発支援用コマンドをインストール』していきます。

私は、3.X系をインストールしたので、

$ npm install -g @vue/cli
$ vue --version
3.7.0

2.X系をインストールする場合は、

$ npm install -g @vue/cli-init

プロジェクトの作成

webpackをテンプレートとして設定して作成します。

# initコマンドで作成する（vue-cli2.x系）
$ vue init webpack app-test

? Project name app-test
? Project description A Vue.js project
? Author reflet <〇〇@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

#createコマンドで作成する（vue-cli3.x系）
$ vue create app-test

Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

「?」は部分は、質疑応答になります。

起動方法

# initコマンド (vue-cli2.x系)
$ cd app-test
$ npm run dev

# createコマンド (vue-cli3.x系)
$ cd app-test
$ npm run serve

すると、下記のようにローカルサーバーが立ち上がります。

...
...
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://(IPアドレスが表示される):8080/
...
...

『- Local』のURLにアクセスして『Welcome to Your Vue.js App』と表示されれば成功です！

Vue.jsスタート画面

ファイルの構成説明

無事ファイルがインストールされたので、ファイルの構成説明をしておきます。

├ gitignore
├ babel.config.js
├ node_modules
├ package-lock.json
├ package.json
├ public
│  ├ favicon.ico
│  └ index.html
├ README.md
└ src
   ├ App.vue
   ├ assets
   │  └ logo.png
   ├ components
   │  └ HelloWorld.vue
   └ main.js

まとめ

環境構築が一番の壁ですよね。
いろいろ調べてそのとおりにしても、うまくいかないことって結構あると思います。

そんな時は、失敗したことをメモ程度でもいいので書き起こしておくことが大切です。

失敗が多い人こそほど、エラー対応に強くなるからです。

今回は、私自身エラーがでて試行錯誤してやっと成功できたので記事にして記録しておこうと思いました。

エラー続きだと正直モチベーションが低下していきますが、成功したときの喜びは格段に上がります。
だから、やめられないし楽しいなっと私は思います。

javascript

Related

Ranking

目次