Vue.js
JavaScriptのフレームワークです。
もくもく会をしていたので、環境を整えて学習していきます。
Vue.jsのいいとこは？
vue.js公式サイトに記載のある通り、「親しみやすく」、「融通が効いて」、「高性能」とあります。まさにこれがいいとこだと思います。
フロントエンド開発においてデータを表示と分離して開発する事が行えるので開発しやすいことはメリットです。
また、vueは様々なライブラリが充実しています。
昨今では、気軽にjQueryの実装ができるために、開発者に依存した書き方で、物によってはコードが分かりづらい時があります。
vue.jsなら、書き方の決まりによって、自分も他者も分かり易くなります。
環境の準備をしたいと思います。
NPMを用いたVueのインストール(Mac OS)
NPM(Node Package Manager)を利用すると、とても便利です。
NPMでVueをインストールするのに、Node.jsがインストールされてる必要があります。
Node.jsのバージョンを確認
$ node -v
もしNode.jsがインストールされていなければ....
Homebrewのインストールをしてから、インストールをしましょう。
Homebrewがインストールされていたら、nodebrewからインストールしてください。
(インストールしてなければ)Homebrewのインストール
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Homebrewのバージョンを確認
$ brew -v
brewコマンドが使えていなければ、Homebrewはインストールできていないです。
Node.jsのバージョン管理のためにnodebrewをインストール
$ brew install nodebrew
nodebrewコマンドで確認
$ nodebrew -v
Node.js安定版のインストール
node.jsをインストールする時、最新版や安定版など、バージョン指定でインストールが可能ですが、ここでは安定版のインストールを行います。
nodebrew install-binary stable
Pathを通す(nodeコマンドが使えるようにします)
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
vue-cliのインストール
Vue.jsを使う環境を準備するためのコマンドラインインターフェースをインストールします。
npm install -g @vue/cli
プロジェクトを作成する
vue create vue_lesson2
vs codeを立ち上げる
code .
サーバーを立ち上げる
npm run serve
ローカルで見れるようになります。
http://localhost:8080/
次回以降、Vue.jsの中身について学習していきます(>_<)!