インターン生がVueのテストコードをJestで書いたら5000行になった話。 - Qiita
ある日CTOから僕に勅命が下りました。 テストコードを作成せよ... と、 環境はVue + Jestということで色々調べてみたものの、種類が多すぎる... ・https://vue-test-utils.vuejs.org/ja/guides/ ・https://lmiller1990.github.io/vue-testing-handbook/ja/#vue-js%E3%83%86%E3%82%B9%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89%E3%83%96%E3%83%83%E3%82%AF ・https://jestjs.io/docs/ja/testing-frameworks どれみればええねん。 すでにJest-test-Vueのようなライブラリが入っていたのでこれを使うことにしました。 要件の設定 とりあえず、動くテストコードをとのお達しを受
Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 - Qiita
最新版=>フロントエンドのテストについて考える 現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
もうprettierで消耗したくない人へのvueでのeslint設定 - クソ雑魚エンジニアのメモ帳
タイトル通り。vscodeとvuejsを使ってのlintの設定をprettierなしでやってみた。 tl;dr 環境 問題点 手順 .vueの構文チェックその１ vscode上での自動フォーマット .vueの構文チェックその２ rulesをカスタマイズ <template>のカスタマイズ <script>をカスタマイズ まとめ。 おまけ tl;dr 対象ファイルとpackage.jsonと.eslintrc.jsの対応表👇 構文チェック・自動フォーマット 対象ファイル npmライブラリ(package.json) .eslintrc.jsでのextends .vue(<template>) eslint-plugin-vue plugin:vue/recommended .vue(<script>) eslint eslint:recommended . js eslint eslint
eslint-plugin-vue を作っている話 - Qiita
4日朝に Vue.js #1 アドベント カレンダーを見たら3日のぶんが空いていたので急遽書きました。 私は .vue ファイルを静的検証するための ESLint Plugin を開発しています。 eslint-plugin-vue ( ESLint についてはこちら: ESLint 最初の一歩 ) このプラグインを使うと、.vueファイルのテンプレート部分について、リアルタイムで構文エラーを検出したり、v-bind 等のディレクティブの使い方が間違っていたときに指摘してくれたりします。また、公式の Vue.js スタイルガイド に沿うように自動成形することもできます。 🏃 試してみる eslint-plugin-vue を簡単に試してみるために、オンライン デモがあります (1度アクセスすれば、以後はオフラインでも使えます)。ここでコードを入力して、どのようなエラーが出るのか、どのよう
【Vue.js】ざっくり紹介、Vueプラグインの書き方
おひさしぶりです、橋本です。 みなさんVue書いてますか！？ 自分はここ数年ひたすらVueで開発しています。 いやーいいですよね、Vue。 なんか知らんけど良いんですよね。手に馴染むというか。 大好きVue。 ところで、Vue のプラグインってみなさん使ったことありますか？ vue-router や vuex など何かしらのプラグインを使ったことがある人がほとんどだと思います。 では、プラグインを「作った」ことのある人、どれぐらいいますか？ なんとなく難しそうというイメージで作ったことないって人、結構いるんじゃないでしょうか？？ 実は Vue のプラグインを作るのってすごく簡単なんです。 今日はその作成方法をざっくりご紹介したいと思います。 Vue のプラグインを作成する方法なんですが、 「install メソッドを持つオブジェクトを定義する」 ただこれだけなんです。 定義したプラグインは
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (1) イントロダクション | Hypertext Candy
はじめに 対象者 JavaScript / Vue.js / PHP / Laravel の入門レベルの方、入門書を読んだあとに「何か作ってみたい」という方が、それぞれの知識を組み合わせて本格的なアプリケーションを開発できるようになることを目指しています。 上記のいずれかの知識がまったくない状態だとこのチュートリアルの内容は少し難しいかもしれません。チャレンジするのもいいですが、参考文献に挙げた市販の入門書か、関連記事のチュートリアルを先に読んでおくと理解しやすいと思います。 学べること Vue.js と Laravel を組み合わせて SPA を構築する方法 SPA におけるクッキー認証と CSRF 対策 Vue Router を使用した画面遷移 Vuex を使用した状態管理 Vue でのタブやローディング UI の表現 SPA におけるエラー処理 扱わないこと デザインと CSS コー
WebフレームワークでWebpackを使ってみよう〜Django＋Webpack+Vue.js編〜 - Believe you can
Webpackの第2弾です 前回はLaravelでしたが今度はDjangoでWebpackを使ってみようと思います 作るものは前回同じVue.jsのツリーです jp.vuejs.org 環境 以下の環境で動かしました Python@3.6.2 Django@2.0.2 Webpack@3.11.0 Vue@2.5.13 webpack-bundle-tracker@0.2.1 css-loader@0.28.10 style-loader@0.20.2 仮想環境とDjangoのインストール 以下のコマンドで環境とDjangoのインストールを行います python3 -m venv env source env/bin/activate pip install django pip install django-webpack-loader プロジェクトを作ります 起動時にワーニングが出てし
vue.jsでCRUD #1【Djangoアウトプット】
この記事は 約 2分41秒 で読めます。 今どきはNuxt.jsなどでフロントエンドを作って、DjangoでAPIを実装するという方法が主流かと思いますが、Djangoのテンプレートにvue.jsを組み込んでみたいと思います。 このログは、こちらのレポジトリでDjango+Dockerセットアップ後の環境を想定しています。 モジュールインストール DjangoでAPIを実現するためのモジュールをインストールします。 make cmd_django pip install djangorestframework pip install django-filter 一旦、djangoコンテナから抜けて（cmd+d）、djangorestframeworkの静的ファイルをstaticフォルダににコピーします。 ※途中、コピー上書きするか聞かれるので「yes」とタイピング。 make collec
vue.jsのDjangoでの使い所 - Qiita
vue.jsのDjangoでの使い所 私がつくっているあるアプリではDjangoにバックエンドで使っていますが、フロントエンドはページによってreactとvueを使い分けています。それぞれに長所があると思って両方使っているのですが、今回はvueの話をします。 vueはreactに比べて柔軟な使い方ができる印象です。Django(APIではなくテンプレート)が吐き出したデータを受け取って要素をつくるような書き方ができます。そしてその結果感動するほどHTMLがすっきりするのです!! DjangoとVueを一緒に使う DjangoにVueを組み合わせる方法については私のを含め下記の記事が参考になるでしょう。 Django + Webpack を使ってVueを動かす Django REST framework with Vue.js Django + Vue.js な開発環境を作ろう コード 例え
89b18c608dc7dd2b946b
なにをしたいか フロントエンドにはVue.jsを用いたシングルページアプリケーションを、バックエンドにはDjangoとDjango REST frameworkを使ったWeb APIを用意して、組み合わせてみます。 先駆者様が既にいらっしゃいますが、ちょっと異なるアプローチを試したので記事にしました。 Django + Webpack を使ってVueを動かす Django REST framework with Vue.js どうやって？ Djangoプロジェクトでは通常htmlファイルはテンプレートとして解釈されてレンダリングされますが、そのテンプレート構文がVueと丸かぶり。そのためにVue的なテンプレート構文を持ったhtmlはDjangoテンプレートと共存できません。 そこで、webpackを利用してフロントエンドをVueの単一ファイルコンポーネントに分割しながら書いていくことでこの
GitHub - tokibito/note-app-django-vue-javascript: An example of a note application using django and vue.js
テキストを編集、保存できるシンプルなウェブアプリケーションです。 バックエンドとなるAPIサーバーにはDjangoフレームワーク(Python)、フロントエンドにはVue.js(JavaScript)を使っています。 DjangoフレームワークとJavaScriptでアプリケーションを作るサンプルコードとして作成しました。 このリポジトリのコードではVuexを使っていません。Vuex対応版はnote-app-django-vuexになります。 以下の要素を含んでいます: バックエンド Python3 venv プロジェクトで使うPython環境を作成します Djangoフレームワーク Django REST Framework REST APIを作るのに便利な機能がたくさん含まれるモジュール django-debug-toolbar 各種デバッグ情報をサイドバーで表示します フロントエンド
Vue.jsでSSR（サーバサイドレンダリング）する - Qiita
Vue.jsでSSR（サーバサイドレンダリング）する はじめに この記事はなにかの Advent Calendar 2016の23日目の記事です. Vue.jsは２系がリリースされてそこそこたちました. 日本語ドキュメントもそろっています. フロントの取りかかりとして簡単でスケールもしやすく良いのではないでしょうか. そこで今回はVue.js２系の大きな特徴であるサーバサイドレンダリングを行ったアプリケーションの制作をしてみたいと思います. 最終的に APIコールをして動的ページのSSRを行う 初期表示以後はSPAとして動く こんなアプリケーションを目指します. 完成版は以下です ソースコード Github 使う物 vuejs vue-router vuex このあたりを使います. 詳しくはソースコードのpackage.jsonを... Step1 静的ページのSSR さぁ作成していきます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hackaru-app/hackaru-web: An web server for Hackaru
GitHub - ktmouk/hackaru-desktop: Hackaru for desktop
GitHub - Shigeyuki-fukuda/kanban: https://nulab-inc.com/ja/blog/backlog/vue-js-kanban-app/ を雑にお試しで動かしてみるリポジトリ :sunglasses:
youj.work
Vue で地図を表示する無料で最短の道 - Qiita
https://domnikki.com/%E3%80%90%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E5%AE%9F%E8%A3%85%E3%80%91django-rest-framework-vue-js%E3%81%A7%E4%BD%9C%E3%82%8Btodo%E3%82%A2%E3%83%97%E3%83%AA/
Django REST framework with Vue.js - Qiita
Django + Webpack を使ってVueを動かす - Qiita
