Создание вашего первого проекта Vue3 - Учебное пособие по Vue

Создание вашего первого проекта Vue3 - Учебное пособие по Vue

Vue3 официально здесь! В этом анонсе Эвана Ю он объявляет о самых больших изменениях в новом фреймворке и рассказывает об удивительной работе, проделанной всей командой Vue.

Разработчики давно ждали действительно классных функций, анонсированных для Vue3, таких как поддержка TypeScript, лучшая организация для больших проектов и оптимизация рендеринга, которая сделает приложения Vue еще лучше.

В этом руководстве по Vue3 мы создадим поисковую систему, которая использует ввод текста для фильтрации статей из массива.

К концу этого руководства вы создадите проект Vue3, построив два компонента с помощью Composition API.

Вот что мы собираемся делать.

Вот ссылка на готовую базу кода (включая все стили CSS).

Хорошо, я уверен, что вы так же взволнованы, как и я, так что давайте приступим к программированию.

Начиная

Есть несколько разных вариантов для добавления Vue3 к вашим существующим проектам или создания вашего собственного проекта Vue3.

В этом уроке мы рассмотрим два моих любимых варианта:

1. Vue CLI
2. Vite

Vue CLI

Если вы занимались разработкой Vue в прошлом, вы, вероятно, использовали Vue CLI для настройки своего проекта.

Vue CLI - это интерфейс командной строки для разработки Vue, который служит базовой линией экосистемы Vue. В нашем случае это позволяет нам создать приложение Vue.

Во-первых, мы должны убедиться, что у нас есть самая последняя версия Vue CLI, и мы можем сделать это, запустив в нашем терминале.

Затем, чтобы создать наш проект, мы хотим запустить vue create <PROJECT-NAME>

Если мы успешно обновили наш интерфейс командной строки, у нас должна быть возможность выбрать Vue3.

Как только мы выберем вариант Vue3, наше приложение должно построить. Когда это будет сделано, нам просто нужно войти в наш проект, а затем запустить наше приложение Vue! Команды для этого:

cd <PROJECT-NAME>
npm run serve

Теперь, если мы перейдем к нашему http://localhost:8080/ в нашем браузере, мы должны увидеть наше приложение!

Идеально!

Хорошо, давайте рассмотрим другой вариант создания нашего проекта Vue3.

Vite

Vite (произносится как« veet ) - это новый инструмент сборки Vue3», который обслуживает код, используя импорт модуля ES во время разработки, а не объединение с использованием такого инструмента, как Webpack.

Созданный создателями Vue, он значительно сокращает накладные расходы на разработку, обеспечивая более быструю горячую перезагрузку и более эффективный холодный запуск сервера.

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

Поскольку объединение больших проектов может занять много времени, Vite обладает большим потенциалом для ускорения процесса разработки.

Зачем использовать Vue Vite?

Теперь вы можете спросить себя: «Так чем же Vite отличается от существующего vue-cli?»

Поскольку @vue-cli/service построен на основе webpack, это сборщик модулей, который объединит весь ваш проект Vue при запуске, горячей перезагрузке и компиляции.

Вместо этого Vue Vite примет синтаксис ES Import в вашем коде и позволит браузеру проанализировать импорт и сделать HTTP-запрос для каждого импорта.

Vue Vite предлагает более быстрый запуск, горячую перезагрузку и компиляцию, чем решения на основе сборщиков во время разработки.

Гипотетически обработка импорта через HTTP-запросы может создать сетевой водопад и быть более медленной. Но поскольку этот метод предназначен только для локальной разработки, эти различия должны быть незначительными.

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

Создание вашего первого проекта Vite

Чтобы начать работу в Vite, все, что нам нужно сделать, это запустить

npm init vite-app <project-name>

Затем нам просто нужно зайти в папку нашего проекта, установить наши зависимости, а затем запустить наше приложение с помощью следующих команд

cd <project-name>
npm install
npm run dev

Теперь, если мы перейдем к http://localhost:3000 - мы должны увидеть следующее приложение.

Некоторые функции Vue Vite, которые вам следует знать

1 - Подготовка проекта к производству

Целью Vite было максимально упростить разработку и производство Vue. И хотя во время разработки нет связывания, объединить ваш проект для продакшена очень просто.

