วันนี้มาเรียนรู้วิธีการติดตั้ง Ionic เพื่อสร้างแอปพลิเคชั่นขนาดเล็กง่าย ๆ บนคอมพิวเตอร์ของคุณ เว็บไซต์หลายแห่งเขียนวิธีการติดตั้งที่ซับซ้อนมาก ในความเป็นจริงผู้เริ่มต้นที่เพิ่งเริ่มเรียนรู้อิออนโดยเฉพาะผู้ที่ไม่มีประสบการณ์การเขียนโปรแกรมมากนักพวกเขาจะกลัวหรือไม่? มันให้ความรู้สึกซับซ้อนมากสิ่งที่จำเป็นต้องมีสภาพแวดล้อม node.js ในการติดตั้งและติดตั้ง Cordova เวอร์ชันล่าสุด ... ที่จริงแล้วมันไม่จำเป็นต้องลำบาก ให้ฉันบอกคุณว่าฉันใช้ไอออนิกอย่างไรเมื่อฉันทำงานในโครงการ
วิธีแรก: แนะนำโดยตรง
ขั้นตอนที่ 1: ดาวน์โหลด ionic ก่อน
Ionic เวอร์ชันล่าสุดถูกดาวน์โหลดที่: http://ionicframework.com/docs/overview/#download
หลังจากดาวน์โหลดแล้วคลายซิปแพ็คเกจบีบอัดรวมถึงไดเรกทอรีต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
css/ => ไฟล์สไตล์
FONTS/ => FONT FILE
JS/ => ไฟล์ JavaScript
เวอร์ชัน. json => คำแนะนำในการอัปเดตเวอร์ชัน
นอกจากนี้คุณยังสามารถดาวน์โหลดไฟล์ทรัพยากรต่อไปนี้บน gitHub: https://github.com/driftyco/ionic (ในไดเรกทอรีรีลีส)
ขั้นตอนที่ 2: แนะนำไฟล์
ต่อไปเราจะต้องแนะนำ css/ionic.min.css และ js/ionic.bundle.min.js ในไดเรกทอรีข้างต้นลงในโครงการเพื่อสร้างแอปพลิเคชันไอออนิก
<ion-header-bar> <h1> Hello World! </h1> </ion-header-bar> <ion-content> <p> แอพไอออนิกแรกของฉัน </p> </ion-content>
หมายเหตุ: ในแอปพลิเคชันมือถือเช่น PhoneGap เราต้องเพิ่มไฟล์ JS และ CSS ที่สอดคล้องกันลงในไลบรารีทรัพยากร
วิธีที่สอง: การติดตั้งบรรทัดคำสั่ง
ก่อนอื่นคุณต้องติดตั้ง node.js จากนั้นติดตั้ง Cordova และ Ionic เวอร์ชันล่าสุดผ่านเครื่องมือบรรทัดคำสั่ง ติดตั้งโดยอ้างถึงเอกสาร Android และ iOS อย่างเป็นทางการ
เปิดเครื่องมือบรรทัดคำสั่งบนหน้าต่างและ Linux เพื่อเรียกใช้คำสั่งต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
$ npm ติดตั้ง -g Cordova ionic
ใช้คำสั่งต่อไปนี้ในระบบ Mac ของคุณ:
การคัดลอกรหัสมีดังนี้:
sudo npm ติดตั้ง -g Cordova ionic
เคล็ดลับ: ต้องติดตั้งและใช้ iOS ภายใต้สภาพแวดล้อม Mac OS X. และ XCode
หากคุณติดตั้งสภาพแวดล้อมด้านบนคุณสามารถเรียกใช้คำสั่งต่อไปนี้เพื่ออัปเดตเวอร์ชัน:
การคัดลอกรหัสมีดังนี้:
การอัปเดต npm -g Cordova ionic
หรือ
การคัดลอกรหัสมีดังนี้:
การอัปเดต sudo npm -g Cordova ionic
สร้างแอปพลิเคชัน
สร้างแอปพลิเคชันไอออนิกโดยใช้เทมเพลตแอปพลิเคชันสำเร็จรูปที่จัดทำโดย Ionic หรือโครงการว่างเปล่า:
การคัดลอกรหัสมีดังนี้:
$ Ionic Start MyApp Tabs
เรียกใช้โครงการไอออนิกที่เราเพิ่งสร้างขึ้น
สร้างทดสอบเรียกใช้แอพของคุณโดยใช้เครื่องมือไอออนิก (หรือสร้างโดยตรงผ่าน Cordova)
สร้างแอพ Android:
การคัดลอกรหัสมีดังนี้:
$ cd myapp
$ platform ionic เพิ่ม Android
$ ionic build Android
$ ionic imulate Android
สร้างแอพ iOS:
การคัดลอกรหัสมีดังนี้:
$ cd myapp
$ platform ionic เพิ่ม iOS
$ ionic build iOS
$ ionic imulate iOS