ใช้งาน Material Design กับ Vue.js 2

แปลจาก : http://codingthesmartway.com/using-material-design-with-vue-js-2/

Material Design เป็นภาษาออกแบบที่ผสมผสานหลักการคลาสสิกของการออกแบบที่ประสบความสำเร็จพร้อมกับนวัตกรรมและเทคโนโลยี เป้าหมายของ Google คือการพัฒนาระบบของการออกแบบที่ช่วยให้ประสบการณ์การใช้งานแบบครบวงจรข้ามแพลตฟอร์มทั้งหมด

คำแนะนำการใช้งานและภาพรวมของ Google’s Material Design สามารถค้นหาได้จาก https://material.google.com/.

ด้วยว่า Vue js 2 เป็นตัวที่สร้าง single page web applications ที่เจ๋งแล้ว Material Design ก็เจ๋งพอกัน ต่อไปนี้คุณจะได้เรียนรู้วิธีการเพิ่ม Material Design ให้กับ โปรเจค Vue.js 2

vue-material

vue-material library สามารถดูได้ที่ https://github.com/marcosmoura/vue-material และสามารถติดตั้ง Material Design library ลงในโปรเจค Vue.js ของคุณ

ติดตั้ง โปรเจค Vue.js ของคุณด้วย Vue CLI

ก่อนที่จะเริ่มใช้ Material Design ขอเริ่มต้นด้วยการสร้างโปรเจค Vue.js 2 ขึ้นมาใหม่โดยใช้คำสั่ง Vue command line interface (CLI) อันดับแรก ให้ทำตามคำสั่งนี้

$ vue init webpack vuejs-md-01

คำสั่งนี้ดาวน์โหลด Webpack ตาม Vue.js โปรเจคเทมเพลต และติดตั้งเทมเพลตนี้ไปยังโฟลเดอร์ใหม่ vuejs-MD-01 เปลี่ยนเป็นไดเรกทอรีที่ติดตั้งและดำเนินการโครงการโดยการติดตั้งการอ้างอิงผ่าน:

$ npm install

ตอนนี้คุณสามารถเริ่มต้นขึ้นเว็บเซิร์ฟเวอร์ในโหมดการพัฒนา:

$ npm run dev

เพิ่ม vue-material Library ให้โปรเจค Vue

เริ่มติดตั้ง vue-material library ด้วยคำสั่ง:

$ npm install --save vue-material

ให้แน่ใจว่า vue-material ถูกติดตั้งลงในโฟลเดอร์ย่อยชื่อ node_modules และถูกเพิ่มที่ package.json

ถัดไป ทำตามลิงค์ต่อไปนี้ลงในส่วนหัวของ index.html:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

จากนั้น เราจะต้อง import 2 สคริปต์ เพื่อให้โปรเจคของเราใช้งาน vue-material ได้:

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

สุดท้ายเรากำลังเปิดใช้งาน VueMaterial โดยการดำเนินการวิธีการ Vue.use:

Vue.use(VueMaterial)

ใช้ ส่วนประกอบ Material Design ในเทมเพลตของคุณ

สิ่งที่เรากำลังจะสร้าง

กับ vue-material library ที่ถูกเพิ่มเข้าไปในโปรเจคของเรา เราพร้อมแล้วที่จะทำให้การใช้งาน Material Design ที่จะใช้ติดต่อผู้ใช้ของโปรแกรมของเรา

เริ่มแรกดูที่แอพลิเคชันที่เรากำลังจะสร้างในขั้นตอนต่อไปนี้:

คุณสามารถดูตัวอย่างการประยุกต์ใช้ประกอบด้วยหัวเรื่อง,ปุ่มสองปุ่มและตารางว่าง โดยใช้ตารางที่ปุ่มเติมคุณสามารถเพิ่มบางรายการให้กับตาราง:

ปุ่มล้างเอาตารางรายการตารางทั้งหมด

การดำเนินงานของ App Component Template

ใช้ไฟล์ App.vue จากค่าเริ่มต้นของเทมเพลตโปรเจค ที่จะใช้อินเตอร์เฟซผู้ใช้ Material Design ก่อนอื่นลบโค๊ตที่มีอยู่จาก App.vue และแทนที่ด้วยโค๊ตต่อไปนี้:

