vue入れてみた
最近仕事で何かとvue.jsとtypescriptを使うなど、ワードを聞くなどすることが多いので、自習するために自分のPCにvueの環境を作ろうと思い立ちました。
vue.jsとは
Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 あなたが経験豊富なフロントエンド開発者で、 Vue.js と他のライブラリ/フレームワークを比較したい場合、他のフレームワークとの比較を確認してください。
なるほど、分からん!
という方のために、とりあえず一言で説明するとjavascriptのフレームワークです。 javascriptには色んなフレームワークがあるようなのですが、angularやreactなどと同じような扱いっぽいです。 でも他のフレームワークよりとっつきやすい、簡単!というのがウリのようです。
本当にざっくりとしか説明してないですが、とりあえずググればたくさん出てくると言うことで説明はここらにして、早速PCにvueを入れてみたいと思います。
手順
こちらを参考に進めてゆきます。 とりあえず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
上記コマンドの後にいくつか質問項目があります。
Vue build(Use arrow key)
Vue router
Use ESLint to lint your code
Setup unit tests
Setup e2e tests with Nightwatch
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をいじるなりして下さい。
自分もまだ環境立ち上げるところまでしか出来ていないのでそのうちいじって備忘録にしたくなったら記事書きます。