BootStrapVue導入
GWだし自粛中だしフロントエンド系な感じの何か作りたい。とりあえずvue.jsとBootstrap使いたい。
というとてもふわふわした考えでまずは環境構築。
環境
ubuntu 18.04
Visual Studio Code
インストール
やり方は何種類かあるみたいだけれど、インストーラーをダウンロードしてくるのが一番わかりやすい。.debだから正確にはパッケージと呼ぶべきなのかな。
ダウンロードしたらダブルクリックか apt install でインストール。
$ sudo apt install ./Downloads/code_1.44.2-1587059832_amd64.deb
アプリケーション一覧を見ると Visual Studio Code のアイコンができている。
拡張機能
Japanese Language Pack
日本語化。
インストールが完了すると右下に再起動のポップアップが現れるので、再起動すると日本語になる。
Vetur
Vue.jsのソースにハイライトをつけてくれたりエラー表示してくれたり。Vue.jsやるなら必須だと思う。
読み方は「ベター」で良いんだろうか…。
npm
Node.jsのパッケージ管理ツールみたいな説明をよく見るけれど、Node.jsに限らず大抵のWeb系ツールのインストールでお世話になる。
とにかくnpmが使えないと後のインストールがはかどらない。
１．aptでnodejs、npmをインストール
$ sudo apt install nodejs 39.6 MB を 22秒 で取得しました (1,802 kB/s) E: http://jp.archive.ubuntu.com/ubuntu/pool/main/p/python2.7/python2.7-minimal_2.7.17-1~18.04_amd64.deb の取得に失敗しました 404 Not Found [IP: 160.26.2.187 80] E: http://jp.archive.ubuntu.com/ubuntu/pool/main/p/python2.7/python2.7_2.7.17-1~18.04_amd64.deb の取得に失敗しました 404 Not Found [IP: 160.26.2.187 80] E: http://security.ubuntu.com/ubuntu/pool/main/l/linux/linux-libc-dev_4.15.0-91.92_amd64.deb の取得に失敗しました 404 Not Found [IP: 160.26.2.187 80] E: http://security.ubuntu.com/ubuntu/pool/main/g/gcc-8/libitm1_8.3.0-26ubuntu1~18.04_amd64.deb の取得に失敗しました 404 Not Found [IP: 160.26.2.187 80] E: http://security.ubuntu.com/ubuntu/pool/main/g/gcc-8/libatomic1_8.3.0-26ubuntu1~18.04_amd64.deb の取得に失敗しました 404 Not Found [IP: 160.26.2.187 80] E: http://security.ubuntu.com/ubuntu/pool/main/g/gcc-8/liblsan0_8.3.0-26ubuntu1~18.04_amd64.deb の取得に失敗しました 404 Not Found [IP: 160.26.2.187 80] E: http://security.ubuntu.com/ubuntu/pool/main/g/gcc-8/libtsan0_8.3.0-26ubuntu1~18.04_amd64.deb の取得に失敗しました 404 Not Found [IP: 160.26.2.187 80] E: http://security.ubuntu.com/ubuntu/pool/main/g/gcc-8/libmpx2_8.3.0-26ubuntu1~18.04_amd64.deb の取得に失敗しました 404 Not Found [IP: 160.26.2.187 80] E: http://security.ubuntu.com/ubuntu/pool/main/g/gcc-8/libquadmath0_8.3.0-26ubuntu1~18.04_amd64.deb の取得に失敗しました 404 Not Found [IP: 160.26.2.187 80] E: いくつかのアーカイブを取得できません。apt-get update を実行するか --fix-missing オプションを付けて試してみてください。
エラーが出てしまったけれども一旦スルー。apt-get updateしてからnpmをインストール。
$ apt-get update $ sudo apt install npm $ nodejs -v v8.10.0 $ npm -v 3.5.2
aptでインストールできるバージョンはNode.jsが8.10.0、npmが3.5.2。
実際npmを使うに当たってバージョンが古いことで何が困るのかはよくわかっていない。が、とりあえず最新版をインストールしておくのが間違いないと思う。
２．nをインストール
nはnodeのバージョン管理をするものらしい。
$ sudo npm install -g n /usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n /usr/local/lib └── n@6.5.1
/usr/local/bin/n にシンボリックリンク作ったよ、向き先は/usr/local/lib/node_modules/n/bin/n だよ、nのバージョンは6.5.1だよ。とのこと。
３．nから最新のNode.jsとnpmをインストール
最新バージョンをインストールするn stable と長期サポート版をインストールするn lts がある。LTSにしてみた。
$ sudo n lts installing : node-v12.16.3 mkdir : /usr/local/n/versions/node/12.16.3 fetch : https://nodejs.org/dist/v12.16.3/node-v12.16.3-linux-x64.tar.xz installed : v12.16.3 (with npm 6.14.4) Note: the node command changed location and the old location may be remembered in your current shell. old : /usr/bin/node new : /usr/local/bin/node To reset the command location hash either start a new shell, or execute PATH="$PATH"
apt install でインストールしたnode（old）が /usr/bin/node にいて、n でインストールしたnode（new）が /usr/local/bin/node にいるらしい。
インストールしたらバージョン確認！…が、そんなものはないと言われてしまった。
$ npm -v bash: /usr/bin/npm: そのようなファイルやディレクトリはありません
ターミナルを閉じて開き直してみたら普通に見れた。
$ npm -v 6.14.4 $ node -v v12.16.3 $ n --version 6.5.1
４．aptでインストールしたNode.jsとnpmをアンインストール
紛らわしいのでaptでインストールした方のNode.jsとnpmは削除しておく。
$ sudo apt remove nodejs $ sudo apt remove npm
Vue CLI
Vue.jsでの開発環境構築を支援してくれるツール。
インストールはnpmでサクッとできる。バージョン確認は --version で。
$ sudo npm install -g @vue/cli $ vue --version @vue/cli 4.3.1
Vue CLIの説明はこちらが分かりやすかった。
qiita.com
BootStrapVue
Vue.jsのためのBootStrap。とてもわかりやすい名前。
プロジェクト作成
まずはVue CLIプロジェクトを作成。 sample の部分がプロジェクト名（ディレクトリ名）になるのでお好みで。
$ vue create sample
特にこだわりがないのでdefaultを選択。
TypeScriptやVuexなど使いたいものがある場合はmanuallyを選択して設定する。（よくわかってない）
次に、プロジェクト内にBootStrapVue と BootStrap をインストールする。
$ cd sample
$ npm install bootstrap-vue bootstrap
とりあえず実行してみる。
$ npm run serve
Vue CLI のサンプルが表示される。
使ってみる
必要なファイルをインポート。main.jsを下記のようにする。
import Vue from 'vue' import App from './App.vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.config.productionTip = false Vue.use(BootstrapVue) Vue.use(IconsPlugin) new Vue({ render: h => h(App), }).$mount('#app')
サンプルページにボタンを表示してみる。公式ページの Components → Button のソースをコピペ。
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js App" /> <!-- BootStrapVueの書き方 --> <div> <b-button variant="primary">Primary</b-button> <b-button variant="secondary">Secondary</b-button> <b-button variant="success">Success</b-button> <b-button variant="danger">Danger</b-button> <b-button variant="warning">Warning</b-button> <b-button variant="info">Info</b-button> <b-button variant="light">Light</b-button> <b-button variant="dark">Dark</b-button> </div> <br /> <!-- BootStrapの書き方 --> <div> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> </div> </div> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; export default { name: "App", components: { HelloWorld } }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
こうなる。
