Vue template web

Vue-template-web เป็นเทมเพลตโฮมเพจธรรมดาที่ใช้ vue element-ui

การแนะนำ:

โปรเจ็กต์นี้เป็นหน้าเทมเพลตที่เรียบง่ายและโครงสร้างพื้นฐาน ซึ่งสามารถแปลงเป็นหน้าส่งเสริมการขาย หน้าธีม หน้าเว็บไซต์อย่างเป็นทางการ ฯลฯ ได้อย่างง่ายดาย

การดำเนินโครงการ:

1. หน้าสมอเลื่อนแบบผูกสองทาง
2. การสนับสนุนความเป็นสากลของ i8n ของ vue element-ui
3. ปรับเปลี่ยนธีมสีของธีม
4. Vuex จะแคชธีมและภาษาที่ผู้ใช้เลือกไว้อย่างต่อเนื่อง
5. ใช้ไลบรารีไอคอนแบบอักษร iconfont
6. สรุปคำขอ axios

โครงสร้างโครงการ:

 src
 ├─assets                静态资源,图片,iconfont图标字体存放目录
 ├─components            公共组件目录
 ├─i18n                  vue element-ui的i8n国际化支持
 ├─router                路由模块
 ├─store                 vuex的模块,公共的state, mutations方法
 ├─utils                 工具类模块,包含http,本地缓存等.
 ├─views                 各个page页面的存放目录
 ├─App.vue               入口组件,挂载入口
 └─main.js               main入口js文件,引入全局使用的库、公共的样式和方法

การแสดงผล:

วิธีการวิ่ง:

-. โคลนโครงการ ( git clone https://github.com/pjqdyd/Vue-template-web.git )

- เรียกใช้ npm install เพื่อดาวน์โหลดการอ้างอิง (หากการดาวน์โหลดช้า: npm install --registry=https://registry.npm.taobao.org )

- เรียกใช้ npm run serve เพื่อเริ่มโปรเจ็กต์ และไปที่ http://localhost:8080 เพื่อเรียกดูเพจ

-.Run npm run build เพื่อคอมไพล์และจัดทำแพ็คเกจโปรเจ็กต์

สังเกต:

1. Vue-template-web-cdn สาขาใหม่ใช้ CDN เพื่อโหลดการขึ้นต่อกันบางส่วน เพื่อป้องกันไม่ให้ไฟล์ js มีขนาดใหญ่เกินไปหลังจากการแพ็กกิ้ง และหน้าจอแรกใช้เวลาโหลดนานเกินไป

ทดสอบแล้ว:

 master分支运行npm run build后dist文件夹大小为_4M_左右;

Vue-template-web-cdn分支打包后的dist文件夹减少至_100kb_左右;

ดังนั้นจึงขอแนะนำให้ใช้สาขา Vue-template-web-cdn

2. หลังจากปรับการเลื่อนให้เหมาะสมโดยใช้จุดยึด window.scrollTo(options) ให้ใส่ใจกับความเข้ากันได้ของเบราว์เซอร์: window.scrollTo เข้ากันได้ แน่นอนว่าคุณสามารถเลือกเวอร์ชันการส่งก่อนหน้าเพื่อให้เข้ากันได้กับเบราว์เซอร์อื่น

คำใบ้:

1. โปรเจ็กต์ใช้การเปลี่ยน vue element-ui i8n ให้เป็นสากล การสลับภาษาจีนและอังกฤษกำหนดภาษาสองชุด ซึ่งกำหนดไว้ภายใต้ i18n/langs/

2. การดำเนินการเปลี่ยนแปลงธีม:

ก่อนหน้านี้มีการใช้งานโดยอ้างอิงถึงกรณีการเปลี่ยนสกินอย่างเป็นทางการ สีสามารถเปลี่ยนแปลงได้พร้อมกับส่วนประกอบของ ElementUI เนื่องจากวิธีนี้ยุ่งยากกว่าและอาจทำให้เกิดข้อบกพร่องที่ไม่รู้จัก ขณะนี้เราจึงใช้การบันทึกค่าสีโดยตรงเพื่อเปลี่ยนธีม และส่ง this.$ ในโปรเจ็กต์ store.state.theme สามารถรับค่าสีของธีมได้
(แนะนำเพิ่มเติม: คุณสามารถใช้ตัวแปร css var เพื่อเชื่อมโยงกับองค์ประกอบรูทเพื่อเปลี่ยนสไตล์)

3. การเลื่อนจุดยึดหน้าอ้างอิงถึงโครงการโอเพ่นซอร์สนี้

4. โปรเจ็กต์สรุปคำขอ axios และผูกแอตทริบิวต์โกลบอล $globalRequest คุณสามารถเรียกใช้เมธอดคำขอแบบอะซิงโครนัส test4() บนเพจใดก็ได้ผ่าน await this.$globalRequest.test4(arg);

5. หากโครงการพบจุดที่สามารถปรับปรุงได้ คุณสามารถแจ้งปัญหาเพื่อการปรับปรุงได้