はじめに vue-cliで雛形のインストール（フロントエンド） サンプルページの追加 ビルドディレクトリの変更 Flaskのインストール（バックエンド） Flaskのサンプル作成 404ページの追加 APIの追加 終わりに はじめに 最近のWebアプリはReact.jsやVue.jsを使用したSPAが主流かと思いますが、データ取得のAPIを実装したりなど、サーバサイドの実装も必要になります。 自分はJavascriptに不慣れなのでサーバサイドはJavascriptではなくPythonを使いたかったので、Flaskと共存できる構成にしたかったのがきっかけです。 いろいろと探してみたらすでに先人がやっていました。 Full-stack single page application with Vue.js and Flask Single Page Apps with Vue.js and

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

はじめに MVVM フレームワーク初心者の筆者がVue.jsを使ってSPAを開発する際に考えたことを掲載していきます。本記事を通して、これからSPAを開発する人にとっての足掛かりとなれば幸いです。 対象読者 HTML, CSS, JavaScript の経験あり、また jQuery などのJSライブラリの使用経験あり React, Angular といった今時のJSフレームワークによるSPA開発未経験 Vue.js に入門したい Vue.js を使い始める場合、大きく分けて２つの方法があります。 <script> タグを使ってjQuery感覚で使用できる環境を整える vue-cli を使って単一ファイルコンポーネントに特化した環境を整える 環境を整える手間は同じぐらいなので、どちらでも良いと思いますが Vue.js の真価を発揮するなら vue-cli を使った方法を取るのが良いと思います

import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) // .envファイルから環境変数(トークン・URLを読み込ませる) var TOKEN = process.env.TOKEN var BASE_URL = process.env.BASE_URL export default new Vuex.Store({ actions: { get_event(context,param) { return axios.get(BASE_URL + param, { headers: { "Content-Type": "application/json", "Authorization": 'Bearer ' + TOKEN }, responseType: 'json',

今回作成したもの 見た目はBootstrapで作りました。 要件 作るのはフロント側のみ。内部の処理は考慮しない。 フォームは名字、名前・電話番号・メールアドレスの4つ 全ての項目を入力すると送信ボタンがアクティブになる 電話番号とメールアドレスは入力内容の形式もチェックする フォームの値はリアルタイムで変更を監視 ソースコード全体 <div class="form-container container" id="app"> <form> <div class="form-group"> <label for="exampleInputEmail1">名前</label> <div class="form-row"> <div class="col"> <input v-model="form.firstName" type="text" class="form-control" pla

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当

最近Nuxtでいろいろ作っているけど、無料で使える環境をいろいろ試してる。 いろいろメリデメあるけど、SPAならNetlify/SSRならHerokuがよさそう。 いままで試したものをまとめてみた。 ほしかったもの 主に開発してるのがCGM系のWebサービスなので、 動的なOGP画像などが設定できる(OGP芸) カスタムドメインが使える 日次のランキング集計などの定期実行ができる が、無料でできて、なるべく実装が楽で、そこまで遅くないのがうれしい。 試した5つのパターン 試したのは以下の5パターン。試してみた順で記載。 Nuxt(SSR) + Cloud Function 起動がかなり遅かった。。実装も大変なのでNG Nuxt(SPA) + Firebase Hosting 構築はかなり楽。ただ、OGP芸が大変でFunctionsが必要 Nuxt(SPA) + Netlify プレレンダリ

＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指

vue-diagramsとは 「vue-diagrams」はreact-diagramsにインスパイアされたダイアグラムを実装するライブラリです。 ノードを色を変更したり、ノード同士を連結したりすることができます。 インストール 以下のnpm、CDNを使ってインストールします。 npm npm install vue-diagrams CDN <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-diagrams.min.js"></script> gitリポジトリは以下から取得できます。 https://github.com/gwenaelp/vue-diagrams 導入手順 ダイアグラムを実装します。 1. ライブラリの取り込み （1）webpack等の場合 ※モジュール版は未検証です。 import