CLI суулган төсөл үүсгэх

Vue CLI гэж юу болох, юунд ашиглах талаар CLI ямар хэрэгтэй вэ? хичээлд үзсэн тул одоо хэрэгслийг компьютертаа суулган түүгээр Vue төсөл үүсгэе. Үүний тулд vuejs фреймворкийн албан ёсны сайтад хандан

суулгах зааврыг ашиглая. Та компьютертаа Node.js -гийг суулгасан байх ёстой гэдгийг сануулъя. Node.js таны компьютерт npm програмыг суулгадаг. Пакетын менежер npm -тэй ижилхэн yarn програмыг ч ашигласан болно. cmd командаар Command Prompt цонхыг нээгээд

Албан ёсны сайтад пакетын нэр vue-cli -ээс @vue/cli болон өөрчлөгдсөн гэдгийг сануулаад хэрвээ таны компьютерт vue-cli (1.x эсхүл 2.x) -ийн өмнөх хувилбар глобалаар суугдсан бол эхлээд түүнийг npm uninstall vue-cli -g эсхүл yarn global remove vue-cli  командаар устгаад дараа нь npm install -g @vue/cli эсхүл yarn global add @vue/cli командыг өгөн Vue CLI пакетыг суулгахыг сануулсан байгаа. Пакетын менежер npm @vue/cli -ийн сүүлийн хувилбарыг таны компьютерт татан суулгана. Үүний дараа та командын мөрөөс vue -д хандах боломжтой болно. Пакет зөв суугдсан эсэхийг шалгахын тулд Command Prompt цонхноос vue командыг өгөхөд боломжит  командуудын жагсаалтыг үзүүлнэ.

Жишээ нь та vue -V гэж өгөн суугдсан програмын хувилбарыг харж болно.
@vue/cli пакетыг суулгасны дараа vue create my-project эсхүл vue ui командыг ашиглан төслөө үүсгэхийг сайтад заасан байгаа. vue create my-project командаар Vue төслийг командын мөрөөс үүсгэдэг бол vue ui команд хөтөч дээр хэрэглэгчийн интерфейстэй хуудас нээн төслийг үүсгэдэг. Арга хооронд онцын ялгаа байхгүй тул командын мөрөөс төслийг үүсгэх аргыг харцгаая. Та өөрөө vue ui командыг ашиглан бас нэгэн төслийг үүсгээрэй.

Командын мөрөөс Vue төслийг үүсгэх

Командын мөрөөс төслийг үүсгэхдээ эхлээд төслөө байршуулах

хавтастаа шилжинэ. Та өөрийн хүссэн хавтасаа сонгож болно. Дараа нь vue create гэж бичээд төслийн нэрийг өгнө. @vue/cli пакет таны өгсөн нэр бүхий хавтас үүсгээд түүнд төслийн файлуудыг байршуулдаг. Командын мөрөөс vue create vue-lesson командыг өгөхөд

таниас тохиргооны асуулт асууна. Өөрийн хүссэн хариултаа сумаар сонгоод Enter дарна. Ер нь default буюу анхдагч утгыг сонгоход хангалттай. Анхдагч тохиргооны babel, eslint -ийг ойлгох хэрэгтэй.
Javascript -д програмчлалын бусад хэлүүдийн адилаар ES5 - EcmaScript 2009, ES6 - EcmaScript 2015 гэх мэт хувилбар, стандартууд байдаг. Сервер талд ажилладаг жишээ нь php төрлийн хэлүүд ч өөрийн гэсэн хувилбаруудтай. Жишээ нь таны сайт php 5 хувилбар дээр ажилладаг бол серверт интерпретаторыг php 5 хувилбар гэдгийг заан өгөхөд л бүгд хэвийн ажиллах бол Javascript -д энэ нь арай өөр. Сайтад хандах хөтөч бүр Javascript -ийн хамгийн сүүлийн хувилбарыг дэмжээд байхгүй ч ихэнх хөтөчүүд ES5 - EcmaScript 2009 стандартыг дэмждэг. Та хэрэглэгч талд ажиллах хуудсаа ES6 - EcmaScript 2015 стандартаар боловсруулсан байтал хэрэглэгч хуучин хөтөч ашиглан сайтад хандвал зарим нэг ажиллагаанууд ажиллахгүйд хүрнэ. Үүнийг Babel шийдэн өгдөг. Өөрөөр хэлбэл ES6 -г ES5 руу хөрвүүлнэ гэсэн үг. Babel пакет олон төрлийн нэмэлтүүдээс /plugin/ бүрддэг бөгөөд пакетын талаар албан ёсны сайтаас үзээрэй.
eslint бол кодын бичилтийн стил, паттерны буруу ашиглалтанд анализ хийх утилит. Javascript хэл компиляц хийдэггүй динамик хэл учраас кодод гаргасан алдаанууд түүнийг ажилуулах үед л илэрдэг. eslint -ийг ашиглан та ч гэсэн тодорхой дүрмийг баримтлан кодлох юм. Энэ талаар интернетээс судлан үзэхийг зөвлөе.
Үүний дараа @vue/cli пакет хэрэгцээт бүх хамааралуудыг татан суулгаад төслийг үүсгэсэн тухай мэдээлэл, түүнийг хэрхэн ажлууах командуудыг дэлгэц дээр үзүүлнэ.
Одоо командын мөрөөс

cd командаар төслийн хавтаст шилжээд npm run serve командыг өгвөл аппликашныг компиляц хийн таны машины 8080 порт дээр ажиллуулсан тухай мэдээлэл өгнө. Хөтөчөө нээгээд http://localhost:8000 хаягаар хандвал

