Construiește-ți prima aplicație cu o singură pagină cu VUE: A ST …

Aplicațiile cu o singură pagină (SPA) au revoluționat peisajul de dezvoltare web, oferind o experiență de utilizator lină și interactivă. Unul dintre cele mai populare cadre pentru construcțiile de spa -uri este Vue.js, cunoscut pentru simplitatea și flexibilitatea sa. În acest tutorial, vă voi ghida prin crearea primului dvs. spa folosind vue.js, asigurându -vă că construiți o bază solidă în timp ce vă îmbarcați în această călătorie interesantă.

Premise

Înainte de a începe, asigurați -vă că aveți:

• Cunoașterea de bază a HTML, CSS și JavaScript.
• Node.js și NPM (NODE PACKET MANAGER) instalat pe computer. Puteți descărca node.js din Nodejs.org.

Pasul 1: Configurarea mediului

1.1 Instalați Vue CLI

Vue CLI este un instrument de linie de comandă pentru aplicații VUE Scheled. Deschideți terminalul și rulați următoarea comandă pentru a instala Vue CLI la nivel global:

npm install -g @vue/cli

1.2 Creați un nou proiect VUE

Odată ce Vue CLI este instalat, puteți crea un nou proiect. RUN:

vue create my-first-vue-app

În timpul configurației, vi se va solicita să alegeți presetări. Pentru începători, presetarea implicită (Babel, Eslint) este o alegere excelentă.

1.3 Navigați la directorul proiectului

Treceți în directorul proiectului:

cd my-first-vue-app

1.4 Rulați serverul de dezvoltare

Pentru a începe aplicația, rulați:

npm run serve

Deschideți browserul și navigați la http://localhost:8080. Ar trebui să vedeți o pagină de bun venit de la VUE.

Pasul 2: Creați -vă prima componentă

Vue încurajează construirea aplicației folosind componente. Să creăm o componentă simplă.

2.1 Creați o componentă nouă

În interiorul src/components director, creați un nou fișier numit HelloWorld.vue:

<template>

  <div class="hello">

    <h1>{{ title }}</h1>

    <p>This is my first Single-Page Application built with Vue.js!</p>

  </div>

</template>



<script>

export default {

  data() {

    return {

      title: 'Hello World!'

    };

  }

};

</script>



<style scoped>

.hello {

  text-align: center;

  margin-top: 50px;

}

</style>

2.2 Utilizați componenta

Deschide src/App.vue și utilizați componenta dvs. nou creată:

<template>

  <div id="app">

    <HelloWorld />

  </div>

</template>



<script>

import HelloWorld from './components/HelloWorld.vue';



export default {

  components: {

    HelloWorld

  }

};

</script>

2.3 Vizualizați modificările dvs.

Salvați -vă modificările și reîmprospătați -vă browserul. Acum ar trebui să vezi "Salut Lume!" afișat.

Pasul 3: Adăugați rutare

Pentru a face din aceasta un spa adevărat, trebuie să implementăm rutarea. Vue Router este routerul oficial pentru vue.js.

3.1 Instalați routerul Vue

Rulați următoarea comandă în terminalul dvs.:

npm install vue-router

3.2 Setați routerul

Creați un nou fișier src/router/index.js:

import Vue from 'vue';

import Router from 'vue-router';

import Home from '../components/Home.vue'; // Create this component

import About from '../components/About.vue'; // Create this component



Vue.use(Router);



export default new Router({

  mode: 'history',

  routes: (

    {

      path: '/',

      name: 'Home',

      component: Home

    },

    {

      path: '/about',

      name: 'About',

      component: About

    }

  )

});

3.3 Creați acasă și despre componente

Creați Home.vue şi About.vue fișiere în interior src/components cu conținut simplu:

<!-- Home.vue -->

<template>

  <div>

    <h2>Home Page</h2>

  </div>

</template>



<script>

export default {};

</script>

<!-- About.vue -->

<template>

  <div>

    <h2>About Page</h2>

  </div>

</template>



<script>

export default {};

</script>

3.4 Actualizați aplicația principală pentru a utiliza routerul

Modifica src/main.js pentru a include routerul:

import Vue from 'vue';

import App from './App.vue';

import router from './router';



Vue.config.productionTip = false;



new Vue({

  router,

  render: h => h(App)

}).$mount('#app');

3.5 Adăugați legături de router

Actualizare App.vue pentru a include legături de navigare:

<template>

  <div id="app">

    <nav>

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link>

    </nav>

    <router-view/>

  </div>

</template>

Pasul 4: Stilul aplicației

Puteți integra un cadru CSS, cum ar fi bootstrap sau coada CSS pentru stil. Pentru simplitate, vom adăuga câteva stiluri de bază.

4.1 Stiluri de bază

În App.vue Fișier, adăugați câteva stiluri:

nav {

  margin: 20px;

}

nav a {

  text-decoration: none;

  color: blue;

}

nav a.router-link-exact-active {

  font-weight: bold;

}

Pasul 5: Construiți și implementați aplicația dvs.

Când sunteți mulțumit de aplicația dvs., este timpul să vă implementați. Rulați următoarea comandă pentru a crea o construcție de producție:

npm run build

Fișierele vor fi generate în dist pliant. Puteți servi aceste fișiere folosind orice serviciu de găzduire a fișierelor statice, cum ar fi paginile Netlify, Vercel sau Github.

Concluzie

Felicitări! Ați construit cu succes prima aplicație cu o singură pagină cu vue.js. Ați învățat cum să configurați un proiect VUE, să creați componente, să gestionați rutarea și să aplicați stilul de bază.

Vue.js este un cadru puternic cu un ecosistem bogat, așa că continuați să explorați mai multe caracteristici, cum ar fi managementul de stat cu Vuex, redarea serverului cu nuxt.js și multe altele. Codificare fericită!