2019/03/12
Nuxt.jsをコーディングツールとして使えるか試してみる
nuxt.jsは静的なHTMLファイルを生成することができるため、コーディングツールとして使えるのではないかと思い、試してみました。
nuxt.jsをコーディングツールとして使うメリットとしては、
- gulpやwebpackと違い、nuxt.jsはある程度インストール時点で環境が整っているため、環境設定に時間を使わなくて済む
- Vue.jsを使ったコンポーネント単位のモダンなコーディングが可能
- 静的な出力だけでなく、SPAへの切り替えも簡単にできる
などが挙げられます。
今回私が導入するときに行ったことを紹介いたします。
↓作ってみたもの
インストール
Macの場合はターミナル、Windowsの場合はコマンドプロンプトを開き、cdコマンドでコーディングを行うディレクトリへ移動。
Nuxt.jsのプロジェクトを作成
|
1 | $ npx create-nuxt-app <project-name> |
プロジェクトの設定
|
1 2 3 4 5 6 7 8 9 | ? Project name <プロジェクト名> ? Project description <プロジェクトの説明> ? Use a custom server framework <サーバーフレームワークを選択: Express, Koa, Hapi, Feathers, Micro, Adonis (WIP)> ? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Use a custom UI framework <UIフレームワークを選択: None, Bootstrap, Vuetify, Bulma, Tailwind, Element UI, Ant Design Vue, Buefy> ? Use a custom test framework <テスティングフレームワークを選択: None, Jest, AVA> ? Choose rendering mode <レンダリングモードを選択: Universal, SPA> ? Author name <作成者名> ? Choose a package manager <パッケージマネージャーを選択: npm, yarn> |
インストールが始まるので、しばらく待ちます。
|
1 2 3 4 5 6 7 8 9 10 | To get started: cd nuxt-demo npm run dev To build & start for production: cd nuxt-demo npm run build npm start |
が表示されたら、インストール完了です。
表示されているコマンドを使って制作を始められます。
SASSの利用とGlobal CSSの読み込みに対応させる
スタイリングをSASSで行いたい場合は、以下のコマンドを実行します。
|
1 | npm install --save-dev node-sass |
外部ファイルとしてSASSを読み込みたい場合は、加えて以下を実行します。
|
1 2 | $ npm install --save-dev sass-loader $ npm install --save-dev @nuxtjs/style-resources |
nuxt.config.jsにCSSの読み込みを設定します。
|
1 2 3 4 5 6 | /* ** Global CSS */ css: [ { src: '@assets/scss/style.scss', lang: 'scss' } //Global CSSとして読み込みたいファイルを指定 ], |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* ** Nuxt.js modules */ modules: [ '@nuxtjs/style-resources', ], styleResources: { sass: [ '@assets/scss/base/_variable.scss', //共通でincludeしたいファイル '@assets/scss/base/_mixin.scss', //共通でincludeしたいファイル '@assets/scss/base/_keyframes.scss', //共通でincludeしたいファイル ], }, |
これで、SASSの利用と、Global CSSの読み込みができるようになりました。SASSの変数やmixinなどを共通でincludeして利用したい場合は、上記のようにstyle-resourcesモジュールを使います。
各ページやモジュールのstyleをSASSで記述したい場合は、styleにlang=”scss”属性を追加することでSASSを利用できます。
|
1 2 3 4 5 6 7 | <style lang="scss" scoped> .sass { > .child { color: $c_text; } } </style> |
styleの影響範囲にをコンポーネント内に限定する場合は、styleにscoped属性を付けます。
コンポーネントの読み込み
ヘッダーやフッターのようなページの共通部分をコンポーネントとして作成し、各ページから読み込みます。
コンポーネントの作成
コンポーネントごとにスタイルやスクリプトを設定できるので、スタイルやスクリプトの編集時にファイル間を移動する必要がなく、制作の効率を高めることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <template> <header> <p class="logo"><nuxt-link to="/"><img src="https://sterfield.co.jp/wp-content/themes/sterfield/images/logo.png" alt="Sterfield"></nuxt-link></p> <p class="menu"><button type="button" v-on:click="onClickMenu()" v-bind:class="{ active: isMenuActive }"><span></span><span></span><span></span></button></p> <nav v-bind:class="{ active: isMenuActive }">・・・</nav> </header> </template> <style lang="scss" scoped> header { display: flex; align-items: center; justify-content: space-between; padding: 15px 60px; border-bottom: solid 1px $c_border; } ・・・ </style> <script> export default { data () { return { isMenuActive: false } }, methods: { onClickMenu () { this.isMenuActive = !this.isMenuActive } } } </script> |
コンポーネントの読み込み
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template> <div> <GlobalHeader /> <main> <h1>Top Page</h1> ・・・ </main> <GlobalFooter /> </div> </template> <script> import GlobalHeader from '~/components/GlobalHeader.vue' import GlobalFooter from '~/components/GlobalFooter.vue' export default { components: { GlobalHeader, GlobalFooter } } </script> |
Author Profile
SHARE
