cidermitainaスマートフォン用の表示で見るcidermitainaフロントエンドエンジニアをやっています。頑張るから読んでほしい。bulmaで作るSPAプログラミングSPAを作ってみたいなあ、と思って実際に作ってみたのでメモです。実際にページを作成してSPAを試してみたかったのでcssフレームワークbulmaを使って作りました。こんな感じのページができます。webpackでできるVueアプリケーションの中身解説が多めです。bulmaの使い方は触れません。インストールVue.jsを使う環境を準備するためのコマンドラインインタフェースをインストールします。vue-cliでインストールを行うとVue.jsの環境をものすごく簡単に構築できます。アクセスするとサンプルが表示されます。buildをすると実際に動くソースが作られます。./dist/index.htmlになったみたいです。'<App/>'})./src/App.vueをコンポーネントとして登録しているようなので見てみます。</div></template><router-view/>?vue-routerライブラリがパスに応じて表示するコンポーネントを切り替えています。設定されているかというとsrc/router/index.jsです。}}で表示しています。scoped>の部分でスコープ宣言されてます。これによって、CSSが他のコンポーネントに影響を与えることなく分離し、CSSの管理がしやすくなります。中身を変更していく中身が理解できたところで、編集してページを作成していきます。1.ルーティングの設定まずはコンポーネントファイルを作成します。HelloWorld.vueをコピーして、必要なページ分作成します。今回はtopページ、aboutページ、noteページ、apiページ、contactページを作成します。top.vue次にルーティングの設定です。./router/index.jsを編集します。次にApp.vueを編集してリンクをつけていきます。</li></ul>これで仕組みは完成です。あとは、ページを作成していきます。3.bulmaのinstallbulmaをinstallします。--save-devApp.vueにbulma本体のimportの記述を追記します。#2c3e50;}</style>これでbulmaを使って簡単にページを作成できるようになりました。あとは、自由にbulmaを使ってページを作成していくだけです。今回はbulmaを使ってページを作る手順は省略しますが、公式を見れば詳しく書いてあるので簡単に作れちゃうはずです。bulma.io今回作成したページのソースを参考に貼っておきます。bulmaで作るSPATweet広告を非表示にする関連記事2019-01-26Vue.jsのリアクティブシステムみたいなのを作ってみた。(算出プロパティ1)お仕事でVue.jsを書くことが多いのですが、なんとなく中身どう...2018-05-14webpackについて丁寧に。AWSでサーバー構築してみました。(1)はてなブログをはじめよう!cidermitainaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。