こんにちは。エンジニアの笹原です。 スマートキャンプではフロントエンドの開発にVue.jsを取り入れています。 Vue.jsで開発するうえで、SFC(単一ファイルコンポーネント)を利用できることは良さの一つだと思います。 今回は、Sprocketsでアセット管理を行っているRailsプロジェクトに、Webpackを入れることでSFCを使えるようにする方法を紹介します。 SFC(単一ファイルコンポーネント)とは SFCの良さ SFCの実装方法 Sprocketsを利用しているRailsプロジェクトにSFCを導入する 課題と解決方法 完成予想プロジェクト構成 導入手順①: 必要なnpmモジュールのインストール 導入手順②: Webpackの設定 導入手順③: ビルドの実行 終わりに SFC(単一ファイルコンポーネント)とは Single File Componentの略で、テンプレート、ロジッ
![RailsでVue.jsのSFC(単一ファイルコンポーネント)を使うためにWebpackを入れてみた - SMARTCAMP Engineer Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/0005e46b4778fe4a78ad87c06cb4e478dc33cc27/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fy%2Fyuma124%2F20190512%2F20190512165142.png)