はじめに
コジマです。
.vueファイルは
- templateタグ:HTML部分
- scriptタグ:JavaScript部分
- styleタグ:CSS部分
の3つのタグで構成されています。
.vueファイル一枚で完結できるのはそれはそれで便利なんですけど、
役割ごとにファイルを分散させたくもなります。
そういうときの方法を紹介します。
参考URL
参考URLは以下
Vue Component の仕様
のソースのコンポーネントってところ。
Nuxt.js はリッチなウェブアプリケーションを構築するために下記のものを含んでいます:
- Vue 2
- Vue Router
- Vuex(ストアオプションを利用している場合に限る)
- Vue Server Renderer(mode: ‘spa’ を利用している場合を除く)
- vue-meta
すべて合わせてもわずか 57kB min+gzip です。(Vuex 利用時は 60kB)
バンドルやソースコードの分割やミニファイ化するために内部で webpack、vue-loader と babel-loader を使います。
Nuxt.jsに同梱されているvue-loaderの機能の話になるので、vue-loaderを使う人も見て損はないです。
1つのファイルで書くとき
<template> <b-container> <div class="hello"> {{ message }} </div> </b-container> </template> <script> export default { data () { return { message: 'Hello World!' } } } </script> <style> .hello { color: red; font-weight: bold; } </style>
こうやって赤い文字でHello Worldするだけのシンプルなもの。
これを
index.vueに加え、template.html,style.css,main.jsというファイルにわけて実装できるようにしたいと思います。
やりかた
各タグにsrcオプションをつけてファイルを指定します。
それだけ!(簡単だね!)
変更したソースは以下のようになります。
index.vue
<template src="./template.html"> </template> <script src="./main.js"> </script> <style src="./style.css"> </style>
template.html
<b-container> <div class="hello"> {{ message }} </div> </b-container>
style.css
.hello { color: red; font-weight: bold; }
main.js
export default { data () { return { message: 'Hello World!' } } }
このようになります。
チーム開発の時なんかはそれそれ作業フォルダが違うと思うので、相対パスの方が親切だと思います!
pagesの下のフォルダ構造は以下のよう。
さいごに
今回のポイントはこちら
- src属性でファイルを指定する
- タグの中身を指定したファイルに移動する
- 相対パスの方が親切(多分)
僕はmain.jsを作らないで、index.vueの中で書いてますが、
今回はこの記事のためにあえて外部ファイル指定としてみました。
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!
以上、コジマでした。