vue element ui scaffold webpack4

vue-element-ui-scaffold-webpack4

บันทึก:

• ได้รับการอัปเกรดเป็น webpack5 หากคุณต้องการใช้ webpack4 คุณสามารถเปลี่ยนสาขาได้: git checkout webpack4

• **เวอร์ชัน vue3 + element-ui + webpack5: สาขาที่สลับได้: git checkout vue3 **

โปรเจ็กต์นี้เป็นโปรเจ็กต์นั่งร้านหลายเพจและหลายสภาพแวดล้อมที่ใช้ element-plus ภายใต้ Vue และสร้างขึ้นจาก webpack5

การแสดงตัวอย่างเอฟเฟ็กต์ของโปรเจ็กต์ 1 การแสดงตัวอย่างเอฟเฟ็กต์ของโปรเจ็กต์ 2

1. การติดตั้ง

 git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install

2. คุณสมบัติ

สร้างขึ้นบน webpack5 + babel@7

ความเร็วในการสร้างเร็วขึ้นและขนาดไฟล์แพ็คเกจเล็กลง

การใช้งานหลายหน้า

สองวิธีในการส่งออกไฟล์หน้า html โดยอัตโนมัติ (ใช้งานโดย html-webpack-plugin):

• เพิ่มไฟล์ js ลงในไดเร็กทอรี src/pages ไฟล์ js ทำหน้าที่เป็นรายการ webpack เทมเพลตเพจ html คือ public/index.html และชื่อไฟล์เพจคือชื่อไฟล์ js
• สร้างโฟลเดอร์ใดๆ ในไดเร็กทอรี src/pages ซึ่งมีสองไฟล์: entry.js และ template.html entry.js ทำหน้าที่เป็นรายการ webpack เทมเพลตเพจ HTML คือ template.html และชื่อไฟล์ของเพจคือชื่อของโฟลเดอร์ที่สร้างขึ้น

สร้างไอคอนแบบอักษร iconfont โดยอัตโนมัติโดยใช้ svg ซึ่งรองรับการโหลดซ้ำของ webpack hot

ในระหว่างการพัฒนา ให้แก้ไขหรือเพิ่มหรือลบไฟล์ svg ในไดเร็กทอรี src/iconfont/svgs เพื่อสร้างไอคอนแบบอักษรโดยอัตโนมัติ (รองรับ ttf, woff2, woff, eot, svg) และรองรับสไตล์ css และการแสดงตัวอย่าง html ในเวลาเดียวกัน ได้ทันที เห็นผลได้เลย คุณยังสามารถใช้ npm run build-font เพื่อสร้างไฟล์เหล่านี้ด้วยตนเอง ไม่จำเป็นต้องไปที่ icomoon.io หรือ iconfont.cn ด้วยตนเองเพื่อสร้างและแก้ไขไอคอนแบบอักษร, CSS และตัวอย่างไอคอน ดำเนินการตาม webpack-iconfont-plugin-nodejs

การใช้ข้อมูลจำลอง

โครงการสามารถใช้ dynamic-mocker เป็นการจำลองข้อมูลของอินเทอร์เฟซส่วนหลัง ข้อมูลการจำลองจะอยู่ในโฟลเดอร์จำลองและใช้งานโดยใช้ไฟล์ js ซึ่งเข้าใจง่าย สะดวก และยืดหยุ่น

วิธีการเปิดใช้งาน: 1. npm run dev จะเริ่มบริการจำลองพร้อมกันตามค่าเริ่มต้น 2. วิ่งคนเดียว: ​​npm run mock

ไฟล์การกำหนดค่า: 1. ที่อยู่บริการอินเทอร์เฟซใน config/serverMap.js คือ: ฐาน: '"//localhost:8085"' 2. ไฟล์ mock/mock-config.js กำหนดค่าพารามิเตอร์ต่างๆ ของการจำลอง

โหลด element-plus ตามความต้องการและเปลี่ยนสีธีมได้ทั่วโลก

