aspdotnet vuejs
v3.0.0
Dotnet Core 3.0 + VueJsLa idea principal de este proyecto es proporcionar una manera fácil de iniciar un nuevo proyecto utilizando .Net Core WebAPI en el lado del servidor y VueJs en el lado del cliente. Para este objetivo, configuramos la configuración principal para permitir esta integración utilizando algunas utilidades como recarga en caliente y algunas bibliotecas frontend como Element-UI y FontAwesome.
Nuestro objetivo es proporcionar un SPA simple con dependencias mínimas y problemas de rendimiento. VueJs está configurado con Vuex y Vue Router, pero esto se puede eliminar si cree que no cumple con sus requisitos. Lo mismo ocurre con la biblioteca de componentes. En esta plantilla, también proporcionamos ejemplos con las principales funcionalidades.
Esta plantilla está inspirada y adaptada del proyecto de Mark Pieszak y del proyecto Nordes.
* Trabajo en progreso. Disponible en futuras versiones.
Para descargar e instalar la plantilla, simplemente escriba:
> dotnet new -i aspdotnet-vuejsPuede ver una lista de plantillas instaladas utilizando el comando
dotnet new -l.
Luego, para crear su proyecto, simplemente usará el siguiente comando en el directorio:
> dotnet new vue Esto ejecutará automáticamente dotnet restore . Pero se puede cambiar en las configuraciones de la plantilla. Consulte dotnet new vue -h antes de usar el comando anterior.
El nombre de la solución y del proyecto será el nombre del directorio.
Para actualizar su instalación, solo necesitará repetir el proceso de instalación. Mientras los números de versión no sean iguales, no tendrás ningún comportamiento inesperado.
Escriba el siguiente comando desde el shell:
> dotnet new -u aspdotnet-vuejsPara comenzar a desarrollar su aplicación, simplemente use el comando .Net CLI:
> dotnet run YourAplication.csprojPuede simplemente escribir
dotnet runen el directorio del proyecto o configurar su IDE para que se ejecute. En este último caso, no olvide pasar la variable de entornoASPNETCORE_ENVIRONMENT=Development.
Esto también ejecutará todas las dependencias de nodos como npm i .
La aplicación se iniciará en modo Desarrollo con la recarga en caliente habilitada en
https://localhost:5001yhttp://localhost:5000.
Debe asegurarse de que su wwwroot esté vacío antes de comenzar el proceso.
Simplemente use la forma normal de publicación usando .Net Core CLI
> dotnet publish YourProject.csproj -c release -o ./publish/También puede agregar todos los demás parámetros desde dotnet cli. Visite el sitio de MSDN para saber más al respecto.
Esto reconstruirá su proyecto y luego usará el objetivo especial para reconstruir su cliente (vuejs) en modo de producción.
Si publica detrás de un servidor NginX, es posible que necesite más configuración.
Digamos que tiene su sitio base http://www.example.com y que en su configuración de NginX le gustaría tener su aplicación dotnet dentro de http://www.example.com/myApp . En tal escenario, necesitará establecer el URI base para index.html. En lugar de hacerlo manualmente entre desarrollo y producción, tiene el archivo ./build/base.prod.config.js que contiene una posible anulación.
Simplemente configure su anulación de la siguiente manera:
module . exports = {
baseUriPath : '/myApp/'
}La próxima vez que publique, se tendrá en cuenta la ruta y se establecerá automáticamente la ruta uri base.
El proyecto ya agrega algunos contenedores acoplables disponibles a través de Docker Hub. Puedes sacar la imagen si quieres. Hará que la muestra esté disponible localmente. La imagen utiliza la versión Alpine, por lo que ocupa poco espacio.
Dado que los contenedores en Docker son bastante populares, también se incluye un Dockerfile dentro de la carpeta raíz de la plantilla. No olvide el .dockerignore donde se ignoran algunos archivos para evitar que se copie algún archivo no deseado antes de publicarlo.
Asegúrese de tener Docker instalado.
El código tiene incorporada la compresión Gzip en los HTTP. Es bueno usar ese código, especialmente si usas Kestrel. De lo contrario, si usa IIS, elimine el código específico que se encuentra en Startup.cs . Normalmente, IIS ofrece su propio módulo de compresión que tiene más rendimiento.
Hay cierta automatización con respecto a los Components disponibles en ./ClientApp/components/**/* . Todos los archivos que comiencen con la palabra clave base se declararán como globales y el nombre del componente que se utilizará en cualquier lugar se definirá en mayúsculas y minúsculas sin la palabra clave base .
Ejemplo: baseHelloWorld se registrará como hello-world y podrás usarlo en tu plantilla Vue.
< template >
< div >
< hello-world /> works!
</ div >
</ template >Hay un ejemplo real dentro del proyecto para el componente de tarjeta de cada página. El nombre del componente es
baseCard.vue.
El CSS no se genera mientras estás en modo de desarrollo. Se crearán solo cuando use el comando dotnet publish o, como alternativa, también puede escribir npm run build -- --prod que iniciará la compilación de producción con la minificación y extracción de los archivos.
Importante: actualmente, el paquete web limpia toda la carpeta wwwroot dentro del proyecto .Net. Entonces, si tiene archivos estáticos, muévalos dentro de la carpeta ./ClientApp/static/ .
Para ayudar a que el desarrollo sea más rápido, proporcionamos la instalación de la biblioteca de componentes Element-UI. La documentación de esta biblioteca se puede encontrar en su sitio.
Se puede eliminar normalmente en
main.jssi no es necesario.
