vue crane

วู-เครน (ไม่ได้รับการดูแล)

Vue ต้นแบบแบบสากล แบบแยกส่วน หลายหน้า แบบสแต็กเต็มเพื่อจัดการกับโปรเจ็กต์ขนาดใหญ่ อิงจาก Node.js, Express, PM2, Lerna, Webpack, Babel, Vue.js, Element, PostCSS

คุณสมบัติ

• element-ui เป็นยูทิลิตี้ UI
• รวม prettier และ ESlint ใน pre-commit hook โดยใช้ lint-staged หยุดกังวลเรื่องรหัสอึเข้าไปในฐานรหัสของคุณ
• pm2 เป็นผู้จัดการกระบวนการผลิต
• http-proxy-middleware สำหรับพร็อกซี api เซิร์ฟเวอร์ระยะไกลเพื่อหลีกเลี่ยงข้อผิดพลาด CORS
• ใช้ webpack dll เพื่อปรับปรุงประสิทธิภาพเวลาในการสร้าง
• รองรับ dynamic webpack entry ผ่าน cli
• lerna สำหรับการจัดการหลายโครงการในหนึ่งโครงการ
• postcss สำหรับตัวประมวลผลล่วงหน้า css รุ่นต่อไป
• รวมเซิร์ฟเวอร์การพัฒนาและเซิร์ฟเวอร์ที่ใช้งานจริงไว้ในเซิร์ฟเวอร์ express เดียว
• winston เป็นระบบบันทึก
• รองรับการปรับแต่งเราเตอร์ด่วน
• สร้างโปรเจ็กต์บันเดิลสำหรับการปรับใช้โดยอัตโนมัติ

เริ่มต้นใช้งาน

git clone https://github.com/posrix/vue-crane my-project
cd my-project
npm install
npm run dev

รายการ Webpack แบบไดนามิก

ตลอดช่วงชีวิตการพัฒนาโครงการขนาดใหญ่ ให้ webpack สร้างไฟล์ที่จำเป็นดีกว่าสร้างทั้งโปรเจ็กต์ vue-crane ใช้ cli เป็นทางเข้าเพื่อให้ผู้ใช้เลือกโมดูลที่จะพัฒนา

การพัฒนาฝั่งเซิร์ฟเวอร์

เริ่มต้นเซิร์ฟเวอร์ที่ใช้งานจริงในเครื่องด้วย hot reload โดยใช้ nodemon

$ npm install
$ npm run build
$ npm run local 

การผลิต

มีสภาพแวดล้อมการใช้งานจริง 3 ใน vue-crane:

• สภาพแวดล้อม Test
• สภาพแวดล้อม Pre-Release
• Release สภาพแวดล้อม

แต่ละสภาพแวดล้อมมีสคริปต์เริ่มต้นของตัวเอง:

สภาพแวดล้อมการทดสอบ:

$ npm run stage

สภาพแวดล้อมก่อนเผยแพร่:

$ npm run pre

สภาพแวดล้อมการวางจำหน่าย:

$ npm run release

การปรับใช้

vue-crane ใช้โปรเจ็กต์บันเดิลที่เรียกว่า vue-crane-bundle สำหรับการปรับใช้ ทุกครั้งที่คุณต้องการทำซ้ำเวอร์ชันใหม่ เพียงแค่เรียกใช้เชลล์สคริปต์ ทุกสิ่งจะถูกจัดการในโปรเจ็กต์รวมของคุณ มีประโยชน์สามประการของการใช้โปรเจ็กต์บันเดิลสำหรับการปรับใช้:

• คงความสอดคล้องของการพึ่งพาเซิร์ฟเวอร์ในสภาพแวดล้อมที่แตกต่างกัน
• ย้อนกลับไปยังเวอร์ชันก่อนหน้าอย่างรวดเร็วในขณะที่เกิดข้อผิดพลาด
• ปรับใช้ไฟล์ที่จำเป็นกับเซิร์ฟเวอร์การผลิตออนไลน์เท่านั้น

ขั้นตอนการปรับใช้

1. สร้างพื้นที่เก็บข้อมูล git ว่างเป็นโปรเจ็กต์บันเดิลของคุณ เพิ่ม URL ระยะไกลไปยังบริการโฮสต์พื้นที่เก็บข้อมูล git ตรวจสอบให้แน่ใจว่าโปรเจ็กต์บันเดิลของคุณอยู่ในระดับโฟลเดอร์เดียวกันกับโปรเจ็กต์ต้นทางของคุณ

2. แก้ไขสคริปต์บันเดิลใน package.json จำเป็นต้องมีพารามิเตอร์สามตัวเพื่อจัดเตรียม: source_project , bundle_project , release_branch

{
  "bundle" : " sh ./tasks/bundle.sh source_project bundle_project release_branch "
}

3. รันสคริปต์บันเดิล

$ npm run bundle

ใบอนุญาต

ใบอนุญาตเอ็มไอที (MIT) โปรดดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม