ดาวน์โหลด aspdotnet vuejs - aspdotnet vuejs ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

aspdotnet vuejs

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

v3.0.0

ดาวน์โหลด

Dotnet Core 3.0 + Vuejs

แนวคิดหลักของโครงการนี้คือการจัดหาวิธีที่ง่ายในการเริ่มโครงการใหม่โดยใช้. NET Core WebAPI ในฝั่งเซิร์ฟเวอร์และ VueJS ในฝั่งไคลเอ็นต์ สำหรับเป้าหมายนี้เราตั้งค่าการกำหนดค่าหลักเพื่อเปิดใช้งานการรวมนี้โดยใช้ยูทิลิตี้บางอย่างเป็นการโหลดซ้ำและไลบรารีส่วนหน้าบางส่วนเป็น Element-UI และ Fontawesome

เป้าหมายของเราคือการจัดหาสปาอย่างง่ายด้วยการพึ่งพาขั้นต่ำและปัญหาด้านประสิทธิภาพ VueJS ได้รับการกำหนดค่าด้วย Vuex และ Vue เราเตอร์ แต่สามารถลบออกได้หากคุณไม่รู้สึกว่ามันตรงตามข้อกำหนดของคุณ เช่นเดียวกันสำหรับไลบรารีส่วนประกอบ ในเทมเพลตนี้เรายังให้ตัวอย่างกับฟังก์ชันหลัก

เทมเพลตนี้ได้รับแรงบันดาลใจและดัดแปลงมาจากโครงการของ Mark Pieszak และโครงการ Nordes

สารบัญ

สารบัญ
- เทคโนโลยีภายใน
- การติดตั้ง
  - อัปเดตการติดตั้งของคุณ?
  - การถอนการติดตั้ง
- พัฒนา
- เผยแพร่ใบสมัครของคุณ
  - ก่อนเผยแพร่
  - สำนักพิมพ์
  - พิเศษถ้าคุณใช้ nginx
- นักเทียบท่า
  - Docker - สร้างตัวเอง
- ระบบอัตโนมัติบางส่วน
  - Kestrel ที่ให้บริการโดยใช้การบีบอัด GZIP
  - ส่วนประกอบพื้นฐาน
  - build webpack
  - Vuex
- Look'n Feel
  - องค์ประกอบ UI

ใบอนุญาต

เทคโนโลยีภายใน

.NET CORE 3.0
Vuejs
Webpack 4
องค์ประกอบ UI
บาเบล
Vuex
Vue-Router
ESLINT (Airbnb + Vuejs-recomended)
Swagger *
VUE-I18N *
vee-validate *
Livereload *

* ทำงานอยู่ระหว่างดำเนินการ วางจำหน่ายในอนาคต

การติดตั้ง

ในการดาวน์โหลดและติดตั้งเทมเพลตเพียงพิมพ์:

 > dotnet new -i aspdotnet-vuejs

คุณสามารถดูรายการเทมเพลตที่ติดตั้งได้โดยใช้คำสั่ง dotnet new -l

จากนั้นในการสร้างโครงการของคุณคุณจะใช้คำสั่ง Bellow ในไดเรกทอรี:

 > dotnet new vue

สิ่งนี้จะเรียกใช้ dotnet restore โดยอัตโนมัติ แต่สามารถเปลี่ยนแปลงได้ในการกำหนดค่าเทมเพลต ดู dotnet new vue -h ก่อนใช้คำสั่งก่อนหน้า

โซลูชันและชื่อโครงการจะเป็นชื่อของไดเรกทอรี

อัปเดตการติดตั้งของคุณ

ในการอัปเดตการติดตั้งของคุณคุณจะต้องทำซ้ำกระบวนการติดตั้ง ตราบใดที่หมายเลขเวอร์ชันไม่เท่ากับคุณจะไม่มีพฤติกรรมที่ไม่คาดคิด

การถอนการติดตั้ง

พิมพ์คำสั่งต่อไปนี้จากเชลล์:

 > dotnet new -u aspdotnet-vuejs

พัฒนา

ในการเริ่มพัฒนาแอปพลิเคชันของคุณเพียงใช้คำสั่ง. NET CLI:

 > dotnet run YourAplication.csproj

คุณสามารถพิมพ์ dotnet run ในไดเรกทอรีโครงการหรือกำหนดค่า IDE ของคุณให้ทำงาน ในกรณีสุดท้ายนี้อย่าลืมที่จะผ่านตัวแปร ASPNETCORE_ENVIRONMENT=Development

สิ่งนี้จะเรียกใช้การพึ่งพาโหนดทั้งหมดเช่น npm i

แอปพลิเคชันจะเริ่มต้นในโหมด การพัฒนา โดยเปิดใช้งานการโหลดซ้ำที่ https://localhost:5001 และ http://localhost:5000

เผยแพร่ใบสมัครของคุณ

ก่อนเผยแพร่

