ใช้ vue js ใน rails 7

VueJS
Created At :
Views 👀 :

การใช้ Vue.js ในโปรเจกต์ Rails 7 นั้นทำได้โดยการผสมและตั้งค่า Rails 7 กับ Vue.js โดยใช้ Webpacker หรือสคริปต์ที่ไม่ใช่ Webpacker ตามที่คุณต้องการ. นี่คือขั้นตอนทั่วไปในการเริ่มต้น:

  1. สร้างโปรเจกต์ Rails 7:

    หากยังไม่มีโปรเจกต์ Rails 7 ใหม่, ให้สร้างโปรเจกต์ใหม่:

    1
    rails new my-rails-app

  2. ติดตั้ง Webpacker:

    ใน Rails 7, Webpacker เป็นตัวควบคุมการบริหารจัดการสคริปต์ JavaScript, CSS และอื่น ๆ ในโปรเจกต์. คุณต้องติดตั้ง Webpacker ถ้ายังไม่ได้ทำ.

    1
    rails webpacker:install

  3. ติดตั้ง Vue.js:

    ในโปรเจกต์ Rails 7 และ Webpacker, คุณสามารถติดตั้ง Vue.js โดยใช้ yarn หรือ npm:

    1
    yarn add vue

    หรือ

    1
    npm install vue

  4. สร้าง Component Vue:

    สร้างไฟล์ .vue สำหรับคอมโพเนนต์ Vue.js ของคุณในโฟลเดอร์ app/javascript/packs หรือที่คุณต้องการ:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- app/javascript/packs/my_vue_component.vue -->
    <template>
      <div>
        <h1>Hello Vue.js in Rails 7!</h1>
      </div>
    </template>

    <script>
    export default {
      // โค้ด Vue.js ของคุณ
    };
    </script>

    <style scoped>
    /* สไตล์ของคอมโพเนนต์ Vue.js ของคุณ */
    </style>

  5. นำเข้าและใช้งาน Component Vue:

    ในไฟล์ app/javascript/packs/application.js หรือไฟล์ JavaScript ของคุณ, นำเข้าและใช้งาน Component Vue:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import Vue from 'vue';
    import MyVueComponent from './my_vue_component.vue';

    document.addEventListener('DOMContentLoaded', () => {
      const app = new Vue({
        render: (h) => h(MyVueComponent),
      }).$mount();
      document.body.appendChild(app.$el);
    });

  6. แสดง Component Vue ใน View:

    ใน View ของคุณ, คุณสามารถแสดง Component Vue โดยใช้ HTML element ที่คุณต้องการ:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- app/views/layouts/application.html.erb -->
    <!DOCTYPE html>
    <html>
    <head>
      <!-- ... -->
    </head>
    <body>
      <%= yield %>
      <my-vue-component></my-vue-component>
    </body>
    </html>

  7. รัน Rails Server:

    ในที่สุด, รัน Rails server เพื่อดู Component Vue ของคุณในแอป:

    1
    rails server

    Component Vue ของคุณจะถูกแสดงบนหน้าเว็บของคุณและคุณสามารถเริ่มพัฒนาแอป Vue.js ในโปรเจกต์ Rails 7 ของคุณตามความต้องการของคุณได้.

เหล่านี้คือขั้นตอนการใช้งาน Vue.js ใน Rails 7 ด้วย Webpacker หรือสคริปต์ที่ไม่ใช่ Webpacker. คุณสามารถปรับแต่งและเพิ่ม Component Vue ตามความต้องการของคุณในโปรเจกต์ Rails 7 ของคุณ.

©2023 Love Computer