Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

About Nuxt.js

107 views

Published on

I thought about building a small website with Vue.js, but as I used Nuxt.js I was feeling unexpectedly good, so by the end of this slide anyone could create a website using Nuxt.js It will be
A story and impressions.

Published in: Software
  • Be the first to comment

  • Be the first to like this

About Nuxt.js

  1. 1. Vue.jsで小規模ウェブサイトを構築しよ うと思ったけど、Nuxt.jsを使用したら思 いの外使用感がよかったので、このスラ イドが終わる頃には誰もがNuxt.jsを使っ てウェブサイトを作れるようになるであろ う話と感想。 ArcanaMeetup#40 kasi ナクスト
  2. 2. Vue.js 初心者なので、 Nuxt.js との比較や違いについ ては言及できません。
  3. 3. Nuxt.js とは?
  4. 4. Nuxt.js はユニバーサルな Vue.js アプリケーションを構築する ためのフレームワークです。 https://ja.nuxtjs.org/
  5. 5. Nuxt.js を使ったスター ターテンプレートあるよ
  6. 6. https://ja.nuxtjs.org/guide/installation
  7. 7. 全部?入りだよ • Vue 2 • Vue-Router • Vuex(Vuex ストアのオプション を利用しているときに限ります) • Vue Server Renderer(mode: 'spa' を利用しているときを除く) • Vue-Meta • Webpack • vue-loader • babel-loader など
  8. 8. ディレクトリ構造 ├── assets ├── components │   └── AppLogo.vue ├── layouts │   └── default.vue ├── middleware ├── node_modules ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages │   └── index.vue ├── plugins ├── static │   └── favicon.ico └── store
  9. 9. ディレクトリ構造 ├── assets(コンパイルしたいファイルSASSとか) ├── components(パーツ群) ├── layouts(テンプレ) ├── middleware(共通処理、認証とか) ├── pages(ページ) ├── plugins(外部パッケージの利用) ├── static(静的ファイル) └── store(Vuex)
  10. 10. ビュー
  11. 11. サーバーサイドで処理が実行されたとき
  12. 12. このようなレイアウトのペー ジを作成しました。
  13. 13. Layout
  14. 14. Layoutではヘッダー、フッターのレイア ウト。 また時間によってページ遷移させる共 通処理を行っている(あるプラットフォー ムに依存しているためLayoutで行って いる)。
  15. 15. Page
  16. 16. Pageでは非同期でキャラクターのデー タを取得している。
  17. 17. Component
  18. 18. もうなんか作れそうじゃ ない?
  19. 19. Next.js で作っちゃいな よ。
  20. 20. 感想
  21. 21. Nuxt.js(Vue.js) は非エンジニアに もわかりやすいソースコード <template> <section class="container"> <div> <app-logo/> <h1 class="title"> nuxt-sample </h1> </div> </section> </template> <script> import AppLogo from '~/components/AppLogo.vue' export default { components: { AppLogo } } </script> <style> .container { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .title { font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */ display: block; font-weight: 300;
  22. 22. scoped CSS でCSSの設計は不 要になる CSSの設計でOOCSS、BEM、SMACSS、FLOCSSなどあるらしいけど、 <style scoped> って書けばページやコンポーネント単位で管理できるから不要でいいんだよね?
  23. 23. 環境構築が簡単なのはやっぱり素 晴らしい $ vue init nuxt-community/starter-template <project name> $ cd <project name> $ npm install $ npm run dev もうできた!
  24. 24. おわり

×