Index 1.VueCLIでHelloWorld 2.Vue.jsでフォームを使おう 3.Vue.jsで単一ファイルコンポーネント 4.Vue.jsでAPI通信 5.Vue.jsで猫検索アプリ作成 6.おまけ 前回、Vue.extendを利用したカスタムコンポーネントを作成しましたが、CSSを梱包したカスタムコンポーネントの作成方法を紹介していきます。前回のコードをリファクタリングしつつ進めて行きましょう。 ソース 1.前提条件 カスタムコンポーネントの実習の終了 2.まずは、コンポーネントを全部単一ファイル化します。 <template> <div class="nickname">{{ sharedState.state.property.nickname }}</div> </template> <script> // インポートします。 import PropertyStore
![Vue.jsで単一ファイルコンポーネント - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e64c7270e8da479074949c75186108dd4a045ee1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJUUzJTgxJUE3JUU1JThEJTk4JUU0JUI4JTgwJUUzJTgzJTk1JUUzJTgyJUExJUUzJTgyJUE0JUUzJTgzJUFCJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTlEJUUzJTgzJUJDJUUzJTgzJThEJUUzJTgzJUIzJUUzJTgzJTg4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0zNDRiMGE3N2FmMWVmMTQ4MWFjY2I0YzUxNTI5ZDk3ZQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBNYXJpTXVyb3RhbmkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPThiMGI0Yjg4ODM3MTYzNzIyODVlM2M0YWZjZmM0YTZh%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D8280ced3ccfdf1cb31ab81ba6db11fab)