1. เครื่องมือเสริมคืออะไร?

เครื่องมือเสริม (Tooling) ช่วยเพิ่มประสิทธิภาพในการพัฒนา Vue.js โดยช่วยจัดการงานที่ซับซ้อน เช่น การตั้งค่าโปรเจกต์ การบำรุงรักษาโค้ด การทดสอบ และการปรับปรุงประสิทธิภาพแอปพลิเคชัน

---

2. Vue CLI

Vue CLI เป็นเครื่องมือที่ช่วยสร้างและจัดการโปรเจกต์ Vue.js ได้อย่างง่ายดาย

การติดตั้ง Vue CLI:

npm install -g @vue/cli

การสร้างโปรเจกต์ใหม่:

vue create my-project

การเพิ่ม Plugins:

Vue CLI รองรับการเพิ่ม Plugins เพื่อขยายความสามารถของโปรเจกต์

vue add router
vue add vuex
vue add pwa

---

3. Vite

Vite เป็นเครื่องมือ Build ที่มีความเร็วสูงและรองรับ Vue.js โดยค่าเริ่มต้น

การติดตั้ง Vite:

npm create vite@latest my-project --template vue
cd my-project
npm install

การรัน Development Server:

npm run dev

การสร้าง Production Build:

npm run build

---

4. Vue DevTools

Vue DevTools เป็น Extension สำหรับ Browser ที่ช่วยในการ Debug แอปพลิเคชัน Vue.js

การติดตั้ง Vue DevTools:

• Chrome Web Store
• Firefox Add-ons

ฟีเจอร์หลัก:

• ตรวจสอบ Component Hierarchy
• ดู State และ Props ของแต่ละ Component
• Debug Vuex Store

---

5. ESLint และ Prettier

ESLint และ Prettier ช่วยให้โค้ดของคุณมีความสม่ำเสมอและลดข้อผิดพลาดในการเขียนโค้ด

การติดตั้ง ESLint และ Prettier:

npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev

การตั้งค่า ESLint:

สร้างไฟล์ .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

---

6. Pinia

Pinia เป็น State Management Library ที่มีความเรียบง่ายและทันสมัยกว่า Vuex

การติดตั้ง Pinia:

npm install pinia

การตั้งค่า Pinia:

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

การสร้าง Store:

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

การใช้งานใน Component:

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
};
</script>

---

7. การใช้ Cypress สำหรับ End-to-End Testing

Cypress เป็นเครื่องมือสำหรับทดสอบ End-to-End ของแอปพลิเคชัน Vue.js

การติดตั้ง Cypress:

npm install cypress --save-dev

การเปิด Cypress Test Runner:

npx cypress open

การเขียนตัวอย่าง Test:

// cypress/integration/example.spec.js
describe('My First Test', () => {
  it('Visits the app root url', () => {
    cy.visit('/');
    cy.contains('h1', 'Welcome to Vue.js');
  });
});

---

8. การใช้ Storybook สำหรับ Component Development

Storybook ช่วยให้คุณพัฒนาและทดสอบ Component อย่างแยกส่วนได้ง่ายขึ้น

การติดตั้ง Storybook:

npx sb init

การรัน Storybook:

npm run storybook

การสร้าง Story:

// Button.stories.js
import Button from './Button.vue';

export default {
  title: 'Example/Button',
  component: Button
};

const Template = (args) => ({
  components: { Button },
  setup() {
    return { args };
  },
  template: '<Button v-bind="args" />'
});

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button'
};

---

9. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับเครื่องมือเสริมที่ช่วยในการพัฒนา Vue.js ได้แก่:

• Vue CLI และ Vite สำหรับการตั้งค่าโปรเจกต์
• Vue DevTools สำหรับ Debugging
• ESLint และ Prettier สำหรับการบำรุงรักษาคุณภาพโค้ด
• Pinia สำหรับการจัดการ State
• Cypress และ Storybook สำหรับการทดสอบและพัฒนา Component

ในบทถัดไป เราจะศึกษาเกี่ยวกับการปรับแต่งประสบการณ์ผู้ใช้ (UX) ด้วย Transition, Animation และ Loading Indicators!