De Vue.js CLI begrijpen en hoe u deze kunt gebruiken

De Vue.js CLI (Command Line Interface) is een krachtige tool die het proces van het opzetten, ontwikkelen en beheren van Vue.js-projecten vereenvoudigt. Het biedt een gestandaardiseerde en efficiënte manier om nieuwe projecten te maken, afhankelijkheden te beheren en build-instellingen te configureren. Dit artikel verkent de functies van de Vue CLI en laat zien hoe u deze effectief kunt gebruiken.

Vue CLI installeren

Om de Vue CLI te kunnen gebruiken, moet u deze globaal op uw systeem installeren. Zorg ervoor dat u Node.js en npm (Node Package Manager) hebt geïnstalleerd en voer vervolgens de volgende opdracht uit in uw terminal of opdrachtprompt:

npm install -g @vue/cli

Met deze opdracht wordt de Vue CLI wereldwijd geïnstalleerd, waardoor de opdracht vue beschikbaar wordt voor het maken en beheren van Vue.js-projecten.

Een nieuw Vue.js-project maken

Nadat u de Vue CLI hebt geïnstalleerd, kunt u eenvoudig een nieuw Vue.js-project maken door de volgende opdracht uit te voeren:

vue create my-vue-project

U wordt gevraagd een preset voor uw project te selecteren. U kunt kiezen uit de standaardpreset, die Babel en ESLint omvat, of handmatig functies selecteren zoals Vue Router, Vuex en TypeScript. Voor beginners is het raadzaam om de standaardpreset te kiezen door op Enter te drukken.

Vue CLI-presets begrijpen

Vue CLI biedt verschillende opties voor het configureren van uw project via voorinstellingen:

• Standaardinstelling: Bevat essentiële tools zoals Babel en ESLint. Geschikt voor de meeste projecten en een goed startpunt voor beginners.
• Handmatig functies selecteren: Hiermee kunt u specifieke functies kiezen, zoals Vue Router voor routering, Vuex voor statusbeheer, TypeScript voor typecontrole en meer.

Projectstructuur

Zodra uw project is gemaakt, ziet u een standaard Vue.js-projectstructuur. Hier zijn enkele belangrijke mappen en bestanden:

• src: Bevat de broncode voor uw applicatie, inclusief componenten, weergaven en stijlen.
• public: Bevat statische activa en het bestand index.html, dat dient als toegangspunt voor uw toepassing.
• src/main.js: Het invoerbestand voor uw Vue-applicatie. Initialiseert het Vue-exemplaar en koppelt het aan de DOM.
• src/App.vue: Het root-component van uw applicatie. U kunt dit bestand aanpassen om de hoofdlay-out van uw app te definiëren.
• src/components: Bevat Vue-componenten. U kunt hier nieuwe componenten toevoegen en deze importeren in uw applicatie.

De ontwikkelingsserver uitvoeren

Om uw Vue.js-applicatie in actie te zien, start u de ontwikkelserver door de volgende opdracht uit te voeren:

npm run serve

Dit start een lokale server op http://localhost:8080 (of een andere beschikbare poort). Open deze URL in uw browser om uw applicatie te bekijken.

Bouwen voor productie

Wanneer u klaar bent om uw applicatie te implementeren, moet u deze bouwen voor productie. Voer de volgende opdracht uit om een ​​productieklare build te maken:

npm run build

Met deze opdracht worden geoptimaliseerde en geminimaliseerde bestanden in de map dist gegenereerd, die u op uw webserver kunt implementeren.

Vue CLI-plug-ins gebruiken

Vue CLI ondersteunt plugins die functies en mogelijkheden aan uw project toevoegen. Voer de volgende opdracht uit om een ​​plugin te installeren:

vue add 

Om bijvoorbeeld Vue Router aan uw project toe te voegen, voert u het volgende uit:

vue add router

Om een ​​plugin te verwijderen, gebruikt u de opdracht vue remove:

vue remove router

Plugins kunnen ook worden geïnstalleerd en beheerd via het bestand vue.config.js of door de configuratie van het project te wijzigen.

Vue CLI-configuratie aanpassen

U kunt de configuratie van Vue CLI aanpassen door het bestand vue.config.js in de root van uw project te maken of te wijzigen. Met dit bestand kunt u verschillende instellingen aanpassen, zoals proxyconfiguraties, openbare paden en meer.

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  },
  publicPath: '/my-app/'
};

Conclusie

De Vue.js CLI is een krachtige tool die het proces van het maken, beheren en configureren van Vue.js-projecten vereenvoudigt. Met Vue CLI kunt u snel een nieuw project opzetten, een ontwikkelserver uitvoeren, bouwen voor productie en uw project aanpassen met plug-ins en configuratieopties. Met deze mogelijkheden bent u goed toegerust om te beginnen met het ontwikkelen van moderne, dynamische webapplicaties met Vue.js.