aspdotnet vuejs
v3.0.0
Dotnet Core 3.0 + VueJL'idée principale de ce projet est de fournir un moyen simple de démarrer un nouveau projet en utilisant .Net Core WebAPI côté serveur et VueJs côté client. Pour cet objectif, nous avons configuré la configuration principale pour permettre cette intégration en utilisant certains utilitaires comme le rechargement à chaud et certaines bibliothèques frontales comme Element-UI et FontAwesome.
Notre objectif est de fournir un SPA simple avec un minimum de dépendances et de problèmes de performances. Le VueJs est configuré avec Vuex et Vue Router, mais cela peut être supprimé si vous pensez qu'il ne répond pas à vos besoins. Il en va de même pour la bibliothèque de composants. Dans ce modèle, nous fournissons également des exemples avec les principales fonctionnalités.
Ce modèle est inspiré et adapté du projet de Mark Pieszak et du projet Nordes.
* Travail en cours. Disponible dans les prochaines versions.
Pour télécharger et installer le modèle, tapez simplement :
> dotnet new -i aspdotnet-vuejsVous pouvez voir une liste des modèles installés à l'aide de la commande
dotnet new -l.
Ensuite pour créer votre projet vous utiliserez simplement la commande ci-dessous dans le répertoire :
> dotnet new vue Cela exécutera automatiquement dotnet restore . Mais cela peut être modifié dans les configurations des modèles. Voir dotnet new vue -h avant d'utiliser la commande précédente.
La solution et le nom du projet seront le nom du répertoire.
Pour mettre à jour votre installation, il vous suffira de répéter le processus d'installation. Tant que les numéros de version ne sont pas égaux, vous n'aurez pas de comportement inattendu.
Tapez la commande suivante depuis le shell :
> dotnet new -u aspdotnet-vuejsPour commencer à développer votre application, utilisez simplement la commande CLI .Net :
> dotnet run YourAplication.csprojVous pouvez simplement taper
dotnet rundans le répertoire du projet ou configurer votre IDE pour qu'il s'exécute. Dans ce dernier cas, n'oubliez pas de passer la variable d'environnementASPNETCORE_ENVIRONMENT=Development.
Cela exécutera également toutes les dépendances de nœuds comme npm i .
L'application sera démarrée en mode Développement avec le rechargement à chaud activé sur
https://localhost:5001ethttp://localhost:5000.
Vous devez vous assurer que votre wwwroot est vide avant de démarrer le processus.
Utilisez simplement la méthode normale de publication à l’aide de .Net Core CLI
> dotnet publish YourProject.csproj -c release -o ./publish/Vous pouvez également ajouter tous les autres paramètres du dotnet cli. Veuillez visiter le site MSDN pour en savoir plus.
Cela effectuera une reconstruction de votre projet, puis utilisera la cible spéciale pour reconstruire votre client (vuejs) en mode production.
Si vous publiez derrière un serveur NginX, vous aurez peut-être besoin de plus de configuration.
Disons que vous avez votre site de base http://www.example.com et que dans votre configuration NginX, vous souhaitez avoir votre application dotnet dans http://www.example.com/myApp . Dans un tel scénario, vous devrez définir l'URI de base pour index.html. Au lieu de faire cela manuellement entre le développement et la production, vous disposez du fichier ./build/base.prod.config.js qui contient un éventuel remplacement.
Définissez simplement votre remplacement comme suit :
module . exports = {
baseUriPath : '/myApp/'
}Lors de votre prochaine publication, le chemin sera alors pris en compte et il définira automatiquement le chemin de l'uri de base.
Le projet ajoute déjà un conteneur Docker disponible via le Docker Hub. Vous pouvez extraire l'image si vous le souhaitez. Cela rendra l’échantillon disponible localement. L'image utilise la version Alpine, elle n'utilise donc qu'un faible encombrement.
Étant donné que les conteneurs dans Docker sont très populaires, un Dockerfile est également inclus dans le dossier racine du modèle. N'oubliez pas le .dockerignore où certains fichiers sont ignorés afin d'éviter que certains fichiers indésirables ne soient copiés avant la publication.
Assurez-vous que Docker est installé.
Le code intègre la compression Gzip sur les HTTP. C'est bien d'utiliser ce code surtout si vous utilisez Kestrel. Sinon, si vous utilisez IIS, veuillez supprimer ce code spécifique trouvé dans Startup.cs . Normalement, IIS propose son propre module de compression qui est plus performant.
Il existe une certaine automatisation concernant les Components disponibles dans ./ClientApp/components/**/* . Tous les fichiers commençant par le mot-clé base vont être déclarés comme globaux et le nom du composant à utiliser n'importe où sera défini en casse serpent sans le mot-clé base .
Exemple : baseHelloWorld sera enregistré comme hello-world et vous pourrez l'utiliser dans votre modèle Vue.
< template >
< div >
< hello-world /> works!
</ div >
</ template >Il existe un exemple réel dans le projet pour le composant carte pour chaque page. Le nom du composant est
baseCard.vue.
Le CSS n'est pas généré lorsque vous êtes en mode développement. Ils ne seront créés que lorsque vous utiliserez la commande dotnet publish ou comme alternative, vous pouvez également aller taper npm run build -- --prod qui lancera la build de production avec la minification et l'extraction des fichiers.
Important : actuellement, Webpack nettoie l'intégralité du dossier wwwroot dans le projet .Net. Ainsi, si vous avez des fichiers statiques, déplacez-les dans le dossier ./ClientApp/static/ .
Pour accélérer le développement, nous proposons l'installation de la bibliothèque de composants Element-UI. La documentation de cette bibliothèque peut être trouvée dans son site.
Il peut être supprimé normalement dans
main.jssi vous n'en avez pas besoin.