<template>
  <div id="app">
    <md-card>
      <md-card-header>
        <div class="md-title">Material Design with Vue.js 2 Demo</div>
        <div class="md-subhead">by CodingTheSmartWay.com</div>
      </md-card-header>
<md-card-content>
        
        <md-button class="md-raised md-primary" v-on:click="fillTable()">Fill table</md-button>
        <md-button class="md-raised md-primary" v-on:click="clearTable()">Clear table</md-button>
        <br />
<md-table>
          <md-table-header>
            <md-table-row>
              <md-table-head>First name</md-table-head>
              <md-table-head>Last name</md-table-head>
              <md-table-head>Email</md-table-head>
            </md-table-row>
          </md-table-header>
          <md-table-body>
            <md-table-row v-for="contact in contacts">
              <md-table-cell>{{contact.firstname}}</md-table-cell>
              <md-table-cell>{{contact.lastname}}</md-table-cell>
              <md-table-cell>{{contact.email}}</md-table-cell>
            </md-table-row>
          </md-table-body>
        </md-table>
      </md-card-content>
    </md-card>
  </div>
</template>

คุณสามารถดูเราใช้ Material Design components ที่จะสร้างขึ้นส่วนติดต่อผู้ใช้ ที่สมบูรณ์ของคอมโพเนนท์ของ vue-material ได้ที่: https://vuematerial.github.io/#/

ปุ่มนี้จะมีอยู่โดยใช้ <md-button> ใช้ v-on:click เรียก เราสามารถที่จะเพิ่มตัวจัดการเหตุการณ์การคลิกปุ่มทั้งสอง (fillTable และ cleartable)

เนื้อหาของตารางที่มีการพิมพ์ออกมาโดยการสร้าง<md-table-row> ใหม่ องค์ประกอบแต่ละองค์ประกอบที่มีอยู่ในรายชื่ออาร์เรย์ จะทำเช่นนั้นเราใช้คำสั่ง v-for เรียกใช้

วิธีการจัดการกับเหตุการณ์

เพื่อให้ปุ่มทำงานตามที่คาดตอนนี้เราต้องเพิ่มทั้งวิธีการจัดการเหตุการณ์ไปยังโปรแกรมของเรา เรากำลังเพิ่มวิธีการทั้งภายในของวัตถุ ซึ่งได้กำหนดเหตุการณ์ภายในการกำหนดค่าของวัตถุ:

<script>
export default {
    name: 'app',
    data: function () {
      return {
        contacts: []
      }
    },
    methods: {
      fillTable: function() {
        this.contacts.push({firstname: 'Sebastian', lastname: 'Eschweiler', email: 's.eschweiler@mail.com'});
        this.contacts.push({firstname: 'Bill', lastname: 'Smith', email: 'b.smith@mail.com'});
        this.contacts.push({firstname: 'Ann', lastname: 'Parker', email: 'a.parker@mail.com'});
      },
      clearTable: function() {
        this.contacts.splice(0, this.contacts.length);  
      }
    }
}
</script>

เป็นเนื้อหาของตารางจะถูกสร้างขึ้นจากอาร์เรย์ รายชื่อในวิธี fill Table เรากำลังใช้วิธีการผลักดันเพื่อเพิ่มวัตถุใหม่ไปยังอาร์เรย์และสิ่งนั้นใส่ตาราง

วิธี clear table จะดำเนินการโดยใช้วิธีการประกบกันเพื่อลบรายการทั้งหมดในรูปแบบอาร์เรย์ ดังนั้นสอง พารามิเตอร์ จะต้องมีการส่งผ่านไปยังเมททอด: 0 และระยะเวลาในปัจจุบันของอาร์เรย์

สรุป

การใช้ vue-material package ทำให้ง่ายต่อการรวมภาษา Material Design ของ Google เข้าไปในโปรเจค Vue.js ของคุณ และทำให้ Material Design components ใช้ได้กับ component’s template ของคุณ

Video Tutorial

วิดีโอนี้มีขั้นตอนที่อธิบายไว้ในข้อความด้านบน:

*ปล. หากผิดพลาดประการใด ขออภัย ณ ที่นี้ด้วยครับ