close

Vue.js a Shuiteáil agus Do Chéad Tionscadal a Chruthú

Chun Vue.js a shuiteáil, is féidir leat na céimeanna thíos a leanúint:

Céim 1: Cruthaigh eolaire nua do do thionscadal agus oscail an teirminéal san eolaire sin.

Céim 2: Bain úsáid as npm chun Vue CLI(Comhéadan Líne Ordú) a shuiteáil tríd an ordú seo a leanas a rith:

npm install -g @vue/cli


Céim 3: Tar éis suiteáil rathúil, is féidir leat tionscadal Vue nua a chruthú ag baint úsáide as an ordú seo a leanas:

vue create my-vue-project


Céim 4: Roghnaigh roghanna cumraíochta do do thionscadal, lena n-áirítear a shuiteáil Babel, ESLint, agus CSS Réamhphróiseálaithe(roghnach).

Céim 5: Nuair a bheidh an próiseas cruthaithe tionscadail críochnaithe, déan nascleanúint isteach san eolaire tionscadail ag baint úsáide as an ordú:

cd my-vue-project


Céim 6: Rith an t-ordú seo a leanas chun an tionscadal Vue a thosú:

npm run serve


Nuair a bheidh an próiseas tosaithe críochnaithe, feicfidh tú URL chun rochtain a fháil ar d’iarratas Vue ar an mbrabhsálaí.

Sampla simplí de Vue.js:

Cruthaimis comhad HTML nua agus ainmnímid index.html `. Sa chomhad seo, cuir an cód seo a leanas leis:

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>

Sa sampla seo, tá feidhmchlár Vue simplí cruthaithe againn le h1 clib agus cnaipe. Nuair a chliceáiltear an cnaipe, athrófar an teachtaireacht.

Sábháil an index.html  comhad agus é a oscailt sa bhrabhsálaí. Feicfidh tú an teachtaireacht tosaigh mar "Hello Vue.js!". Nuair a chliceálann tú an cnaipe, athrófar an teachtaireacht go "Teachtaireacht athraigh go rathúil!".

Níl anseo ach sampla simplí chun tú a chur ar bun le Vue.js. Is féidir leat i bhfad níos mó gnéithe agus cumais chumhachtacha Vue.js a iniúchadh agus d'fheidhmchláir á bhforbairt agat.