Vue.jsのインストール方法について。
UbuntuとDockerの準備が終わって、やっとVue.jsのインストールに入りました。
気が付けば以下の記事を書いたのは1月のこと…！
なかなか回収できずここまで引き延ばしてしまいましたが、今回でできるだけ回収します！
復習として、Vue.jsをインストールする前に①Ubuntuをインストール②Docker構築が必要でした。
なぜかというと、仮想環境の中にVue.jsを入れることで、メモリのシンプル化や共有のしやすさというメリットがあるからです。
Vue.js自体はインストールが終われば、テキストエディタであるVisual Studio Codeなどからプログラムを書けるようになります。
dockerのコンテナのフォルダにVisual Studio Codeがかぶさっているイメージです。
Vue.jsをやるうえで、dockerを使うシーンとしては、①ライブラリをアップしたり消したりすること②Vue.cliを使うとき、になります。
つまり、1度Vue.jsをインストールすれば、あとはVisual Studio Codeで書いていくだけです。
では、早速Dockerに入ってVue.jsをインストールしましょう。
ですが、ここで注意。
2022年2月時点で、node.jsのバージョンが「v14.17.3」じゃないとVue.jsをインストールできません。
バージョンはVisual Studio Codeで設定できます。
まず、Windows Terminalを開きます（下のタブの検索で出てきます）。
＋を押してUbuntuを選択します。
そしたら緑と青のコードが出てくると思うので、Dockerをおいているフォルダまでcdで移動します。
cdコマンドは、ファイルやフォルダ移動で頻出します！
※途中まで書いてTabキーを押すと自動でフォルダ名を表示してくれます。
移動できたら以下のコマンドを書きます。
$ sudo service docker startそうするとパスワードを求められるので、Docker構築で設定したパスワードを入力します。
OKがでたら、以下のコードを。
$docker-compose build devこれでDockerのコンテナを立ち上げます。node.jsもこの中に作られます。
$docker-compose up -d dev
$docker exec -it <Dockerのコンテナ名> bashこれでDockerに入れます。
念のため、Versionを確認します。
#node --version「v14.17.3」でしたらOKなので次に進みます。
#npx install --save @vue/cliこれでVue.jsのインストールが始まります。
あとは待ちましょう。
途中で選択が求められたら、「Override」「[Vue 2] babel, eslint」を選べば良いと思います。
Vue2とVue3の違いについてはまた別の記事で･･･
インストールが成功すれば、Visual Studio Codeでworkspaceが新たに表示されます。
workspace> コンテナ名>src>componentsの下でVue.jsを書いていきます。
Visual Studio Codeを使うならば、拡張機能でVeturをインストールすることをおすすめします。
デフォルトだと、自動でコマンドの色分けをしてくれないので、見にくいです。
これでVue.jsの環境構築は終わりです！
長かった･･･し、環境構築について書かれている記事は散在していますし、経験者に聞きながらじゃないと難しいです。
確かに環境構築は最初だけしかやらないし、重要度は低いかもしれません。
ですが、環境構築を通して、様々な仕組みを把握できるし、今後進めていく上での知識の基盤を作っていくことが出来ると思います。
私自身のメモとしてこの記事を書きましたが、何か参考になるところがありましたら幸いです。
ここまで読んでくださりありがとうございました！
Visual Studio Codeについての記事はこちら↓