Cách Xây dựng ứng dụng Web với Vue.js và ASP.NET Core

Bộ khởi đầu ASP.NET Core & Vue.js

Mẫu khởi đầu cho ASP.NET Core và Vue.JS (Vue) – với Webpack (với HMR), Web API, quản lý trạng thái Vuex và các best-practices khác!

Được viết bằng ES6, phiên bản TypeScript sẽ sớm được công bố

Được tạo bởi :heart: bởi Trilon.io

Tính năng

• ASP.NET Core 2.2
• Web API
• VueJS 2
• Vuex (State Store)
• Webpack
• HMR (Hot Module Replacement/Reloading)
• Bootstrap 4

Tiên quyết:

• .Net Core 2.2
• NodeJS >= 10.x
• VSCode (lý tưởng), hoặc VS2017

Cài đặt:

Nuget | Dotnet Templates

Tìm mẫu thông qua quản lý gói NuGet bên trong Visual Studio hoặc here

Hoặc tải về qua các mẫu dotnet

// Make a directory where you want the project
mkdir my-vue-starter && cd my-vue-starter

// Download the dotnet template
dotnet new -i aspnetcore-vuejs

// Run and install the template
dotnet new vuejs

// Make sure you install the dependencies
npm install

Bây giờ bạn có thể mở dự án qua Visual Studio hoặc VSCode, nhấn F5 để chạy ứng dụng!

Lưu ý:

• Điều này sẽ tự động chạy dotnet restore trừ khi bạn cài đặt với dotnet new vuejs --skipRestore
• (Official documentation)
• Điều này sẽ tự động chạy dotnet restore trừ khi bạn cài đặt với dotnet new vuejs --skipRestore

-HOẶC- Sao chép kho dữ liệu này

• Sao chép kho dữ liệu này: $ git clone https://github.com/MarkPieszak/aspnetcore-Vue-starter.git VueWeb
• $ cd VueWeb/content
• $ dotnet restore && npm install
• (Nếu sử dụng VSCode) $ code .
• (Nếu sử dụng Visual Studio) Mở tệp *.sln bằng cách sử dụng “Mở dự án” từ Visual Studio IDE

Khởi chạy ứng dụng:

Bạn có hai lựa chọn khi đến việc bạn thích cách chạy nó. Bạn có thể sử dụng dòng lệnh hoặc lệnh chạy tích hợp sẵn.

1. Sử dụng dòng lệnh

Chạy ứng dụng bằng cách sử dụng npm run dev.

2. Sử dụng lệnh chạy tích hợp sẵn

Chạy ứng dụng trong VSCode hoặc Visual Studio 2017 bằng cách nhấn F5.

Xem ứng dụng của bạn đang chạy

Khi chạy ứng dụng bằng menu gỡ lỗi hoặc F5 trong VS, ứng dụng sẽ tự động mở trong trình duyệt;

Video minh họa ứng dụng đang chạy

Plugin được đề xuất cho việc gỡ lỗi VueJS

• Tải Chrome DevTools cho VueJS here

Phát hiện Lỗi? Muốn đóng góp?

Bạn đang tìm kiếm bộ khởi đầu Universal ASP.NET Core & Angular 7.x+? click here

Trilon – Tư vấn Vue, Asp.NET, NodeJS | Đào tạo | Phát triển

Xem thông tin tại Trilon.io!

Liên hệ chúng tôi qua hello@trilon.io, và chúng ta hãy thảo luận về nhu cầu dự án của bạn. 

Chi tiết tải về:

Tác giả: TrilonIO
Nguồn: https://github.com/TrilonIO/aspnetcore-Vue-starter

Giấy phép: MIT license