хуудас нээгдэнэ. Энэ бол vue-lesson төслийн нүүр хуудас юм. Төсөл үүсгэх командыг өгсөн хавтасыг харвал тэнд

төслийн нэрээр хавтас үүсгэн түүнд төсөлд хэрэгцээт бүх хамаарлыг суулгасан байгаа. Ингэснээр програм боловсруулах ажиллагааг ихээхэн хөнгөн болгон өгдөг.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

Холбоотой материалууд
Нууц үгийн шалгалт

  Нээгдсэн тоо: 717 Төлбөртэй

Програмд нэвтрэхэд хэрэглэгчийн нууц үгийг авах талбар ихэнхдээ байдаг. Ийм төрлийн талбарт шалгалтыг хэрхэн хийхийг сурцгаая. Үүний тулд Шалгалтын алдааг үзүүлэх хичээлийн App компонентийн шаблоны кодыг доорх байдлаар өргөжүүлье.

<template>
  <div class="container">
    <form action="" class="pt-4">
      <div class="form-group">
    ...
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input 
          type="password" 
          id="password" 
          class="form-control"
          :class="{'is-invalid': $v.password.$error}"
          @blur="$v.password.$touch()"
          v-model="password"
        >

      </div>      
    </form>
  </div>
</template>
useCallback

  Нээгдсэн тоо: 418 Бүртгүүлэх

Хичээлээр react -ийн хамгийн чухал бөгөөд хэрэгтэй хукуудийн нэг болох useCallback -ийн талаар авч үзье. Хукийн судалгааг дараах

import React, {useState} from 'react'

function App() {
  const [colored, setColored] = useState(false)
  const [count, setCount] = useState(1)
    
  const styles = {
      color: colored ? 'darkred' : 'black'
  }
    
  return (
      <div className="container">
        <h1 style={styles}>Элементийн тоо: {count}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setCount(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-warning mx-3'} onClick={() => setColored(prev => !prev)}>Өөрчлөх</button>
      </div>
  );
}

export default App;

кодоор авч үзье. Компонентийн код логикийн хувьд өмнөх хичээлүүдийнхтэй бараг ижил тул тайлбарлах нь илүүц гэж үзлээ.

Жагсаалтыг шүүх

  Нээгдсэн тоо: 1153 Бүртгүүлэх

Сүүлийн жилүүдэд React, Angular, Vue зэрэг javascript фреймворкууд веб програмчлалд хүчтэй түрэн орж ирсэн. Javascript хэлийг бүх хөтөчүүд дэмжин ажилладаг тул хэрэглэгч талын хуудас дангаараа бие даан ажиллах нэг хуудаст аппликашн буюу SPA болсноор сервер болон сүлжээний ачааллыг бууруулах, хэрэглэгчийн ажиллах орчинг маш эвтэйхэн болгох боломжийг бүрдүүлэн өгдөг. Энэ удаад жагсаалтыг шүүх шүүлтүүрийг хэрхэн хэрэгжүүлэхийг

<template>
  <div>
      <h2>{{ title }}</h2> 
      <input type="text" v-model="searchName">
      <ul>
        <li v-for="(name, index) of names" :key="index">{{ name }}</li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello I am Vue!',
      searchName: '',
      names: ['Баатар', 'Болд', 'Цэцгээ', 'Алимаа']
    }
  }
}
</script>

кодоор авч үзье.

Сайтад тавигдаж буй Vue фреймворкийн хичээлүүд -ийг бүгдийг нь үзвэл фреймворкийн талаар илүү гүнзгий ойлголтыг авна гэдгийг зөвлөе.

Обьект

  Нээгдсэн тоо: 2444 Төлбөртэй

JavaScript бол обьект хандлагатай хэл. Нөхцөл ба циклийн үйлдлүүд гээд хэлний үндсэн бүтцээс бусад бараг бүх боломжууд ямар нэгэн байдлаар обьектыг ашиглан хийгдэнэ. Зарим нэгэн тодорхой шийдлүүдийг жишээ нь HTML, XML гэх мэтийн хуудасны боловсруулалтыг хуудасны обьектын моделыг шууд ашиглах замаар хийдэг бол зарим зорилгод жишээ нь ердийн мөрийн өгөгдлүүдийг String обьектыг ашиглах гэх мэтээр. Обьект энэ бол өгөгдлийн хүнд төрөл. Гэсэн хэдий ч энэ ойлголтыг сайн ойлгохгүйгээр Javascript -ын хүч чадлыг гаргах боломжгүй. Энэ хичээлээр бид JavaScript -ын өгөгдлийн төрлийн нэг болох хэрэглэгчийн обьектын талаар авч үзнэ.

Үйл явдал…

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 228

 
Холбоосын параметрүүд

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 316

 
Зочин (Visitor)

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 274

 
Лямбда

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 372

 
Outlet компонент

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 419

 
Хадгалагч (Memento)

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

…

Нээгдсэн тоо : 445

 
Нэргүй арга

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 513

 
Урвуу матриц

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 593

 
Кодийн сайжруулалт

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 616

 
Энэ долоо хоногт
Бодлого 8.012

Тэмцээнд 16 шатарчин оролцсон. Нэгийн давааны хуваарийн хичнээн хувилбар байж болох вэ? / Хуьаарьт дор хаяж нэг өрөгт тоглох хүмүүс нь ялгаатай бол хувилбар гэж тооцно. Тоглох өнгө, ширээний дугаарыг тооцохгүй/

Нээгдсэн тоо : 1293

 
Бодлого 7.074

Нээгдсэн тоо : 1060

 
Бодлого 2.187

prob02_187_01 илэрхийллийг хялбарчил.

Нээгдсэн тоо : 175

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195