vue component creator plugin

ผู้ประกอบการ-ผู้สร้าง

ปลั๊กอินระดมสมองเพื่อสร้างส่วนประกอบ vue.js ไฟล์เดียวพร้อมไฟล์ SASS ตามพวกเขาและทำโมดูล Vuex ให้สมบูรณ์ ปลั๊กอินนี้ทำสองสิ่งเพื่อให้ประสบการณ์การพัฒนาของคุณง่ายขึ้น

ติดตั้ง

ค้นหา Vue Component Creator ในการตั้งค่าปลั๊กอิน หรือดาวน์โหลดปลั๊กอินจากไซต์รุ่น

Vue ไฟล์ไฟล์เดียว

คลิกขวาในมุมมองแผนผังโครงการที่คุณต้องการวางโมดูลใหม่ จากนั้น New File -> Vue Module สิ่งนี้จะเปิดกล่องโต้ตอบเพื่อกำหนดชื่อของโมดูล ชื่อนี้ถูกใช้ในภายหลังเพื่อตั้งชื่อไดเรกทอรี vue- และ sass-file รวมถึงชื่อรูท SASS และโหนดรูทในไฟล์ Vue ที่มีชื่อที่กำหนด

โครงสร้าง

• ส่วนประกอบ
  • _component-name.scss
  • component-name.md
  • component-name.vue
  • component-name.stories.js
  • component-name.spec.js

โมดูล Vuex

ด้วยการสร้างโมดูล Vuex ใหม่จะมีการสร้างไฟล์สองไฟล์

โครงสร้าง

• ชื่อโมดูล
  • actions.js
  • index.js
  • การกลายพันธุ์ js
  • state.js
  • Mutation-types.js (ขึ้นอยู่กับว่าคุณตั้ง Mutationstypes File
  • getters.js (ขึ้นอยู่กับว่าคุณตรวจสอบ Getters File
  • types.d.ts

ปรับแต่งเทมเพลต

ส่วนประกอบ

ตัวแปรเทมเพลตที่มีอยู่

ตัวแปร	ตัวอย่าง	คำอธิบาย
ส่วนประกอบ	my-module	ชื่อขององค์ประกอบ
componentnamecamelcase	myModule	ชื่อของส่วนประกอบใน Camelcase
componentnamepascasas	MyModule	ชื่อของส่วนประกอบใน Camelcase
createMarkdown	0 1	ไม่ว่าจะสร้างไฟล์ Markdown หรือไม่

Vuex

ตัวแปรเทมเพลตที่มีอยู่

ตัวแปร	ตัวอย่าง	คำอธิบาย
ส่วนประกอบ	my-module	ชื่อขององค์ประกอบ
componentnamecamelcase	myModule	ชื่อของส่วนประกอบใน Camelcase
componentnamepascasas	MyModule	ชื่อของส่วนประกอบใน Camelcase
การกลายพันธุ์ไฟล์	./mutation-types.js	filepath กับการกลายพันธุ์
คุณสมบัติ	data	ชื่อของคุณสมบัติที่จะสร้าง
getTername	getData	ชื่อฟังก์ชั่น getter
ประเภทของทรัพย์สิน	string	ประเภทของคุณสมบัติ
ผู้ลี้ภัย	0 1	สร้าง getters
ใช้งาน	0 1	สร้างไฟล์ typescript ด้วยคำจำกัดความประเภท
createMutationTypes	0 1	ไม่ว่าจะสร้างไฟล์ประเภทการกลายพันธุ์ที่กำหนดเอง
ActionName	setData	ชื่อของการกระทำ
ชื่อการกลายพันธุ์	SET_DATA	ชื่อประเภทการกลายพันธุ์
tsinterfacename	MyModuleState	ชื่อของชื่ออินเทอร์เฟซสถานะ typeScript

การพัฒนา

เช็คเอาต์คู่มือการตั้งค่าการพัฒนาสำหรับการตั้งค่า

ไอคอน

ไอคอนที่จัดทำโดย https://www.iconfinder.com/justicon ผ่าน https://www.iconfinder.com