インストール $ npm install vue-awesome-swiper 次にコーディングしていきます。 main.js import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global …

Extra semicolon 意味 解決方法 Missing space before function parentheses 意味 解決方法 Expected space(s) after "for" 意味 解決方法 Expected '===' and instead saw '==' 意味 解決方法 Trailing spaces not allowed 意味 解決方法 Expected space or…

こちらの記事に記載されているところまでの設定をしつつ、GitHub PagesでデプロイできなかったためにNetlifyを使用してデプロイができました。基本は以下のサイトが参考になりました。 Vue.js＋Netlifyで自動デプロイ | 基礎から学ぶ Vue.jsただしこちらの記…

vue-cliで作ったアプリをGithub Pagesにデプロイ - Qiita vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話 - Qiita このあたりを参考にVue Cli3で作成したファイルをGitHubPagesにてリリースしたかったのですが、真っ白な画…

Vue CLIでパッケージ導入した場合、CSSライブラリをどのように入れればいいのかについてのメモです。まずはターミナルに以下を入力 $ npm install --save aos@next次にsrc/main.jsにてAOSをインポート import AOS from 'aos' import 'aos/dist/aos.css'同じ…

$ npm install bootstrap-vue main.jsに追加 import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue)

ヘッダーやフッターにも使えるテクニックとして、Vue CLIで立ち上げたプロジェクト内にてあるコンポーネントの中に他のコンポーネントを表示する方法をメモしておきます。 src/views/Product.vue（表示する親側のコンポーネント） <template> <ProductPhoto /> </template> <script> import ProductPhoto f</script>…

前回の記事の流れで、今度はGoogle fonts反映の方法もついでに記述しておきます。 まずは使いたいフォントを選び、@importとSpecify CSSのfont-familyを取得してきましょう。 あとはApp.vueに以下のように記述。 <template> <div id="app"> </div> </template> <script> //省略 </script> <style> @import "./css/styles.css";…

ルートコンポーネントであるApp.vueのStyleタグに読み込みたい外部CSSファイルを指定しましょう。ファイルパスは以下を参考にしてください。 src/css/styles.css src/App.vue <template> <div id="app"> </div> </template> <script> //省略 </script> <style> /* ファイルパスに従って@importntの後にファイルパスを書き込む </style>…

SPAでサイトを構築する際に、APIのデータが入ったファイルから同一componentへ、同一の項目を渡したいというシチュエーションでは以下のような方法が役に立ちます。 具体的なシチュエーション 商品ページをSPAで作る際に、商品名や値段などは各商品1つでいい…

簡単な例を使って独立したVuexでアプリケーションjsファイルを画面に反映させるまでの手順を分解していきましょう。 store.jsの作成 storeインスタンスを/src/main.jsに登録 src/App.vueで使用してみる アロー関数によるインスタンスの参照方法について 参考…

以下で完了です。 $ npm install vuex babel -polyfill $ npm install --save-dev babel-polyfill babel -polyfill がついているのは、ES2015をVuexで使用する際にES2015に対応しないブラウザの欠陥を埋めるため。polyfill = ブラウザの欠陥（穴）を埋めるた…

Failed to compile Module not found: Error: Can't resolve 'babel-polyfill' in '/Users/.../node_modules/react-insta-stories/dist' 上記のエラーが起こった際には、 $ npm install --save-dev babel-polyfill で解決。 参考 Can't resolve 'babel-polyf…

// C9_PID単体の出力方法 $ echo $C9_PID //環境変数一覧の出力方法 $ env またCloud9のPreviewタブ > Preview Running Applicationで開くウィンドウのURLからもC9_PIDとRegionは確認可能です。

以下が解決に至った手順 $ node -v v10.7.0 $ nvm ls v8.16.0 -> v10.7.0 system default -> v10.7.0 node -> stable (-> v10.7.0) (default) stable -> 10.7 (-> v10.7.0) (default) $ nvm version-remote stable v12.7.0 $ nvm install stable Now using n…

Vue CLIを扱う際には、 node npm も同時に必要です。 ただしnodeをインストールすれば、npmも同時にインストールされることになっています。 node、npmがインストールされているか確認 インストール元 Vue CLIのインストール Vue CLIのバージョン確認 Vue CL…

LaravelとVue.js Vuex Vue Router学習用に使用したサイトや使える素材サイトをまとめています。情報あればコメントにお願いします〜！ チュートリアル Vue.js Vuex Vue Routerを使ってメッセージ送信機能 qiita.com 説明は割と端折られているところもありま…