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

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

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

Холбоотой материалууд
Мөрүүд

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

Хөтөч дээр ажилладаг интернетэд сууриласан програмын боловсруулалт хийхэд javascript хэлийг ашиглах шаардлага зүй ёсоор гарч ирдэг. Иймээс хөтөчүүд ойлгон ажилладаг энэхүү хэлийг програм зохиогчид заавал мэдэж байх хэрэгтэй. Энэ удаад ES6 -д мөрүүдтэй ажиллаха ажиллагаанд орсон өөрчлөлтүүд тэдгээртэй ажиллах ажиллагаа хир хөнгөн болсонг үзье. Эхлээд мөрүүдийг хооронд нь холбох тохиолдолыг авч үзье. Бидэнд

let name = 'e-surgalt.com';
let str = 'Манай сайтад зочилсонд танд баярлалаа!';

хоёр мөр байлаа гэе. str хувьсагчид name хувьсагчийг оруулан шинэ мөрийг гаргахын тулд өмнө нь холболтын операторыг

let name = 'e-surgalt.com';
let str = 'Манай ' + name + ' сайтад зочилсонд танд баярлалаа!';
console.log(str);

гэж ашигладаг байсан.

useEffect

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

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

import React, {useState} from 'react'

function App() {
  const [type, setType] = useState('users')
  
  return (
      <div className="container">
        <h1>Өгөгдлүүд: {type}</h1>
        
        <button onClick= {() => setType('users')} className="btn btn-primary mx-3">Хэрэглэгчид</button>
        <button onClick= {() => setType('todos')} className="btn btn-primary mx-3">Хийх ажлууд</button>
        <button onClick= {() => setType('posts')} className="btn btn-primary mx-3">Нийтлэлүүд</button>
        
      </div>
  );
}

export default App;

гэж үүсгэе.

Гарын үйл явцын модификаторууд

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

Програмчлалын хэлүүдэд хэрэглэгчийн зүгээс үүсгэх үйл явц, түүний боловсруулалт чухал байр эзэлдэг. Үйл явцын боловсруулалтад модификаторийг ашиглан кодыг хэрхэн хураангуй болгохыг Үйл явцын модификаторууд хичээлээс мэдсэн Энэ удаад үйл явцын модификаторын бас нэг боломжийг

    <body>
        <div id="app">
            <input type="text" v-on:keyup="alertValue">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    alertValue: function() {
                        if (event.keyCode === 13)
                            alert(event.target.value)
                    }
                }
            })
        </script>
    </body>

код дээр харцгаая. Хуудаст хэрэглэгчээс өгөгдөл авах input элемент байрлан түүнд товч дарагдах үйл явцыг v-on:keyup атрибут alertValue боловсруулагчтайгаар сонсохоор заасан.

Энгийн шүүлтүүр үүсгэх

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

VueJs фреймворкийн шүүлтүүр ойлголтын тухай авч үзье. Хэрвээ та Angular фреймворкийг судалж байсан бол Pipe гэдэг ухагдхууныг мэдэх байх. VueJs фреймворкийн шүүлтүүр бол Pipe -тай ижил бөгөөд ямар нэгэн мөр эсхүл компонентийн хэв /шаблон/ дэх элементүүдийн харагдах байдлыг өөрчлөн үзүүлэх тусгай хувиргагч юм. Үүнийг дараах жишээн дээр авч

<template>
  <div>
      <h2>{{ title }}</h2> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }  
}
</script>

үзье.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн уламжлалыг тооц.

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

 
Бодлого 7.128

утгыг ол.

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

 
Бодлого 4.103

prob04_103_01 ба prob04_103_02 векторууд перпендикуляр бол y -ийн утгыг ол.

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

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