search

East6 / SheetMetal-Painting

this product is homepage for SheetMetal-Painting(B to B)
https://sheetmetal-painting.herokuapp.com
0 stars 0 forks source link

画像を ~~決めた技術を使って~~ ，ホーム画面に表示する[3h][2h] #18

Open East6 opened 4 years ago

East6 commented 4 years ago
East6 commented 4 years ago

考える(やるべき)べきこと

East6 commented 4 years ago

ラフ案を実現するためにどうするか

East6 commented 4 years ago

ラフ案について ホーム画面(5:18)

今のところの理想は上の通りだけど， 最低限,画像を載せるところはやろう!!!

East6 commented 4 years ago

boostrapVueの本家ページ 上記のところをやるとできるそう?

シェルで実行

npm install vue bootstrap-vue bootstrap

packs/application.jsに追加

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

// import Bootstrap and BootstrapVue css files:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

上記だけだと動かない... (error)

try1 [原因かな?1] vue.jsの環境構築のhistroy を見ると,yarnファイルができている vue.jsはyarnで環境構築したのかな??? ターミナルで以下を実行

yarn add vue bootstrap-vue bootstrap

うーん，動かない...

East6 commented 4 years ago

このサイトをみると 実際は環境構築できているが，vue.jsの使い方がわかってない説ある...

いや,やっぱりboostrapvue の反応がない...

ぬまったから,BoostrapVueとは別の方針をやろう

East6 commented 4 years ago

一応他の案として, rails6のvueで,boostrap4.3を使う方法とかあるらしい

コピペしていったら,Vue側(app.vue)でboostrap4が使えるようになっていた!!!

この環境でやろう (コピペで,どういう環境になったのかよくわからんという闇はあるけど...)

cf. vue.jsをrailsで使うとき,Webpacker というツールを使っているっぽい, 　そして，このwebpacker compailing というのが出て,生産性が下がる 　- webpackerを使っての開発で生産性を上げる方法

East6 commented 4 years ago

vue.jsの書き方的なのを調べたら,コンポーネントが重要っぽい??よくわからんから，とりま,書き進めていく

boostrap4のレスポンシブな画像があったからそれを使う いや,ジャンボトロン(背景) を使おう!(ラフ案とは,変わるけどいいかな)

そして,文字が見にくかった(周りに色をつけよう!

cf.

East6 commented 4 years ago

[実際に,vueを記述してみて...]

.vueの