vue入れてみた

最近仕事で何かとvue.jsとtypescriptを使うなど、ワードを聞くなどすることが多いので、自習するために自分のPCにvueの環境を作ろうと思い立ちました。

vue.jsとは

Vue.js

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 あなたが経験豊富なフロントエンド開発者で、 Vue.js と他のライブラリ/フレームワークを比較したい場合、他のフレームワークとの比較を確認してください。

なるほど、分からん!

という方のために、とりあえず一言で説明するとjavascriptフレームワークです。 javascriptには色んなフレームワークがあるようなのですが、angularやreactなどと同じような扱いっぽいです。 でも他のフレームワークよりとっつきやすい、簡単!というのがウリのようです。

本当にざっくりとしか説明してないですが、とりあえずググればたくさん出てくると言うことで説明はここらにして、早速PCにvueを入れてみたいと思います。

手順

インストール — Vue.js

こちらを参考に進めてゆきます。 とりあえずgist使ってないので一旦引用でコマンド書いていきます。 そのうち修正します。

package.jsonのあるディレクトリで以下のコマンドを叩いてvueを入れてやります。 pacage.jsonの中身は自分の好きなようにしてください。

最新の安定版のvueを入れる

$ npm install vue

vue-cli をグローバルインストール

$ npm install --global vue-cli

"webpack" ボイラープレートを使用した新しいプロジェクトを作成する

ここのmy-projectは好きな名前(案件名)にする。

$ vue init webpack my-project

上記コマンドの後にいくつか質問項目があります。

  1. Vue build(Use arrow key)

  2. Vue router

  3. Use ESLint to lint your code

  4. Setup unit tests

  5. Setup e2e tests with Nightwatch

  6. Should we run npm install for you after the project has been created? (recommended)

基本的にvueのおすすめに倣って解凍していきました、ESLintも使いたいし、yarnでやりたいってことで私はおすすめから入れるものを変えたりしました。

諸々が済んだら環境を立ち上げてみる

$ cd my-project

$ npm install (yarn install)

$ npm run dev (yarn run dev)

これでlocalhost:8080が立ち上がればok! (8080で立ち上がるのいやだって方はindex.jsを変えてやると良いです。) 後は好きにApp.vueをいじるなりして下さい。

自分もまだ環境立ち上げるところまでしか出来ていないのでそのうちいじって備忘録にしたくなったら記事書きます。