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 төслийн нүүр хуудас юм. Төсөл үүсгэх командыг өгсөн хавтасыг харвал тэнд

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

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

Холбоотой материалууд
Өөрчлөлтийн амьдралын цикл

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

Төслийн Car компонентийг Stateful буюу Component классаас удамшсан класс байдлаар тодорхойлсноор react компонентийн амьдралын циклүүдэд хандах боломжийг авсан. Car компонентод дээр компонентийн төлвийн өөрчлөлтүүдийн циклүүдийг харцгаая. Үүний тулд Car компонентийн кодийг

class Car extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    console.log('Car shouldComponentUpdate', nextProps, nextState)
    return true
  }

  componentDidUpdate() {
    console.log('Car componentDidUpdate')
  }

  render() {
    console.log('Car render')
    const inputClasses = [styles.input]

    ...

    return (
      <div className={styles.Car} style={style}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>Он: <strong>{this.props.year}</strong></p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(' ')}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>Устгах</button>
      </div>
    )
  }
}

export default Car

гэж өөрчилье.

useMemo

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

useMemo хукийн судалгааг

import React, {useState} from 'react'

function App() {
  const [number, setNumber] = useState(40)
  
  return (
      <div className="container">
        <h1>Тооцоологдох шинж: {number}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setNumber(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-danger'} onClick={() => setNumber(prev => prev - 1)}>Хасах</button>
      </div>
  );
}

export default App;

код дээр харцгаая. useState -ээр 40 гэсэн анхны утгатай number хувьсагчийг үүсгээд хуудаст h1 гарчигаар number хувьсагчийн утгыг харуулаад Нэмэх, Хасах хоёр товч дээр дарахад setNumber функцээр number хувьсагчийн утгыг өөрчилнө. Кодийг ажлуулбал

хуудас нээгдэнэ.

Формтой ажиллах модел

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

Хэрэглэгч програмын өгөгдөлтэй харьцах ажиллагаа бол ямарч програмыг хувьд чухал хэсэг байдаг. Үүнийг голдуу формоор дамжин хийдэг. Иймээс энэ удаа VueJs -ээр төрөл бүрийн input элементүүдтэй хэрхэн ажиллахыг

    <body>
        <div id="app">
            <input type="text">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>

кодоор авч үзье. Кодод хэрэглэгчээс өгөгдөл авах input элемент div id="app" элементэд Vue -гийн хувийн инициализац хийсэн байгаа. Хуудсыг нээвэл ердийн input талбар л үзэгдэнэ. Тэгвэл input элементэд ямар нэгэн зүйлийг оруулахад түүнийг хуудасны шаблонд шууд харуулах асуудлыг шийдье.

Promise I

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

Хичээлээр Promise ухагдхууны тухай жишээгээр авч үзье. Эхлээд Promise гэж юу болох юунд ашигладагийн тухайд гэвэл. ES6 - д Promise гэдэг нь синхрон буюу зэрэг биелэгдэх кодтой ажиллах механизм юм. Үүнийг ойлгохын тулд хүлээлт үүсгэх функцийг эхлээд ES5 - аар хэрэгжүүлсэн

function oldDelay(ms, func) {
    setTimeout(function () {
        func();
    }, ms);
}

oldDelay(3000, function () {
    console.log('Old delay passed!');
});

кодыг харцгаая. oldDelay функц эхний ms параметрээр хүлээлт үүсгэх хугацааг харин хоёрдахь func параметрээр хүлээлтийн хугацаа дуусахад дуудагдах функцийг авна. Хүлээлтийг setTimeout функцээр үүсгэх бөгөөд функц эхний параметрээр эргэн дуудалтын /callback/ функц харин хоёрдахь параметрээр хүлээлтийн хугацааг авдаг. setTimeout функцийн хоёрдахь параметр буюу хүлээлтийн хугацаанд oldDelay функцэд ирэх ms параметрийг өгөөд энэ хугацаа өнгөрөхөд ажиллах эргэн дуудалтын функцээс oldDelay функцэд параметрээр ирсэн func функцийг дуудна.

Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

 
Хуваах

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

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

 
Зуучлагч (Mediator)

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

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

 
Делегатийн хэрэглээ

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

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

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

2.0(15) үет бутархайг энгийн бутархай болго.

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

 
Бодлого 12.061

тэгшитгэлийн хамгийн их сөрөг язгуурыг ол.

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

 
Бодлого 5.109

тэнцэтгэл бишийн системийг хангах x -ийн натурал утгыг ол.

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

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