Nuxt, ElementUI, Storybook 構成で始めようとしたときに、StorybookにElementUIを適用させるのにちょっと手こずったので手順を残しておきます。 最終的なソースです。 howdy39/nuxt-storybook-element-boilerplate: Nuxt, Storybook, ElementUI, Boilerplate Nuxtプロジェクトを element-ui で作成
最新版=>フロントエンドのテストについて考える 現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
Storybookのバージョンについて追記 2018年10月29日にStorybook4系がリリースされたみたいです。 Webpack4に対応してるので、Nuxt2系使っててStorybook追加したい人はそちらを使うことをおすすめします(いつかそっちも書きたい)。 この記事ではStorybook3系で書いてます。 Storybookとは? コンポーネントのカタログ UIコンポーネントを単独で開発でき、コンポーネントの再利用、テストの容易性、開発スピードを向上させることができる なぜ必要? プロダクトとは切り離して開発する →依存関係が全くない状態を保てるため、再利用性が高いコンポーネントを作ることにつながる エンジニアとデザイナーの認識のズレをなくすため →ここデザインと違うよねーとか 使い方 ※ 2018年10月3日時点で、Nuxt v2にはStorybook v4のアルファ版しか対応
概要 Nuxt2.0でstorybook使おうと思ってたら、結構つまづいてしまったのでメモ。 修正の内容 Nuxt2系で、storybook3系使おうとしたら、Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.とかなって、VueLoaderPluginとかいろいろしてみたけど、挫折した。 そこで、webpack4系 + storybook4系を入れてる記事があったので、それを見て4系を入れた。 2018/10/23 修正 tic40さんありがとうございます! 結果動いたが、storybookでassetsを呼ぶ時に、「Can't resolve 'assets/**'」 とエラーが起きるようになった。 そのため、両方のconfig.jsのali
module.exports = (baseConfig, env, defaultConfig) => { //nuxt.jsの'@'や'~'の読み込み defaultConfig.resolve.alias['@'] = rootPath; defaultConfig.resolve.alias['~'] = rootPath; // addon-storysourceの設定はここから defaultConfig.module.rules.push({ test: /\.stories\.jsx?$/, loaders: [require.resolve('@storybook/addon-storysource/loader')], enforce: 'pre', }) return defaultConfig; }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く