Все, что вам нужно сделать, это запустить npm run build.

Если мы посмотрим на package.json, мы увидим, что это вызывает vite build, который, как и другие процессы сборки, объединяет ваш проект Vue и подготавливает вашу папку dist для обслуживания.

2 - Управление URL-адресами ресурсов

Как и другие настройки проекта Vue, Vite предлагает два способа ссылаться на ваши активы.

1. Совершенно верно - используя общую папку. На эти ресурсы ссылаются с помощью /file.extension, и они будут скопированы в корень вашей папки dist при сборке вашего проекта.
2. Относительно - например, доступ к файлам в папке src / assets зависит от файловой структуры папки. Вся эта папка помещается как _assets в папку dist при сборке вашего проекта.

3 - Встроенная поддержка машинописного текста

Одним из самых больших изменений в Vue3 было переписывание основной библиотеки с использованием Typescript, что позволило проверять типы и улучшать сообщения об ошибках в зависимости от вашей IDE.

Еще раз, Vue Vite плавно интегрируется с Vue3, предлагая встроенную поддержку Typescript как для файлов .ts, так и для <script lang="ts"> в SFC.

Понимание компонента Vue3

Теперь, когда у нас настроено приложение Vue3 и мы понимаем инструмент Vue3 Vite, давайте рассмотрим, как работают компоненты.

Самым большим изменением в Vue3 является введение Composition API. В этой новой структуре мы можем организовать наш код по функциям, а не только по данным, вычислениям и т. Д.

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

Если мы откроем файл src/components/HelloWorld.vue, мы увидим код, который выглядит идентично коду, который мы написали в Vue2 - это называется API параметров.

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

Это здорово, потому что показывает, как мы все еще можем использовать «старый» синтаксис в Vue3, если это то, что вам удобнее.

В этом руководстве давайте рассмотрим, как мы делаем это в новом Composition API, и определим изменения из Options API.

Реактивные данные в Composition API

В разделе сценариев нашего SFC давайте сначала импортируем некоторые вещи из основной библиотеки vue, чтобы мы могли создавать реактивные переменные.

import { ref } from 'vue'

Затем давайте заменим наш параметр данных функцией настройки, которая будет выглядеть примерно так.

import { ref } from 'vue'
  export default {
    setup () {
      
      return {
       
      }
    }
  }

Этот метод настройки запускается при создании нашего компонента, и именно здесь мы можем определить все наши реактивные данные, вычисленные свойства, методы и т. Д., Которые мы хотим, чтобы наш компонент использовал.

Тогда все, что возвращает этот метод настройки, станет доступно в нашем шаблоне!

Создание реактивных данных с исх.

Чтобы продемонстрировать это, давайте создадим текстовый ввод, используя v-model внутри нашего шаблона.

<template>
   <div>
     <h2> Filter LearnVue Articles </h2>
     <input 
      type='text' 
      placeholder='Filter Search' 
      v-model='query'
    />
    {{ query }}
   </div>
</template>

Давайте сделаем нашу реактивную переменную query с помощью ref, а затем вернем ее из нашего метода настройки.

setup () {
      const query = ref('')

      return {
        query
      }
}

Затем, если мы вернемся к нашему приложению, вы увидите, что у нас есть реактивные данные с помощью Composition API.

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

Большой!

Затем давайте добавим кнопку очистки к нашему вводу и посмотрим, как мы можем создать метод в Composition API.

Методы в Composition API

В API параметров есть целое свойство в нашем объекте Vue, посвященное методам.

Для файлов большего размера это означает, что данные могут быть объявлены за сотни строк от методов, которые их используют, что затрудняет чтение и обслуживание компонентов.

В Composition API все находится только в методе настройки, что означает, что мы можем организовать код в соответствии с функциями и даже извлекать общие функции в их собственные модули кода.

Давайте создадим метод сброса, который берет нашу ссылку и устанавливает ее в пустую строку.

setup () {
      const query = ref('')

      const reset = (evt) => {
        query.value = '' // clears the query
      }
      
      return {
        reset,
        query
      }
}

Следует отметить, что нам нужно вызвать query.value, чтобы получить доступ к значению данных.

Почему?

