文系男子が日和るIT開発~IT知識なしで飛び込んだIT企業

文系男子だからIT企業に就職するなんて考えてもみませんでしたが、日和ながら日々くらいついています。

Vue.js+Vue CLIでWebアプリ環境構築

vue.jsとは(メリットや特徴など)

簡単に言うと、Java Script用のフレームワーク
jp.vuejs.org
vue.jsの特徴は公式サイトによると3つ。
開発者目線でも利用者目線でもメリットが大きそう。

1)親しみやすい
すでに HTML、CSS そして JavaScript を知っていますか?ガイドを読んで、すぐにモノ作りを開始しましょう!
2)融通が効く
ライブラリと完全な機能を備えたフレームワークの間で拡張できる徐々に採用可能なエコシステム
3)高性能
20KB min+gzip ランタイム
猛烈に速い Virtual DOM
最小限の努力で最適化が可能

実際に、多くの方の紹介で以下のようなメリットがあるといわれています。
・SPA(Single Page Application)の構築が容易
・学習コストが低い

ただ、JavaScript用のフレームワークは他にも存在しており、
それとの比較はhttps://jp.vuejs.org/v2/guide/comparison.html にも載っている。
 (なお、Netlifyでホスティングされているようです)
比較対象は、React、AngularJS、Riotなど。

vue.jsを使用してみる

筆者の環境ではnpmを使用しているため、nmでvueをインストールする。
$ npm install vue

インストール後にバージョン確認。
$ vue --version
@vue/cli 4.5.9

vueのファイル群は、node_modules\vue\dist に存在している。



Vue CLIを使ってみる

cli.vuejs.org

vue-CLIをインストールする。
$ npm install -g @vue/cli

プロジェクトの作成。
$ vue create app-name

後は、対話式でVueの環境構築をしていってみる。
最終的には、以下の設定で行いました。

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as:

が、
「Check the features」は「CSS Pre-processors」にチェックを入れ、
「BabelとESLintの設定」は「In dedicated config files」とする方が
後々のことを考えるとよかったかもしれない。

設定が終わったので、稼働確認を行ってみます。
$ app-name
$ npm run serve

記載されているURL(例: http://192.168.2.101:8080/ )をブラウザを立ち上げ実行する。
 (筆者の場合は、VS Codeを使用しているため、Crl+Clickで起動可)
下記のような画面が表示されればうまくいっていると思います。
f:id:dreamjourney:20201230003021p:plain