ดาวน์โหลด vue boilerplate template - vue boilerplate template ดาวน์โหลดซอร์สโค้ด

vue boilerplate template

หมวดหมู่อื่นๆ

vue-boilerplate-template V2.0.0

ดาวน์โหลด

เทมเพลต Vue Boilerplate

?(vue webpack vuex vue-router vue-i18n element-ui) นอกกรอบ

- เทมเพลต Boilerplate ที่ดีสำหรับการสร้างโปรเจ็กต์ Medium Plus Vue.js(2.*)

วิกิพีเดียภาษาจีน

เป้าหมายและปรัชญา

สำหรับวิธีสร้างโปรเจ็กต์ VUE ขนาดกลาง (+) ให้อ้างอิงตามประสบการณ์ที่ผ่านมา Vue Boilerplate ล่าสุดที่ใช้ vue-cli3 เป็นโอเพ่นซอร์ส: Awesome-vue-cli3-example หากคุณใส่ใจกับมัน ฉันเชื่อว่ามันคุ้มค่ามาก ?

ข้อกำหนดเบื้องต้น

Node.js (ต้องการ >=4.x, 8.x), Npm เวอร์ชัน 4+ (ต้องการ Yarn) และ Git

สาธิต

หน้าสาธิตออนไลน์

ข้อได้เปรียบ

ขึ้นอยู่กับ vue-cli build ทำการเพิ่มประสิทธิภาพเพิ่มเติมสำหรับวิธีอำนวยความสะดวกในการใช้งาน vue
ได้รวมไลบรารี่ที่ใช้กันทั่วไปไว้มากมายแล้ว เช่น vue-i18n , axios , lodash ...
ด้วยบทความประสบการณ์บางส่วนเกี่ยวกับ Vue เช่น: 如何写一手漂亮的 Vue และยังมีการปรับปรุงอยู่
ทำการเพิ่มประสิทธิภาพเพิ่มเติมเกี่ยวกับวิธีการสร้างแอปพลิเคชันโดยใช้ WebPack
- Webpack 打包优化之体积篇
- Webpack 打包优化之速度篇
- เพิ่มประสิทธิภาพไลบรารีของคุณด้วย webpack
- บทช่วยสอนที่ดีของ Webpack

การใช้งาน

 git clone https://github.com/nicejade/vue-boilerplate-template (your-project-name)
cd your-project-name
npm install (npm i / yarn)
npm start / npm run dev / yarn run dev

ไปที่ http://localhost:8080/ หากเครื่องของคุณมีการใช้งานพอร์ต 8080 อยู่แล้ว โปรแกรมจะระบุพอร์ตที่ใช้ได้ (ส่วนเพิ่ม) ให้กับคุณ เช่น 8081 / 8082 ... . แน่นอนคุณสามารถเปลี่ยนพอร์ตได้ชั่วคราวโดยใช้คำสั่งต่อไปนี้:

 PORT=8888 npm run dev

ข้อมูลเพิ่มเติม : คุณต้องแน่ใจว่า PORT เป็นคำสั่งที่สามารถดำเนินการบนเครื่องของคุณได้

คำสั่งเพิ่มเติม

 npm run build

node build.js เริ่มต้นโครงการสร้าง

 npm run build:dll

การดำเนินการที่เทียบเท่า webpack --config build/webpack.dll.conf.js สำหรับข้อมูลเพิ่มเติม โปรดดูที่ webpack.DllPlugin

 npm run jarvis / yarn run jarvis

เรียกใช้ webpack-jarvis (แดชบอร์ด Webpack ที่ใช้เบราว์เซอร์ที่ชาญฉลาดมาก)， ในเบราว์เซอร์ของคุณเปิด: localhost:1337 คุณมีมัน

npm run pretest

การใช้ nodejs เพื่อสร้างเซิร์ฟเวอร์ภายในเครื่อง: http://localhost:3000/ ทำการทดสอบเบื้องต้นสำหรับโค้ดหลังแพ็กเกจ

 npm run analyz

ปลั๊กอิน Webpack และยูทิลิตี้ CLI ที่แสดงเนื้อหาแบบรวมเป็นแผนผังต้นไม้แบบโต้ตอบที่สามารถซูมได้ที่สะดวก มันจะเปิดที่อยู่นี้โดยอัตโนมัติ：http://localhost:8888/

รายการปลั๊กอินที่ต้องพึ่งพา

วิว2
vue-เราเตอร์
วูเอ็กซ์
vue-i18n
axios
บูตสแตรป
องค์ประกอบ-ui
โลแดช
~~ช่วงเวลา~~ วันจ
js-คุกกี้
-

คำขอดำเนินการ

แบ็กเอนด์ของคุณสามารถส่งคืนข้อมูลรูปแบบต่อไปนี้ได้ จะดีกว่า

 {
  success: true,
  message: 'err message content',
  value: [
    // Useful data
  ]
}

ที่ส่วนหน้า คุณสามารถจัดการคำขอได้ดังนี้：

 let params = {
  // Interface required parameters
}
this.isLoading = true
this.$apis.moduleName.getProfile(params).then(result => {
  // Handle the correct data you received
}).catch(error => {
  this.$message.error(`Error: ${error}`)
}).fin(() => {
  this.isLoading = false
})

ด้วยความเอาใจใส่ เทมเพลตได้รับการช่วยเหลือในการจัดการคำขออย่างเท่าเทียมกัน ดังนั้นคุณจึงใช้งานง่ายมาก แน่นอนว่าคุณสามารถเปลี่ยนแปลงของคุณเองได้ตามต้องการในไฟล์ helper/ajax.js