Если мы console.log(query), мы увидим, что это не просто строковое значение, а Прокси. Ловушки в прокси-серверах позволяют нам легко получать данные, но именно поэтому нам нужно вызывать .value для наших ссылок.

Затем, как и в API параметров, мы можем добавить в наш шаблон кнопку для вызова этого reset метода при нажатии.

<button @click='reset'> Reset </button>

Теперь, когда мы проверяем наше приложение с нашим новым чистым кодом ввода, оно должно выглядеть примерно так.

Добавление второго компонента в наш проект Vue3

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

Назовем это SearchResults.vue

Чтобы добавить это к нашему HelloWorld.vue коду, мы сначала должны импортировать его и объявить в нашем экспорте по умолчанию.

<script>
  import { ref } from 'vue'
  import SearchResults from './SearchResults.vue'
  export default {
    components: {
      SearchResults
    },
    // ...
  }
</script>

Затем мы можем просто добавить его в наш шаблон вот так.

<template>
   <div>
     <h2> Filter LearnVue Articles </h2>
     <input 
      type='text' 
      placeholder='Filter Search' 
      v-model='query'
    />
    <br>
    <button @click='reset'> Reset </button>
    <search-results/>
   </div>
</template>

Хорошо, давайте найдем способ использовать нашу строку запроса из нашего компонента HelloWorld.

Прохождение реквизита

Свойства Vue позволяют родительским компонентам передавать данные своим дочерним компонентам. В нашем случае мы хотим передать строку запроса из HelloWorld.vue в SearchResults.vue.

Мы можем сделать это, добавив атрибут внутри нашего тега <search-result> внутри HelloWorld.vue.

<search-results :query='query'/>

Простой!

Доступ к реквизиту

Внутри SearchResults.vue давайте создадим скелет нашего скрипта и импортируем всю информацию о статье из файла JSON.

import titles from '../post-data.json'
export default {
  setup (props, context) {
 
  }
}

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

Во-первых, мы должны объявить их в опции props. Это сообщает нашему компоненту, какие реквизиты ожидать, а также выполняет любую указанную нами проверку свойств.

export default {
  props: {
    query: String
  },
  setup (props, context) {
  // ...

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

1. props - содержит все реквизиты, переданные нашему компоненту
2. context - содержит attrs, slots и emit

Мы будем использовать props для доступа к значению наших props в методе настройки.

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

Вычисленные свойства

Подобно использованию ref, нам нужно импортировать вычисленные значения в наш проект.

import { computed } from 'vue'

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

import { computed } from 'vue'
import titles from '../post-data.json'
export default {
  props: {
    query: String
  },
  setup (props, context) {
    
    const filteredTitles = computed(() => {
     
    })

    return {
      filteredTitles
    }
  }
}

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

const filteredTitles = computed(() => {
      return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase()))
    })

Хорошо!

Все, что осталось сделать, это использовать наш шаблон для отображения данных! Это делается с помощью цикла v-for.

<template>
  <div class='root'>
    <p> Showing {{ filteredTitles.length }} results for "{{ query }}" </p>
    <ul>
      <li v-for='title in filteredTitles' :key='title.Page'>
        {{ title.Name }}
      </li>
    </ul>
  </div>
</template>

Вот и все.

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

Хуки жизненного цикла в вашем проекте Vue3

Еще одна вещь, которую вы должны знать, прежде чем приступить к работе с Vue3, - это то, как использовать хуки жизненного цикла Vue.

Как и другие части Composition API, мы должны импортировать хуки жизненного цикла, которые мы хотим использовать, и объявить их в методе настройки.

Вот краткий пример того, как использовать ловушку жизненного цикла.

import { computed, onMounted } from 'vue'
export default {
  setup () {
    
    onMounted(() => {
      console.log('mounted')
    })
  }
}

Если вам нужно подробное руководство по хукам жизненного цикла Vue, прочтите эту статью.

И вот оно!

В Vue3 так много интересных функций, которые должны быть настолько полезны для создания масштабируемых приложений Vue.

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

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

Удачного кодирования!

Если вы хотите узнать больше о Vue 3, скачайте мою бесплатную шпаргалку по Vue 3 с такими важными знаниями, как Composition API, синтаксис шаблона Vue 3 и обработка событий.