Часть 1: Установка Vue

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

Установить Vue и запустить приложение Vue совсем несложно. Когда нам нужно сделать большой проект, мы хотим, чтобы в него было включено множество инструментов для разработки, все становится сложным и раздражающим. Vue CLI помогает нам упростить этот процесс. Давайте посмотрим, что есть в Vue CLI и как он работает.

Что такое Vue CLI?

Полное название - Vue.js Command-Line Interface. Использование @vue/cli делает нашу жизнь проще. (Нам нужно установить Node.js перед установкой vue)

npm install @vue/cli

yarn add @vue/cli

CLI Plugins позволяет нам выбирать, какие библиотеки будет использовать наш проект, и автоматически подключает их к проекту. Такие как eslint и babel. CLI Service включает webpack и webpack-dev-server. CLI Service настраивает Webpack таким образом, чтобы при развертывании нашего приложения все наши JavaScipt, CSS и зависимости должным образом объединялись, оптимизировались и уменьшались, что приводило к более высокой скорости загрузки.

Это также позволяет нам писать на HTML, CSS и JavaScript, как нам нравится. Такие как Vue SFC, TypeScipt, SCSS, Pug и последние версии ECMAScript. А в режиме разработки он включает горячую замену модулей (HMR), что означает, что изменения в нашем приложении будут обновляться в реальном времени, когда мы сохраняем наш проект.

Что такое Vue SFC?

Полное название - Однофайловый компонент. Каждый файл с именем .vue является SFC. Это упрощает редактирование нашего кода. Все можно записать в один и тот же файл. Вот веб-сайт, на котором показано, как SFC передает реальное кодирование:



Vue SFC Playground
Изменить описание sfc.vuejs.org



Если мы хотим использовать формат SFC для написания нашего кода. Структура файлов должна быть более полной. В этом случае мы устанавливаем vue/cli , который автоматически генерирует правильную структуру файлов для использования SFC.

Начать

Установите @vue/cli, и в файле package.json это будет выглядеть так.

Иногда мы сталкиваемся с такими ошибками:

Failed to compile with 1 error
Syntex Error: TypeError: Cannot read property ‘parseComponent’ of undefined.

Это означает, что наши «vue» и «@ vue / compiler-sfc», вероятно, имеют другую версию. Рекомендую удалить node modules folder для повторной переустановки.

~ установит последнюю версию.

^ установит последнюю версию на том же уровне, что не приведет к переходу к другой целочисленной версии.

После настройки приложения Vue мы можем запустить сборку пряжи комментариев и пряжу для проверки.

Следующая статья посвящена Vue Router:

Часть 2: Использование Vue Router

Другие статьи:

Часть 3: Реализация Firebase Auth

Часть 4. Использование Firebase для добавления профиля

Часть 5: Использование TipTap

Получить код

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

Надеюсь, у вас есть прекрасное путешествие по программированию. Найди меня на IG! Я театральный художник-фрилансер.