aspdotnet vuejs
v3.0.0
도트 코어 3.0 + vuejs이 프로젝트의 주요 아이디어는 서버 측에서 .NET Core WebApi를 사용하고 클라이언트 측에서 vuejs를 사용하여 새로운 프로젝트를 시작하는 쉬운 방법을 제공하는 것입니다. 이 목표를 위해 일부 유틸리티를 핫 재 장전으로 사용하고 일부 프론트 엔드 라이브러리를 요소 UI 및 FontAwesome으로 사용 하여이 통합을 가능하게하기 위해 기본 구성을 설정합니다.
우리의 목표는 최소 의존성 및 성능 문제를 가진 간단한 스파를 제공하는 것입니다. vuejs는 vuex 및 vue 라우터로 구성되어 있지만 요구 사항을 충족하지 않으면 제거 할 수 있습니다. 구성 요소 라이브러리도 마찬가지입니다. 이 템플릿에서는 메인 기능이있는 예제도 제공합니다.
이 템플릿은 Mark Pieszak의 프로젝트 및 Nordes 프로젝트에서 영감을 얻고 조정되었습니다.
* 진행중인 작업. 향후 릴리스에서 사용할 수 있습니다.
템플릿을 다운로드하고 설치하려면 다음을 입력하십시오.
> dotnet new -i aspdotnet-vuejs
dotnet new -l명령을 사용하여 설치된 템플릿 목록을 볼 수 있습니다.
그런 다음 프로젝트를 만들려면 디렉토리의 명령을 사용하면 다음과 같습니다.
> 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/도트넷 CLI의 다른 모든 매개 변수를 추가 할 수도 있습니다. 자세한 내용은 MSDN 사이트를 방문하십시오.
이렇게하면 프로젝트를 재건 한 다음 특별 대상을 사용하여 프로덕션 모드에서 클라이언트 (vuejs)를 재건합니다.
Nginx 서버 뒤에 게시하는 경우 더 많은 구성이 필요할 수 있습니다.
기본 사이트 http://www.example.com 있고 Nginx 구성에 http://www.example.com/myApp 내에 Dotnet 앱을 갖고 싶다고 가정 해 봅시다. 이러한 시나리오에서 index.html의 기본 URI를 설정하려면 필요합니다. 개발과 생산 사이에서 수동으로 수행하는 대신 가능한 재정의가 포함 된 파일 ./build/base.prod.config.js 가 있습니다.
다음과 같이 재정의를 설정하십시오.
module . exports = {
baseUriPath : '/myApp/'
}다음에 게시하면 경로가 고려되고 기본 URI 경로를 자동으로 설정합니다.
이 프로젝트는 이미 Docker Hub를 통해 사용할 수있는 Docker 컨테이너를 추가했습니다. 원하는 경우 이미지를 가져올 수 있습니다. 샘플을 로컬로 사용할 수있게합니다. 이미지는 알파인 버전을 사용하므로 작은 발자국 만 사용합니다.
Docker의 컨테이너는 매우 인기가 있기 때문에 Dockerfile 은 템플릿 루트 폴더에도 포함되어 있습니다. 게시하기 전에 원치 않는 파일을 복사하지 않기 위해 일부 파일이 무시되는 .dockerignore 를 잊지 마십시오.
Docker가 설치되어 있는지 확인하십시오.
코드는 HTTPS에 GZIP 압축을 내장하고 있습니다. 특히 Kestrel을 사용하는 경우 해당 코드를 사용하는 것이 좋습니다. 그렇지 않으면 IIS를 사용하는 경우 Startup.cs 에있는 특정 코드를 제거하십시오. 일반적으로 IIS는 더 성능이있는 자체 압축 모듈을 제공합니다.
./clientApp/components/**/* 내에서 사용 가능한 Components 에 관한 자동화가 있습니다. 키워드 base 으로 시작하는 모든 파일은 글로벌로 선언되며 어디에서나 사용할 구성 요소의 이름은 base 키워드없이 뱀 케이스 에서 정의됩니다.
예 : baseHelloWorld hello-world 로 등록되며 VUE 템플릿에서 사용할 수 있습니다.
< template >
< div >
< hello-world /> works!
</ div >
</ template >각 페이지의 카드 구성 요소에 대한 프로젝트 내에 실제 예가 있습니다. 구성 요소의 이름은
baseCard.vue입니다.
개발 모드에있는 동안 CSS가 생성되지 않습니다. dotnet publish 명령을 사용하거나 대안으로 사용할 때만 만들어 질 것입니다. 또한 npm run build -- --prod .
중요 : 현재 WebPack은 .NET 프로젝트 내에서 WWWROOT 폴더 전체를 정리합니다. 따라서 정적 파일이있는 경우 ./clientapp/static/ 폴더 내에서 파일을 이동하십시오.
개발을 더 빨리 만들기 위해 구성 요소 라이브러리 요소 -UI 설치를 제공합니다. 이 라이브러리의 문서는 그의 사이트에 설립 될 수 있습니다.
필요하지 않은 경우
main.js에서 정상적으로 제거 할 수 있습니다.
