Как легко создать интерфейсное веб-приложение, соответствующее Material Design.
Vue.js - это JavaScript-фреймворк с открытым исходным кодом, созданный и поддерживаемый энергичным и увлеченным сообществом. Несмотря на то, что он относительно новичок в мире веб-приложений, Vue быстро завоевывает позиции на более популярных альтернативах, React и Angular.
Хотя Vue.js замечательно полезен, сам по себе он не обязательно красив. Конечно, мы могли бы создать все необходимые нам компоненты, настроив CSS в соответствии с нашими шаблонами проектирования, но есть гораздо более простой способ. Vuetify - это компонентный фреймворк, который следует концепциям материального дизайна. Короче говоря, это огромная библиотека пользовательского интерфейса, которая отлично работает с Vue. Такие вещи, как формы, кнопки, панели приложений и даже прядильщики, можно использовать почти мгновенно, что ускоряет работу интерфейса до невероятных темпов. Кроме того, это почти гарантирует, что мы следуем единому шаблону проектирования, что улучшает наш пользовательский опыт!
А теперь приступим к делу.
Шаг 0 (необязательно): Контроль версий 💪
Всегда полезно запускать контроль версий, когда вы начинаете свой проект. Перейдите на github.com и создайте новый репозиторий с любым именем. Нажмите кнопку «Инициализировать этот репозиторий с помощью README», затем нажмите «Создать репозиторий».
Затем клонируйте свое репо через SSH или HTTP из командной строки с помощью
$ git clone <the-link-github-provides>
В вашем терминале перейдите в каталог, который только что был клонирован с помощью
$ cd <my-repo-name>
Если вы не знакомы с git и хотите им стать, Git-it - прекрасный учебник, который познакомит вас со всем, что вам понадобится для начала работы.
Шаг 1. Установите Vue Cli
Vue CLI (интерфейс командной строки) на сегодняшний день является самым быстрым и простым способом создания каркасов, необходимых для проекта Vue.js.
Здесь есть некоторая документация по установке, но если у вас уже установлен npm, это так же просто, как запустить следующее в нашем терминале
$ npm install -g @vue/cliШаг 2: Создайте проект Vue
Теперь, когда у нас установлен интерфейс командной строки, для создания нового проекта нам просто нужно запустить в командной строке следующее.
$ vue create my-appВы, конечно, должны заменить «my-app» желаемым именем приложения! Здесь вам будет предложено ввести некоторые параметры настройки, но меня всегда устраивали значения по умолчанию.
Запустите выбранный вами редактор кода. В большинстве случаев я использую код VS. Он легкий и невероятно настраиваемый, не говоря уже о бесплатном, идеально подходит для разработки Vue.js.
Теперь у вас создано функциональное приложение Vue.js! Это отличное место для совершения преступлений 😃
Шаг 3: Добавьте Vuetify 🔮
Переместите свой рабочий каталог в приложение, которое только что было создано с помощью (конечно, замените my-app именем, которое вы дали команде vue create)
$ cd my-app
Затем мы можем настроить наше приложение для использования Vuetify, просто выполнив следующую команду
$ vue add vuetifyЧтобы увидеть свое новое красивое веб-приложение, запустите сценарий запуска (yarn serve или npm run dev) и просмотрите его в своем браузере!
Как рекомендует инструмент командной строки, это отличное место для фиксации ваших изменений.
Шаг 4 и далее: добавление компонентов и настройка
Теперь, когда у вас есть Vuetify, подключенный к Vue, добавление сумасшедших сложных и привлекательных компонентов так же просто, как один лайнер. Просмотрите документацию и посмотрите, какие компоненты могут быть вам полезны. Взгляните на ресурсы ниже, чтобы узнать, что вы можете сделать. На самом деле получение компонентов для работы - это скорее навык Vue.js, поэтому их документы и различные руководства будут вам полезны.
Ресурсы 🧐
Кроме того, не стесняйтесь оставлять ответ или твитнуть, если у вас есть какие-либо вопросы / вопросы!
Понравилась эта статья? Хлопайте и подписывайтесь на меня здесь или в твиттере! Вы можете следить за моим путешествием и видеть мои проекты на моем сайте.
