A Vue.js telepítéséhez kövesse az alábbi lépéseket:
1. lépés: Hozzon létre egy új könyvtárat a projekthez, és nyissa meg a terminált abban a könyvtárban.
2. lépés: Az npm segítségével telepítse a Vue CLI-t(Command Line Interface) a következő parancs futtatásával:
npm install -g @vue/cli
3. lépés: A sikeres telepítés után létrehozhat egy új Vue projektet a következő paranccsal:
vue create my-vue-project
4. lépés: Válassza ki a projekt konfigurációs beállításait, beleértve a Babel, az ESLint és a CSS-előfeldolgozók telepítését(opcionális).
5. lépés: Miután a projekt létrehozási folyamata befejeződött, navigáljon a projekt könyvtárába a következő paranccsal:
cd my-vue-project
6. lépés: Futtassa a következő parancsot a Vue projekt elindításához:
npm run serve
Az indítási folyamat befejezése után látni fog egy URL-t, amellyel elérheti a Vue alkalmazást a böngészőben.
Egy egyszerű példa a Vue.js-re:
Hozzon létre egy új HTML fájlt, és nevezze el index.html `. Ebben a fájlban adja hozzá a következő kódot:
html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
changeMessage() {
this.message = 'Message changed successfully!';
}
}
});
</script>
</body>
</html> Ebben a példában egy egyszerű Vue alkalmazást hoztunk létre címkével h1 és gombbal. Ha a gombra kattint, az üzenet megváltozik.
Mentse el a index.html fájlt, és nyissa meg a böngészőben. A kezdeti üzenet a következőként jelenik meg: "Hello Vue.js!". Amikor rákattint a gombra, az üzenet a következőre változik: „Az üzenet sikeresen megváltozott!”.
Ez csak egy egyszerű példa a Vue.js használatának megkezdéséhez. Alkalmazásai fejlesztése során a Vue.js számos további funkcióját és hatékony képességét fedezheti fel.