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

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

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

Холбоотой материалууд
ErrorBoundary

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

react 16 гаас дээш хувилбарт бий болсон кодод үүссэн алдаануудыг илүү эвтэйхэн боловсруулахад зориулагдсан ErrorBoundary амьдралын шинэ циклийн талаар судлая. ErrorBoundary аргыг туршихын тулд төслийн src хавтас ErrorBoundary хавтаст үүсгээд

import React from 'react'

export default class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <h2 style={{ color: 'red' }}>Алдаа гарлаа</h2>
    }
    return this.props.children
  }
}

код бүхий шинэ ErrorBoundary компонентийг үүсгэе.

Компонент үүсгэх

  Нээгдсэн тоо: 735 Нийтийн

Өмнөх хичээлүүдэд бид create-react-app хэрэгслээр үүсгэсэн төслийн суурь код дээр жишээнүүдийг судласан. Одоо react төсөлд өөр компонентууд үүсгэн тэдгээрийг өөр хооронд нь холбон ашиглахыг сурцгаая. react -ийн компонентийг голдуу тусд нь хавтас үүсгэн байршуулдаг тул бид төслийн src хавтаст Car нэртэй хавтасыг үүсгээд түүн дотор Car.js файлыг үүсгээрэй.

react -д компонентийг үүсгэх хоёр үндсэн арга байдаг талаар JSX хичээлд дурдсан.

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

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

Сүүлийн жилүүдэд 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 фреймворкийн хичээлүүд -ийг бүгдийг нь үзвэл фреймворкийн талаар илүү гүнзгий ойлголтыг авна гэдгийг зөвлөе.

Формын шалгалтын бэлтгэл

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

Формд төрөл бүрийн элементүүдийг оруулахыг өмнөх хичээлүүдэд үзсэн. Формтой ажиллах ажиллагааны бас нэгэн чухал хэсэг бол түүний validation буюу шалгалтын хэсэг байдаг. Vuejs фреймворк бүгдийг хэрэгцээтэй үед нь хэрэглэх гэсэн зарчмыг баримталдаг. Өөрөөр хэлбэл фреймворкийн үндсэн пакет хамгийн хэрэгтэй суурь зүйлүүдийг агуулаад бусад шаардлагатай хэсгийг нэмэлтээр суулган ашиглах гэсэн үг юм. Формын шалгалт хийх ажиллагаа Vuejs фреймворкийн үндсэн пакетад байдаггүй бөгөөд формд шалгалт хийх хэрэгтэй бол шаардлагатай пакетыг суулгах шаардлага гарна. Энэхүү зарчим нь програмын хэмжээ, ажиллагааны хурдад сайн нөлөө үзүүлдэг сайн аргачлал юм. Хичээлээр формын шалгалтын бэлтгэл болгоод цэвэр төслийг үүсгэе.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

Кубын ирмэг a. Дээд талын төвийг суурийн оройтой холбоход үүсэх пирамидийн бүтэн гадаргуун талбайг ол.

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

 
Бодлого 4.041

A=(-2; 3; 5), B=(4; -1; 7) векторууд өгөгджээ. 3A-2B векторын координатуудын нийлбэрийг ол.

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

 
Бодлого 8.141

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

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

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