タグ

ブックマーク / mae.chab.in (3)

  • TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介

    2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています(クラス構文を使わなくても、TypeScriptvue.jsを書くことはできます)。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する

    TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介
    kyaido
    kyaido 2018/12/07
  • Reactを「webpack + babel-loader」でビルドする方法

    自分はReactのビルドにBrowserifyを主に使用しており、昨年には『Reactをnpmでビルドする方法 browserify (watchify) + babelify編』という記事も書きました。ただ、ここ最近のwebpackの人気っぷりはすさまじいものがあり、「React + webpack」という組み合わせが今後のスタンダードになってもおかしくないという状況なので、今回はwebpackReactをビルドする方法をまとめてみました。 webpackとは webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツールです。Browserifyとの大きな違いは、対象となるのがJSファイルだけでなく、CSSファイルや画像などに及ぶというところでしょうか。また最終的に生成するファイルも複数にわけることもできたりします。プラグインがすでに含まれていたり

    Reactを「webpack + babel-loader」でビルドする方法
    kyaido
    kyaido 2017/01/06
  • 8ステップで完成!CSS3で「斜めのストライプ」を作る方法

    各ブラウザのCSS3の実装も進み、最近では画像を使わずにサイト上のブロックの背景をCSSだけでデザインすることが増えてきていると思います。特にスマホサイトなどではできるだけ画像を使わずに容量をおさえておきたいということから、その傾向が強いと思います。今回は背景パターンとしてよく使われる「斜めストライプ」をCSSのみで作る方法についてまとめてみようと思います。 まず、前準備として以下のようにdiv要素を作っておきます。このdiv要素に対してCSSを指定していきます。 <div class="div2269"></div>それから、斜めストライプを作成する上で必要なCSSは、「linear-gradient()関数」と「background-sizeプロパティ」となります。事前にご確認ください。 linear-gradient – CSS | MDNbackground-size – CSS

    kyaido
    kyaido 2014/10/15
  • 1