แหล่งที่มาของการโหลด css ตามความต้องการตรงไปยังไฟล์ scss ของ element-plus ไม่ใช่ไฟล์ css ที่คอมไพล์แล้ว ผนวกไฟล์ src/assets/css/element-theme/theme-changed.scss เข้ากับไฟล์ตัวแปรธีม element-plus theme-chalk/src/common/var.scss ณ เวลาคอมไพล์ผ่านปลั๊กอิน join-file-content-plugin เป็นไปได้ที่จะดูเอฟเฟกต์ทันทีหลังจากแก้ไขตัวแปร scss โดยไม่ต้องคอมไพล์ไฟล์ scss element-plus ล่วงหน้าเป็นไฟล์ css ในเวลาเดียวกัน ตัวแปร scss ของ element-plus สามารถอ้างอิงได้ทุกที่ในโปรเจ็กต์

ปรับสีของธีมแบบไดนามิกขณะรันไทม์ (รวมถึงสไตล์ของธีมที่เขียนเอง)

ใช้ปลั๊กอิน webpack-theme-color-replacer เพื่อแตกกฎสไตล์ที่มีสีธีมใน css เมื่อสร้าง webpack และสร้างไฟล์ css/theme-colors.css จากนั้นเมื่อหน้าเว็บทำงาน ให้ดาวน์โหลดไฟล์ css นี้และเปลี่ยนสีในนั้นด้วยสีธีมที่กำหนดเองแบบไดนามิก เนื่องจากแยกเฉพาะ CSS ที่เกี่ยวข้องกับสี ความเร็วจึงเร็วกว่าการดาวน์โหลด CSS ทั้งหมดของ element-plus มาก และไม่เพียงแต่สไตล์บวกองค์ประกอบเท่านั้น แต่ยังสามารถเปลี่ยนสีของธีมของสไตล์ที่เขียนเองในโครงการได้อีกด้วย

การแมปซอร์สโค้ด

เมื่อเผยแพร่โค้ด ไฟล์การแมปซอร์สโค้ดจะถูกสร้างขึ้นไปยังโฟลเดอร์การแมปซอร์สโค้ดแบบรวมและแมปโดยอัตโนมัติในสภาพแวดล้อมการทดสอบ เพื่อความปลอดภัยของโค้ด สภาพแวดล้อมการใช้งานจริงจะไม่ทำการแมปอัตโนมัติ หากจำเป็นต้องมีการแก้ไขข้อบกพร่อง Chrome จะสนับสนุนการแมปซอร์สโค้ดด้วยตนเองผ่าน URL ตามข้อกำหนดด้านความปลอดภัย ชื่อโฟลเดอร์การแมปซอร์สโค้ดนี้เป็นชื่อโฟลเดอร์ที่นักพัฒนาเท่านั้นที่รู้ หรือใช้อัลกอริธึมการเข้ารหัสแบบไดนามิกเพื่อสร้างชื่อโฟลเดอร์นี้ หรือวางไฟล์การแมปซอร์สโค้ดเหล่านี้ในไดเร็กทอรีเว็บไซต์ที่ต้องมีการยืนยันการเข้าสู่ระบบ โปรดแก้ไขชื่อของไดเรกทอรีในฟังก์ชัน getSourceMapPath ของไฟล์ config/index.js ตามต้องการ ด้วยวิธีนี้ เมื่อเกิดจุดบกพร่องและจำเป็นต้องมีการดีบักแบบออนไลน์ คุณสามารถเพิ่มการแมปซอร์สโค้ดได้อย่างรวดเร็วและด้วยตนเอง เพื่ออำนวยความสะดวกในการดีบัก และหลีกเลี่ยงการรั่วไหลของซอร์สโค้ด

รูปแบบที่ตอบสนอง

ใช้โซลูชันง่ายๆ ของ vw+rem เพื่อใช้เค้าโครงแบบตอบสนอง ใช้ปลั๊กอิน postcss-pxtorem เพื่อแปลงหน่วยเป็น css จาก px เป็น rem โดยอัตโนมัติ ในระหว่างการพัฒนา px ยังคงใช้เป็นหน่วยความยาว css 1rem = 100px แปลงได้ง่ายระหว่างการดีบัก เป็นเรื่องปกติสำหรับพีซีและเทอร์มินัลมือถือ (ควรแทนที่ element-plus ด้วยเฟรมเวิร์ก UI อื่นๆ สำหรับเทอร์มินัลมือถือ)

ความเข้ากันได้ของเบราว์เซอร์

เข้ากันได้กับ IE10 ขึ้นไป, Chrome, Firefox, Safari, QQ, 360, 2345 และเบราว์เซอร์อื่น ๆ หากคุณต้องการเปลี่ยนเป็นเวอร์ชันมือถือ โปรดแก้ไข .browsersrc เป็นเวอร์ชันมือถือ

