SPA สร้าง Web Site Universal ด้วย Nuxt.js (EP.2) “Nuxt Directory Structure”

Sharing is caring!

หลังจากที่ได้ทำการ create nuxt project เป็นที่เรียบร้อยแล้ว (ถ้ายังไม่รู้ว่า setup Nuxt อย่างไรเข้าไปติดตามได้ที่บทความนี้ ” SPA สร้าง Web Site Universal ด้วย Nuxt.js (EP.1) “Setup Nuxt Project” “ ) สังเกตุว่าภายใต้ project จะเจอ folders และ files ต่าง ๆ  แต่ละส่วนแบ่งการทำงานและมีหน้าที่ต่างกัน

• assets
  • คือ folder เก็บไฟล์ resources อย่างเช่น image ,javascript ,stylesheet หรือเป็นไฟล์อื่น ๆ ที่ต้องการทำเป็น static resource
  • การเรียกใช้งาน <img src=“~/assets/image.png”>

  • <template>
      <img src="~/assets/image.png">
    </template>

• components
  • คือ folder เก็บ File components (.vue)
• layouts
  • ใช้เก็บไฟล์ layout ของ project ภายในจะมีไฟล์ default.vue เป็น template layout  สามารถกำหนด error page กรณีที่มี error status ที่ไม่ใช้ 200 และยังสามารถสร้าง custom layout ในแบบที่เราต้องการได้อีกด้วย

  • <template>
      <div>
        <nuxt/>
      </div>
    </template>

• middleware
  • เก็บไฟล์ที่เป็น intercepter ของ project ตัวอย่างไฟล์ authentication กรณีทำระบบ login (auth.js) ก็จะสร้างเก็บไว้ที่ folder นี้

  • export default function (context) {
      context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent
    }

• pages
  • เก็บไฟล์ views (route mapping) ของ project
  •  

  • <template>
      <div class="container">
        <h1 v-if="error.statusCode === 404">Page not found</h1>
        <h1 v-else>An error occurred</h1>
        <nuxt-link to="/">Home page</nuxt-link>
      </div>
    </template>
    
    <script>
    export default {
      props: ['error'],
      layout: 'blog' // you can set a custom layout for the error page
    }
    </script>

•  plugins
  • เก็บไฟล์ config plugin เพื่อเรียกใช้ plugin ร่วมกับ project เรา เช่น axios เป็นต้น
• static
  • เก็บไฟล์ static content ที่สามารถเรียกเข้าถึงได้ผ่าน route url ของ project ได้

  • <!-- Static image from static directory -->
    <img src="/my-image.png"/>
    
    <!-- webpacked image from assets directory -->
    <img src="~/assets/my-image-2.png"/>

• store
  • เก็บไฟล์ data store Vuex Store store เก็บ data ทำ passing data ภายใน project โดยจะมี main file index.js และเรียก import  modules ต่าง ๆ ได้

  • import Vuex from 'vuex'
    
    const createStore = () => {
      return new Vuex.Store({
        state: () => ({
          counter: 0
        }),
        mutations: {
          increment (state) {
            state.counter++
          }
        }
      })
    }
    
    export default createStore

• nuxt.config.js
  • file config หลักของ Project ใช้ config เรื่อง build ,css ,js ,plugin ,dev ,env ,generate ,head ฯลฯ เป็นต้น

  • const pkg = require('./package')
    
    module.exports = {
      mode: 'universal',
    
      /*
      ** Headers of the page
      */
      head: {
        title: pkg.name,
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { hid: 'description', name: 'description', content: pkg.description }
        ],
        link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
      },
    
      /*
      ** Customize the progress-bar color
      */
      loading: { color: '#fff' },
    
      /*
      ** Global CSS
      */
      css: [],
    
      /*
      ** Plugins to load before mounting the App
      */
      plugins: [],
    
      /*
      ** Nuxt.js modules
      */
      modules: [
        // Doc: https://github.com/nuxt-community/axios-module#usage
        '@nuxtjs/axios',
        // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
        '@nuxtjs/bulma'
      ],
      /*
      ** Axios module configuration
      */
      axios: {
        // See https://github.com/nuxt-community/axios-module#options
      },
    
      /*
      ** Build configuration
      */
      build: {
        postcss: {
          preset: {
            features: {
              customProperties: false
            }
          }
        }
        /*
        ** You can extend webpack config here
        */
        // extend(config, ctx) {
        //   // Run ESLint on save
        //   if (ctx.isDev && ctx.isClient) {
        //     config.module.rules.push({
        //       enforce: 'pre',
        //       test: /\.(js|vue)$/,
        //       loader: 'eslint-loader',
        //       exclude: /(node_modules)/
        //     })
        //   }
        // }
      }
    }
    

• package.json
  • lib dependencies ของ Nuxt Project

  • {
      "name": "poolsawat",
      "version": "1.0.0",
      "description": "My shining Nuxt.js project",
      "author": "pool13433",
      "private": true,
      "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "npm run lint"
      },
      "dependencies": {
        "cross-env": "^5.2.0",
        "nuxt": "^2.0.0",
        "@nuxtjs/bulma": "^1.2.0",
        "@nuxtjs/axios": "^5.0.0"
      },
      "devDependencies": {
        "nodemon": "^1.11.0",
        "babel-eslint": "^8.2.1",
        "eslint": "^5.0.1",
        "eslint-loader": "^2.0.0",
        "eslint-plugin-vue": "^4.0.0",
        "eslint-config-prettier": "^3.1.0",
        "eslint-plugin-prettier": "2.6.2",
        "prettier": "1.14.3"
      }
    }

บทความนี้เป็นเพียงรายละเอียดคร่าว ๆ ของแต่ละส่วนของ Project Nuxt ศึกษาเพิ่มเติมได้จากลิ้งนี้ Nuxt Doc