VueJS

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

หลังจากที่ได้ทำการ 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

SPA สร้าง Web Site Universal ด้วย Nuxt.js (EP.1) “Setup Nuxt Project”

พวกเรามาถึงยุคที่ต้องมีเว็บไซต์ที่เข้าใช้งานแล้วรู้สึกว่ารวดเร็วทันใจเพราะเมื่อมีอะไรมาขัดจังหวะคนใช้งานจะรู้สึกไม่อยากรอ หรือ อาจจะเลิกสนใจ website ของคุณไปเลย แล้วถ้าอยากจะสร้าง website ลักษณะที่ตอบโจทย์ที่กล่าวมาละ เครื่องมืออะไรจะตอบโจทย์นี้ได้
SPA หรือ single page application คือการที่มี application ที่มีการทำงานในหน้าเดียวกล่าวคือจะไม่มีการ refresh หน้า ถ้าในสมัยเก่าก่อนวิธีการที่นิยมที่สุดก็คงเป็นการใช้ AJAX ในการ รับ-ส่งค่าข้อมูลระหว่างกันโดยเมื่อมีข้อมูลหน้าเว็บเปลี่ยนก็สั่งให้ DOM เปลี่ยนแปลงโดยใช้งานร่วมกับ jQuery พระเอกตลอดการของเรานั้นเอง ฟังดูยากสำหรับเมื่อก่อน
SPA ก็มี framework ในการพัฒนา 3 ค่ายดัง ๆ อย่าง React(Facebook) ,Angular(Google), Vue(ทีมพัฒนาอิสระ) ซึ่ง 3 framework ก็ล้วนเป็น open source แล้วทั้งสิน ถ้าเมื่อจะเลือกเครื่องมืออะไรสักอย่างก็ต้องเข้าไปใช้งาน หรือต้องได้ลองเล่น และเมื่อเกิดปัญหา หรือรู้สึกว่าติดขัดก็จะเลิกและเปลี่ยนไปใช้งานตัวถัดไป และเมื่อถ้าได้ลองจะครบทั้ง 3 framework แล้วตัวเราเองก็จะเลือกได้เองว่าจะเลือก framework ตัวใด
Vue คือ framework ระดับแรก ๆ ที่นักพัฒนามือใหม่เลือกใช้งาน ด้วยเหตุผลเรื่องความง่ายในการติดตั้งไม่จำเป็นต้องติดตั้ง build tool ก็สามารถเริ่มต้นใช้งานได้
Nuxt.js เป็น framework ที่พัฒนาต่อยอดจาก VueJS เพื่อช่วยแก้ปัญหาสำหรับ website ที่ต้องการทำเรื่อง SEO(Search Engine Optimization) เพื่อในพบการค้นหาใน google ได้ง่ายยิ่งขึ้น
เริ่มต้นใช้งาน
เริ่มแรกติดตั้ง Nuxt.js

  1. ติดตั้ง npx (ไม่ขอกล่าวถึงสำหรับขั้นตอนการติดตั้งส่วนนี้) หรือจะใช้ yarn ก็ได้ตามความถนัด
  2. npx: create nuxt project
    npx create-nuxt-app <project-name>
  3. yarn: create nuxt project
    yarn create nuxt-app <project-name>
  4. ใส่ชื่อ project? Project name (poolsawat)
  5. ใส่คำอธิบาย? Project description (My shining Nuxt.js project)
  6. เลือก integrate ร่วมกับ framework อื่น เลือก None (Nuxt default server)
    > none
    express
    koa
    adonis
    hapi
    feathers
    micro
  7. เลือก ui framework
    > none
    bootstrap
    vuetify
    bulma
    tailwind
    element-ui
    buefy
  8. Single Page App เลือก mode website SEO เลือก Universal
    > Universal
    SPA
  9. website ที่มีการต่อเรียก api ก็ให้ติดตั้ง axios ด้วย
    no
    > yes
  10. เพิ่มการตรวจสอบ source code ด้วย ESLint
    no
    > yes
  11. เพิ่มให้มีการจัด format code หลัง save
    no
    > yes
  12. รอ…
  13. ทำตาม stepcd poolsawat
    npm run dev

ติดตั้งเรียบร้อยลอง start application ดู

d:\Blogger\nuxt\poolsawat>npm run dev

> [email protected] dev d:\Blogger\nuxt\poolsawat
> nuxt

INFO Building project

√ success Builder initialized
√ success Nuxt files generated

READY Listening on http://localhost:3000

เสร็จสิ้นเป็นที่เรียบร้อย ตอนหน้าจะพาไปแนะนำโครงสร้างภายใน Nuxt.js กันว่าแต่ละส่วนใช้ทำงานอะไรบ้าง และถ้าจะสร้าง page ใหม่จะต้องทำอย่างไร