Mẫu ASP.NET Core 3.1 multi-page Vue.js với TypeScript
Dự án này chứa một mẫu sử dụng Vue.js, Vuex, Vue router, TypeScript, Bulma và SASS. Nó tích hợp Vue vào AspNetCore MVC và giới thiệu cách sử dụng Vue cùng với toàn bộ hệ sinh thái của nó trong .NET như một ứng dụng multipage (nhiều mini SPA). Mẫu này cũng có thể sử dụng như một ứng dụng trang đơn hoàn chỉnh, nhưng bạn nên xem xét sử dụng Vue cli cho điều này vì đó là một giải pháp linh hoạt và tiên tiến hơn.
Không cần TypeScript: Mẫu này hoàn toàn hỗ trợ việc sử dụng mà không cần TypeScript. Bạn có thể sử dụng plain js nếu bạn không cần hoặc không muốn sử dụng TypeScript.
Nuget
NuGet | Phiên bản | Tải về |
---|---|---|
AspNetCore.Vue.TypeScript.Template |
Tính năng
- ASP NET Core 3.1
- Vue.js
- Vuex
- TypeScript
- Bulma
- Sass
- Webpack 4
Yêu cầu
Cài đặt
Để tạo dự án mới từ mẫu này, bạn phải cài đặt nó trước.
Cài đặt mẫu từ NuGet bằng cách chạy lệnh sau:
dotnet new -i AspNetCore.Vue.TypeScript.Template
Nếu thành công, bạn sẽ thấy mẫu mới trong danh sách mẫu của bạn ASP.NET Core với Vue, Vuex và TypeScript
Tạo dự án mới
Để tạo dự án mới, hãy chạy lệnh dotnet new vuetypescript
và cung cấp tên của dự án của bạn như là tham số -n
hoặc --name
. Nếu không cung cấp tên, tên của thư mục hiện tại sẽ được sử dụng.
Ví dụ
dotnet new vuetypescript --name TestProject.Web
Chạy dự án mới được tạo
Để chạy ứng dụng của bạn, bạn chỉ cần khởi động nó từ Visual Studio hoặc chạy lệnh dotnet run
từ dòng lệnh.
CHÚ Ý: Khi khởi động ứng dụng lần đầu, quá trình xây dựng có thể mất một thời gian vì nó sẽ cài đặt các gói npm cần thiết.
Phát triển, xuất bản và các lệnh có sẵn
Mẫu này có các lệnh sau đây
npm run dev
– Xây dựng giao diện phía trước ở chế độ phát triển và theo dõi bất kỳ thay đổi nào được thực hiện trên các tệp.npm run build:dev
– Xây dựng giao diện phía trước ở chế độ phát triển.npm run build:prod
– Xây dựng giao diện phía trước ở chế độ sản xuất.npm run test
– Chạy các bài kiểm tra dưới thư mục tests và tạo báo cáo về phạm vi mã nguồn. Bài kiểm tra đã bị loại bỏ để đơn giản hóa cấu hình và gói.npm run publish
– Xây dựng các gói giao diện phía trước được tối ưu hóa cho sản xuất và xuất bản ứng dụng ở chế độ phát hành.
Ảnh chụp màn hình
Sử dụng thư viện bên thứ ba
VueX store với TypeScript
Thông tin về Mẫu
Truy xuất dữ liệu từ API bên ngoài
Chi tiết tải xuống:
Tác giả: danijelh
Nguồn: https://github.com/danijelh/aspnetcore-vue-typescript-template
Giấy phép: MIT license