Краткое поступление в Vue.js

kratkoe postuplenie v vuejs?v=1656543496

Вас интересует Front End Development?

Если да, то этот пост для вас!

Чтобы начать работу с Vue.js, вам нужно знать HTML, CSS, JavaScript, ракетостроение, ядерную физику, квантовую теорию и т.д.

Хм?

Ну не совсем. Просто HTML, CSS и JavaScript достаточно хороши, чтобы начать работу с Vue.js.

В этой публикации будет рассмотрено, как легко создать простую программу Vue.js, а также объясняется структура папок созданного приложения. Кроме того, мы создадим обычный компонент Vue.js.

Итак начнем.

Предпосылки

Установите Node.js, если нет

Вам нужен Node.js, поскольку библиотеки, необходимые для Vue, загружаются с помощью менеджера пакетов узлов (npm). Обратитесь к установке Node.js.

Установите Vue CLI

Установите Vue CLI с помощью такой команды:

npm install -g @vue/cli

Vue CLI помогает просто создать проект Vue.js. Хотя он называется CLI, он также имеет пользовательский интерфейс для создания проекта, который я расскажу ниже.

Создайте проект

Введите следующую команду в командной строке:

vue ui

Это откроет следующий экран в браузере:

rfgbX3M9aMopUeCZRs8WwtzFP48KYi6RBBrF

Нажмите на Создайте. Затем введите место назначения, где необходимо создать проект.

Xb15ogPO7H-Jsc5FBMuEBnuTQorapmb-l-3i

Затем нажмите на Создайте новый проект здесь.

fnBTkAXVu6hnbB6pOHAqJmJMEfEy6wIybudU

Это откроет следующий экран:

1mj4fs5LmCW3pPZcfAiPUoEhH4hWontbKW1h

Введите папку проекта как sample-vue-app и нажмите Дальше.

На следующем экране выберите по умолчанию, как показано на рисунке ниже. Для этой публикации, предварительно установленные по умолчанию является самым простым для начала.

ur0DriId-ztQjrIpQRET7Bp-NkXoET9Auv87

Наконец, нажмите на Создать проект

Чтобы проверить правильность настройки проекта, выделите папку проекта и запустите программу с помощью следующих команд.

cd sample-vue-app
npm run serve

Программа работает локальный хост: 8080. На рисунке ниже показано, как приложение выглядит в браузере:

tW0nCLS-biGCrqfJDhZxb2V7qTIt1UPphiFs

Добро пожаловать, вы создали свой первый проект Vue.js!

Но подождите, что в проекте есть много файлов и папок, которые были созданы автоматически.

Действительно ли нужно знать, что означают эти файлы?

Знание их, безусловно, поможет, когда код ведет себя странным образом, что часто случается в мире разработчиков.

Структура папки программы

