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
create-nuxt-appでNuxt.js+Expressのプロジェクトは簡単に作ることができますが、それで作成したプロジェクトをTypeScript化してみました。 TypeScript化の対応は、Nuxt.js側、Express側で別々となります。Express側はちょっと面倒なので、とりあえずNuxt.jsだけ先にやっておく、とかでも良いと思います。 Nuxt.js+Expressプロジェクトの作成は下記で紹介しているexpress-templateを利用おり、今回の記事はそちらの前提の説明となります。 Nuxt+Expressのプロジェクト作成で良さそうなのは? ※ 2018/8現在の情報です。ところどころNuxt.js1の情報が混じっていますので、下記も合わせて確認が必要な箇所があります。 Nuxt.jsのプロジェクトをNuxt.js2にバージョンアップしてみた Nuxt.j
ある日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+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
A mighty CSS linter that helps you avoid errors and enforce conventions. Features It's mighty as it: has over 100 built-in rules for modern CSS syntax and features supports plugins so you can create your own custom rules automatically fixes problems where possible supports shareable configs that you can create or extend can be customized to your exact needs has 15k unit tests making it robust is
タイトル通り。vscodeとvuejsを使ってのlintの設定をprettierなしでやってみた。 tl;dr 環境 問題点 手順 .vueの構文チェックその1 vscode上での自動フォーマット .vueの構文チェックその2 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
4日朝に Vue.js #1 アドベント カレンダーを見たら3日のぶんが空いていたので急遽書きました。 私は .vue ファイルを静的検証するための ESLint Plugin を開発しています。 eslint-plugin-vue ( ESLint についてはこちら: ESLint 最初の一歩 ) このプラグインを使うと、.vueファイルのテンプレート部分について、リアルタイムで構文エラーを検出したり、v-bind 等のディレクティブの使い方が間違っていたときに指摘してくれたりします。また、公式の Vue.js スタイルガイド に沿うように自動成形することもできます。 🏃 試してみる eslint-plugin-vue を簡単に試してみるために、オンライン デモがあります (1度アクセスすれば、以後はオフラインでも使えます)。ここでコードを入力して、どのようなエラーが出るのか、どのよう
めちゃくちゃ苦労したので共有しようと思います。 使用したもの ー Django, Nuxt, Swift Macのlocalhostで動かしています。実機とMacは同じWi-Fiの元にあることが条件です。 IPアドレスの確認 「システム環境設定」>「ネットワーク」>「Wi-Fi」 するとIPアドレス(192.168.------)が書かれてます。 Django側の設定 settings.pyを開いて、 ALLOWED_HOSTS = ['調べたIPアドレス'] Nuxt側の設定 nuxt.config.jsでlocalhostや127.0.0.1と書いているところを調べたIPアドレスに直す。 例えば、axiosの設定とかだと axios: { host: '調べたIPアドレス', port: 8000 }, 次にpackage.jsonを編集していきます。 "config": { "nux
検索する対象のサイトが多いんじゃあー!! 技術系の記事を読みたい時はQiita、買い物をしたい時はAmazon、場所を調べたい時はGoogleMap 検索しなくちゃいけないサイト多くない!? Googleの検索窓から直接調べたいキーワードを打てばある程度、調べられるけどもっと細かく調べたいんじゃあ!! 特定のサイトの中だけを検索したい時ってありますよね? いちいちサイトに遷移して検索窓にキーワードを打つのがめんどくさい どうすればいいのだ? ChromeにはOmnibox(アドレスバー)の機能に検索エンジンを切り替えて検索することができる機能があります。 ※規定の設定だとGoogleになっています。 Omniboxに検索エンジンの設定をすることでGoogle以外から検索することができます。 興味がある人はぜひ調べて見て下さい!! OmniBoxは良さそうだが、検索エンジンの設定はものすごく
おひさしぶりです、橋本です。 みなさんVue書いてますか!? 自分はここ数年ひたすらVueで開発しています。 いやーいいですよね、Vue。 なんか知らんけど良いんですよね。手に馴染むというか。 大好きVue。 ところで、Vue のプラグインってみなさん使ったことありますか? vue-router や vuex など何かしらのプラグインを使ったことがある人がほとんどだと思います。 では、プラグインを「作った」ことのある人、どれぐらいいますか? なんとなく難しそうというイメージで作ったことないって人、結構いるんじゃないでしょうか?? 実は Vue のプラグインを作るのってすごく簡単なんです。 今日はその作成方法をざっくりご紹介したいと思います。 Vue のプラグインを作成する方法なんですが、 「install メソッドを持つオブジェクトを定義する」 ただこれだけなんです。 定義したプラグインは
はじめに 対象者 JavaScript / Vue.js / PHP / Laravel の入門レベルの方、入門書を読んだあとに「何か作ってみたい」という方が、それぞれの知識を組み合わせて本格的なアプリケーションを開発できるようになることを目指しています。 上記のいずれかの知識がまったくない状態だとこのチュートリアルの内容は少し難しいかもしれません。チャレンジするのもいいですが、参考文献に挙げた市販の入門書か、関連記事のチュートリアルを先に読んでおくと理解しやすいと思います。 学べること Vue.js と Laravel を組み合わせて SPA を構築する方法 SPA におけるクッキー認証と CSRF 対策 Vue Router を使用した画面遷移 Vuex を使用した状態管理 Vue でのタブやローディング UI の表現 SPA におけるエラー処理 扱わないこと デザインと CSS コー
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 プロジェクトを作ります 起動時にワーニングが出てし
この記事は 約 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での使い所 私がつくっているあるアプリでは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 な開発環境を作ろう コード 例え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く