คุณต้องตรวจสอบให้แน่ใจว่า wwwroot ของคุณ ว่างเปล่า ก่อนที่จะเริ่มกระบวนการ

สำนักพิมพ์

เพียงใช้วิธีการเผยแพร่ปกติโดยใช้. NET Core CLI

 > dotnet publish YourProject.csproj -c release -o ./publish/

คุณยังสามารถเพิ่มพารามิเตอร์อื่น ๆ ทั้งหมดจาก Dotnet CLI กรุณาเยี่ยมชมเว็บไซต์ MSDN เพื่อทราบข้อมูลเพิ่มเติม

สิ่งนี้จะทำการสร้างโครงการของคุณใหม่และหลังจากนั้นจะใช้เป้าหมายพิเศษเพื่อสร้างลูกค้าของคุณ (VueJs) ในโหมดการผลิต

พิเศษถ้าคุณใช้ nginx

หากคุณกำลังเผยแพร่อยู่เบื้องหลังเซิร์ฟเวอร์ Nginx คุณอาจต้องกำหนดค่าเพิ่มเติม

สมมติว่าคุณมีเว็บไซต์พื้นฐานของคุณ http://www.example.com และในการกำหนดค่า Nginx ของคุณคุณต้องการให้แอพ Dotnet ของคุณอยู่ใน http://www.example.com/myApp คุณจะต้องมีสถานการณ์ดังกล่าวเพื่อตั้งค่า URI พื้นฐานสำหรับ index.html แทนที่จะทำสิ่งนั้นด้วยตนเองระหว่างการพัฒนาและการผลิตคุณมีไฟล์ ./build/base.prod.config.js ซึ่งมีการแทนที่ที่เป็นไปได้

เพียงแค่ตั้งค่าการแทนที่ของคุณดังต่อไปนี้:

 module . exports = {
  baseUriPath : '/myApp/'
}

เมื่อคุณจะเผยแพร่ในครั้งต่อไปเส้นทางจะถูกนำมาพิจารณาและจะตั้งค่าเส้นทาง URI พื้นฐานโดยอัตโนมัติ

นักเทียบท่า

โครงการเพิ่มคอนเทนเนอร์ Docker ที่มีอยู่แล้วผ่าน Hub Docker แล้ว คุณสามารถดึงภาพได้หากต้องการ มันจะทำให้ตัวอย่างมีอยู่ในท้องถิ่น ภาพใช้เวอร์ชันอัลไพน์ดังนั้นจึงใช้รอยเท้าขนาดเล็กเท่านั้น

Docker - สร้างตัวเอง

เนื่องจากคอนเทนเนอร์ใน Dockerfile ค่อนข้างเป็นที่นิยม อย่าลืม .dockerignore ที่บางไฟล์ถูกละเว้นเพื่อหลีกเลี่ยงไฟล์ที่ไม่ต้องการที่จะคัดลอกก่อนเผยแพร่

ตรวจสอบให้แน่ใจว่าคุณติดตั้ง Docker แล้ว

ระบบอัตโนมัติบางส่วน

Kestrel ที่ให้บริการโดยใช้การบีบอัด GZIP

รหัสมีการบีบอัด GZIP ในตัวบน HTTPS เป็นการดีที่จะใช้รหัสนั้นโดยเฉพาะถ้าคุณใช้ Kestrel มิฉะนั้นหากคุณใช้ IIS โปรดลบรหัสเฉพาะที่พบใน Startup.cs โดยปกติแล้ว IIS เสนอโมดูลการบีบอัดของตัวเองซึ่งมีประสิทธิภาพมากกว่า

ส่วนประกอบพื้นฐาน

มีระบบอัตโนมัติบางส่วนเกี่ยวกับ Components ที่มีอยู่ภายใน ./ clientapp/components/**/* ไฟล์ทั้งหมดที่เริ่มต้นด้วย base คำหลักจะถูกประกาศเป็นโกลบอลและชื่อของส่วนประกอบที่จะใช้ทุกที่จะถูกกำหนดใน กรณีงู โดยไม่มีคำหลัก base

ตัวอย่าง: baseHelloWorld จะลงทะเบียนเป็น hello-world และคุณจะสามารถใช้งานได้ในเทมเพลต Vue ของคุณ

 < template >
  < div >
    < hello-world /> works!
  </ div >
</ template >

มีตัวอย่างจริงภายในโครงการสำหรับส่วนประกอบการ์ดสำหรับแต่ละหน้า ชื่อของส่วนประกอบคือ baseCard.vue

build webpack

CSS ไม่ได้สร้างขึ้นในขณะที่คุณอยู่ในโหมดการพัฒนา พวกเขาจะถูกสร้างขึ้นเมื่อคุณจะใช้คำสั่ง dotnet publish หรือเป็นทางเลือกอื่นคุณยังสามารถไปและพิมพ์ npm run build -- --prod ซึ่งจะเปิดตัวการผลิตด้วยการลดขนาดและการแยกไฟล์