EzwWJBGY-Sd2mZipUtkt1D1GsA3L5sr-aB8d
  1. package.json: Этот файл содержит все зависимости от узлов.
  2. public/index.html: Это первый файл, загружаемый при запуске программы. Кроме того, этот файл содержит следующий фрагмент кода <div id=”app”></div>. Внутри этого загружаются все компоненты разд с приложением id.
  3. src/main.js: Это файл, в котором создается экземпляр Vue. Этот файл содержит следующий фрагмент кода new Vue({ render: h => h(App)}).$mount(‘#app’). Этот фрагмент рассказывает о томна Компонент программы нужно загрузить в элемент из id app (являющееся элементом div).
  4. src/App.vue: Этот файл соответствует файлу App компонент, действующий как контейнер для всех остальных компонентов. Он имеет a шаблон для HTML код, он имеет a сценарий для ДжavaScript код, и он имеет a стиль для CSS.
  5. src/компоненты: Здесь будут храниться все компоненты, которые вы разработаете. Все компоненты будут иметь шаблон, сценарий и теги стиля для HTML, JavaScript и CSS соответственно.
  6. dist: Это папка, в которой хранятся встроенные файлы. Чтобы получить эту папку, выполните команду npm run build. При выполнении этой команды код минимизируется, объединяется и хранится в папке dist. Код из этой папки, как правило, разворачивается в производство.

Создайте свой первый компонент

Создайте файл под названием as First.vue внутри src/компоненты. Этот файл будет иметь HTML, JavaScript и CSS. Добавим их по одному. Весь код в этом разделе принадлежит First.vue файл. First.vue будет нашим Компонент Vue

CSS

<style scoped>
.demo {
    background-color: cyan;
}
</style>

Это базовый CSS. Параметр масштаб в <style scoped> CSS применяется только к этому компоненту.

JavaScript

<script>
export default {
    name: 'First',
    props: {
    msg: String
    }
}
</script>

имя Параметр указывает название компонента Сначала.

реквизит параметр указывает на введение к этому компоненту. Здесь у нас будет один вход под названием as сообщение который есть типа строчка.

HTML

<template>
    <div class="demo">
    <h1>{{ msg }}</h1>
    </div>
</template>

{{msg}} это способ, которым входной параметр для Vue Доступ к компоненту можно получить в HTML код.

Полный код для первого компонента

Это содержимое файла First.vue:

<template>
    <div class="demo">
    <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    name: 'First',
    props: {
    msg: String
    }
}
</script>

<style scoped>
.demo {
    background-color: cyan;
}
</style>

Прекрасно, компонент создан! ?

Запустите приложение сейчас с помощью npm run serve и вы увидите экран ниже:

L4i403i-y4N4Po5arAH42K7PbJGt1U9OsZH1

Подождите, это не тот же результат, что и раньше. Где только что созданный компонент?

Дело в том, что мы создали компонент, но никогда его нигде не использовали. Давайте теперь воспользуемся этим компонентом.

Использование компонента

Добавим этот компонент к основному App компонент. Вот обновленный код для App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="
    <First msg="First Component"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import First from './components/First.vue'
export default {
  name: 'app',
  components: {
    First
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  1. Сначала компонент нужно импортировать в App компонент. Это делается с помощью команды import First from ‘./components/First.vue’
  2. Далее, в JavaScript, мы должны упомянуть, что App компонент будет использовать Сначала Компонент. Это делается фрагментом кода components: {First}
  3. Наконец, нам нужно использовать Сначала компонент в App компонент. Это делается в шаблоне HTML с помощью фрагмента кода <First msg=”First Component”/>
  4. Здесь сообщение является входным параметром Сначала Компонент и Значение msg посылается с App Компонент

Теперь запустите программу с помощью npm run serve и вы увидите следующий вывод:

J-YsiOP4ZoY4WxlEVjaJwAvHeRt4PzFKQSyB

код

Щелкните здесь, чтобы получить указанный здесь код из репозитория GitHub. Репо GitHub содержит инструкции по клонированию и запуску кода.

Нажмите здесь, чтобы увидеть, как выглядит приложение. Он был развернут с помощью страниц Github.

Приветствую ?

Теперь вы успешно создали свое первое приложение Vue.js. Вы также узнали, как создать очень простой компонент. В моей следующей публикации на Vue.js я расскажу больше о концепциях. Следите за обновлениями!

Ссылки

Vue.js: https://vuejs.org/v2/guide/

Vue CLI: https://cli.vuejs.org/guide/

Об авторе

Я люблю технологии и слежу за достижениями в технологиях. Мне также нравится помогать другим любыми знаниями, которые у меня есть в технологическом пространстве.

Не стесняйтесь связаться со мной в моем аккаунте LinkedIn https://www.linkedin.com/in/aditya1811/

Вы также можете подписаться на меня в Twitter https://twitter.com/adityasridhar18

Мой веб-сайт: https://adityasridhar.com/

Краткое руководство, которое поможет вам понять и создать программы Angular 6

Краткое руководство, которое поможет вам понять и создать программы ReactJS

Добавить комментарий

Ваш адрес email не будет опубликован.