タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
src/ |- assets/ | |- sass/ | | |- abstracts/ | | | |- _functions.scss | | | |- _mixins.scss | | | |- _variables.scss | | | | | |- base/ | | | |- _reset.scss | | | | | |- layout/ | | | |- _grid.scss | | | | | |- themes/ | | | |- _default.scss | | | | | |- main.scss | | |- prepends.scss | ... | |- App.vue
久しぶりに、所得税・住民税・事業税・国保の計算をバージョンアップしたいなぁと考え、必要性はそこまでないですがPWA化してみます。 PWAをこのシステムに導入する利点とすれば、キャッシュを使ってオフライン対応ですね。今後は、Webプッシュも使ってようと考えてますが。 環境 Windows 10 Pro vue cli 3 Node 10.13 PWAとno PWAの違い まずは、PWAの指定有無で2つのプロジェクトを作成し、その差分からどのようにバージョンアップしていくか計画を立てます。 PWA対応プロジェクトの作成 vueプロジェクトを作成します。 [highlight_bash]vue create pwa[/highlight_bash] 最初にManualを選択し、あとはPWAを追加しただけです。 [highlight_basic]Vue CLI v3.4.1 ┌──────────
IE対応でこの記事に辿り着いてしまうことがないことを祈りつつも、もし問題にぶち当たった人のために残しておきます。 基本的にはドキュメントに従って行いました。 参考: Browser Compatibility 環境 @vue/cli: 3.3.0 vue: 2.5.21 はじめに IEで動かない場合は大概ES6+で書いているための構文エラーが原因です。 その解決策として、二つあります。 使っているモジュールで構文エラー or 自分のコード上で構文エラーだが、どのPolyfillを使えばわかる場合 なんかよくわからないけど構文エラーになる場合 1. 使っているモジュールで構文エラー or 自分のコード上で構文エラーだが、どのPolyfillを使えばわかる場合 使っているモジュールがES6などで書かれていて、IEでエラーになって動かなかったりします。 そんな時は原因になっているモジュールをトラ
SPA(シングルページアプリケーション)での使用例や記事は多く見られますが、MPA(マルチページアプリケーション)での利用例・情報は公式含めあまり多く見られませんので記録しておきます。 目的 そもそも、主流のSPAではなくMPAでVueプロジェクトを構成しようと思った理由は下記になります。(Vue.jsは学習中なので間違っている可能性もあり) Django REST frameworkとの連携を考えた際に、ルーティングをDjango側で制御することでSPAにおけるSEO対策を考えなくてよい。 プロジェクトのディレクトリを各ページごとに分けることで開発中の見通しがよくなるのではと考えた。 参考 以下の記事を参考にしました。 vue-cli 3.0で立ち上げたアプリに複数のエントリーポイントを用意する multiple pages in Vue.js CLI 事前知識 Vue CLI 3からは
概要 エントリーポイントを分けることで、コードの見通しは良くなり、余分なコードのダウンロードを避けることができます。 今回、vue-cli 3.0 で立ち上げた趣味アプリに複数のエントリーポイントを用意したのですが、 思いの外苦戦したので設定方法を共有したいと思います。 設定方法 vue-cli の2系までは webpack.config に entry を記述することで、複数のエントリーポイントに対応する事ができました。1 しかし、vue-cli 3.0でセットアップしたプロジェクトには webpack.config が生成されません。 その代わりに vue.config.jsに vue-cli の設定を記述することができます。2 この中で pages オブジェクトとして、複数のエントリーポイントを定義することができます。 この状態を multi-page mode と呼びます。 vue
はじめに Vue CLI 3 で作成したプロジェクトにてDevServer経由でWebSocket通信を行う方法について。Vue CLI 3で作成したプロジェクトを開発サーバで動作させる場合にはリクエストのプロキシ機能がある。 開発中はこれを使うことで、APIへのリクエストをリダイレクトしてくれる。 ただ、WebSocketで接続する場合に若干ハマったので、その内容について記事にします。 ※記事を書く際に動作確認をしていたら、ブラウザのキャッシュなのか何なのか、エラーが出たり出なかったりしたので、不要な設定や間違った設定があるかもしれないです。詳しい人がいたら教えてください。。。 結論 vue.config.jsに以下の設定を追加することで、http://localhost:4000/websocketのエンドポイントに対してプロキシが貼られる。 この状態でnew WebSocket(`w
こんにちは、かずやです。 先日SPAに関するざっくり記事を書きました。 今回は、SPAのフレームワークであるVue.jsを使っていた中で理解が追いつかず無駄に時間を食ってしまった事象に関するブログ記事です。 短めの予定。 Vue.jsの単一ファイルコンポーネントとWebpack Vue.jsの単一ファイルコンポーネントとは、.vueファイルにHTML, CSS, JavaScriptのコードをひとまとめにすることで、パーツをカプセル化・再利用可能な形にできるVue.jsの機能になります。 これ、非常に便利なわけですが、最終的にビルドを行なって単一のファイルに出力するわけですよ。.vueなんてブラウザは直接扱えませんから。 ということはバンドルツールが必要なわけで、WebpackやBrowserifyといったツールを使って、.vueファイルをバンドルします。 公式にもこう書いてありますよ。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue CLI 3でグローバルなSCSSを読み込ませる - Qiita
【Vue.js】Vue CLI 3のプロジェクトをPWA化する | kawadeblog
Vue CLI 3プロジェクトでIE対応する - Qiita
Vue CLI 3でSPAではなくMPA(複数エントリーポイント)のプロジェクトを作成する - Qiita
vue-cli 3.0で立ち上げたアプリに複数のエントリーポイントを用意する - Qiita
Vue CLI3のDevServerでWebSocketを使う - Qiita
Vue CLI 3系とWebpackの関係 | ぼくをつくるばしょ。
www.mizu.gr.jp
himitu7171.hatenablog.com
www.nikkansports.com
www.tokyo-np.co.jp
www.nikkansports.com
sorae.info