Hamamatsu.js #8 Vueハンズオン フォロー記事 その１(2. install Bootstrapまで)
2019年11月9日に開催された、Hamamatsu.js #8 前半の Vueハンズオン のフォロー記事です。
ハンズオンの資料はイベントページよりご覧ください。
https://github.com/jacoyutorius/vue-chat-app
0. 事前準備
Node.jsのインストール
Node.jsはこちらから https://nodejs.org/ja/
OSごとのバイナリをダウンロードしてインストールするか、macの方はHomebrew https://brew.sh/index_ja でインストールしてください。
Nodeはv12.12以上であればOKです。
$ node -v
v12.12.0以前、Homebrewでインストールした方はバージョンアップしてください。
$ brew upgrade nodeVue CLI のインストール
https://cli.vuejs.org/ から Vue CLI をインストールしてください。
$ npm i -g @vue/cli※macでグローバルにインストールしたライブラリを読みに行かない時はこちらをお試しください。「Node.js グローバルインストールでハマった」
Vue.js devtools のインストール
Chrome拡張のVue.js devtools をインストールしてください。 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja
1. create vue project
適当なディレクトリを作成して、vue createします。
$ vue create vue-chat-apppackage.json
{
"name": "vue-chat-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.3.2",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}ローカルサーバーの起動
$ npm run serveブラウザから http://localhost:8080/ にアクセスして確認します。
eslintConfig の設定追加
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
2. install Bootstrap
Bootstrapをインストールします。
$ npm i --save-dev bootstrap-vue bootstrap core-js
> core-js@3.4.0 postinstall /Users/kazoo/local/vue-hands-on/hamamatsu-js-vol8/vue-chat-app/node_modules/core-js
> node postinstall || echo "ignore"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> bootstrap-vue@2.0.4 postinstall /Users/kazoo/local/vue-hands-on/hamamatsu-js-vol8/vue-chat-app/node_modules/bootstrap-vue
> opencollective || exit 0
;iiiiiiiiiiSSSSSSSSiiiiiiiiii;
.rXXXXXXXXXrrrrrrrSXXXXXXXXXr.
:iXXXXXXXX2. ;;;;, r3XXXXXXXi;
,rSSSSSXXXX2..sSSi: r3XXXSSSSSr,
,siiiiS2XX2. :;;:,.rXX2Siiiis,
,riiiii2X2..5XXXi .22iiiiir,
.riiiii22..::::,,r2iiiiir.
.riiiii5SSiiiiS22iiiiir.
;iiiii5X3333X5iiiii;
:iiiiiSXXXXSiiiii:
:siiiiSXXSiiiis:
,siiiiiiiiiis,
.riiiiiiiir.
.riiiiiir.
.;iiii;.
;ii;
::
Thanks for installing bootstrap-vue 🙏
Please consider donating to our open collective
to help us maintain this package.
Number of contributors: 237
Number of backers: 51
Annual budget: $1,654
Current balance: $1,653
👉 Donate: https://opencollective.com/bootstrap-vue/donate
npm notice save core-js is being moved from dependencies to devDependencies
npm WARN bootstrap@4.3.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
+ core-js@3.4.0
+ bootstrap@4.3.1
+ bootstrap-vue@2.0.4
added 8 packages from 15 contributors, updated 1 package and audited 24424 packages in 15.485s
found 0 vulnerabilitiessrc/main.js を変更
変更前
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')変更後
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
src/App.vue 修正
変更前
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</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>変更後
<template>
<div id="app">
<b-container>
<b-jumbotron header="BootstrapVue" lead="Bootstrap v4 Components for Vue.js 2">
<p>For more information visit our website</p>
<b-btn variant="primary" href="https://bootstrap-vue.js.org/">More Info</b-btn>
</b-jumbotron>
<b-form-group
horizontal
:label-cols="4"
description="Let us know your name."
label="Enter your name"
>
<b-form-input v-model.trim="name"></b-form-input>
</b-form-group>
<b-alert variant="success" :show="showGreeting">Hello {{ name }}</b-alert>
</b-container>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
name: ''
};
},
computed: {
showGreeting() {
return this.name.length > 4;
}
}
}
</script>
git commit
ここまでをコミットしておきます。
$ git status
On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: package-lock.json
modified: package.json
modified: src/App.vue
modified: src/main.js
no changes added to commit (use "git add" and/or "git commit -a")
$ git add .
$ git status
On branch master
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
modified: package-lock.json
modified: package.json
modified: src/App.vue
modified: src/main.js
$ git commit -m "install Bootstrap"
[master 1eca000] install Bootstrap
4 files changed, 110 insertions(+), 32 deletions(-)
rewrite src/App.vue (87%)その２に続きます。