3. คำอธิบายคำสั่ง

การพัฒนาท้องถิ่น

 npm run dev

การพัฒนาและการดีบักในท้องถิ่น ใช้ที่อยู่บริการอินเทอร์เฟซแบ็กเอนด์ที่กำหนดค่าโดย dev ใน config/serverMap.js

ปล่อยสภาพแวดล้อมการทดสอบ

 npm run build-test

ใช้สำหรับการปรับใช้สภาพแวดล้อมการทดสอบ js มีการแมปซอร์สโค้ด css ไม่มีการแมปซอร์สโค้ด ใช้ที่อยู่บริการอินเทอร์เฟซที่กำหนดค่าโดยการทดสอบใน config/serverMap.js

ปล่อยสู่สภาพแวดล้อมการผลิต

 npm run build

สำหรับการปรับใช้สภาพแวดล้อมการผลิต ใช้ที่อยู่บริการอินเทอร์เฟซที่กำหนดค่าโดย prod ใน config/serverMap.js

เผยแพร่สภาพแวดล้อมการสาธิต

 npm run build-demo

การกำหนดค่าเหมือนกับสภาพแวดล้อมการใช้งานจริง เฉพาะที่อยู่บริการอินเทอร์เฟซเท่านั้นที่แตกต่างกัน ใช้ที่อยู่บริการอินเทอร์เฟซที่กำหนดค่าโดยการสาธิตใน config/serverMap.js

ปล่อยสภาพแวดล้อมการพัฒนา

 npm run build-dev

ใช้เพื่อเผยแพร่และปรับใช้กับเซิร์ฟเวอร์สภาพแวดล้อมการพัฒนา เหมาะสำหรับสถานการณ์ที่จำเป็นต้องเผยแพร่ไปยังเซิร์ฟเวอร์เพื่อการดีบัก ใช้ที่อยู่บริการอินเทอร์เฟซที่กำหนดค่าโดย dev ใน config/serverMap.js

เปิดใช้งานการเผยแพร่ข้อมูลจำลอง

 npm run build-preview

ข้อมูลจำลองแบบคงที่จะถูกเปิดใช้งาน ไม่จำเป็นต้องใช้บริการแบ็คเอนด์ และข้อมูลจำลองจะถูกใช้เพื่อจำลองการโทร Ajax (โดยมีเงื่อนไขว่าอินเทอร์เฟซ API ที่เกี่ยวข้องได้เขียนข้อมูลจำลอง) เทียบเท่ากับ npm run build --preview && npm run play-dist

ดูผลการรันไดเร็กทอรี dist

 npm run play-dist

โดยให้ไดเร็กทอรี dist เป็นไดเร็กทอรีราก ให้เริ่มบริการ http แบบคงที่ในเครื่องเพื่อดูผลลัพธ์การทำงานของไดเร็กทอรี dist หลังจากการเผยแพร่

เริ่มบริการจำลอง

 npm run mock

เมื่อบริการอินเทอร์เฟซส่วนหลังยังไม่เสร็จสมบูรณ์ สามารถใช้เพื่อจำลองข้อมูลอินเทอร์เฟซส่วนหลังเพื่อตรวจแก้จุดบกพร่องฟังก์ชันส่วนหน้า

พร็อกซีไปยังพอร์ต 80 หรือพอร์ต 443

 npm run proxy80

ด้วยการพร็อกซีพอร์ตที่มีอยู่ (พอร์ต 80xx) ไปยังพอร์ต 80 หรือพอร์ต 443 พอร์ตสามารถถูกซ่อนไว้ระหว่างการเข้าถึงและสามารถเข้าถึง https ได้เช่นกัน เมื่อรวมกับโฮสต์ของระบบและการกำหนดค่า 127.0.0.1 เป็นชื่อโดเมนที่ระบุ คุณสามารถใช้ชื่อโดเมนได้โดยตรงเพื่อเข้าถึงหน้าการดีบักในเครื่อง ซึ่งใช้ในการดีบักบางสถานการณ์ที่ต้องใช้การเข้าถึงชื่อโดเมน (เช่น การดีบัก WeChat สำหรับรายละเอียด โปรดดู: https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html)