Материальный дизайн - самый популярный в мире язык дизайна, созданный Google Inc. Он предоставляет огромное количество компонентов или шаблонов дизайна, чтобы придать вашему приложению вид материала. Некоторые интерфейсные фреймворки на основе материального дизайна создаются сообществом и используются для создания интерактивных и интуитивно понятных веб-приложений. В этом посте вы узнаете об установке vue-материала и научитесь использовать его в Vue.js Framework.
Vue Material - это библиотека в стиле Google Material Design, используемая для создания веб-приложений.
Установка материала Vue
Библиотеку материалов Vue можно использовать в качестве компонентов Vue в проекте Vue. Прежде чем приступить к установке материалов Vue, предполагается, что вы знакомы с HTML, CSS и Javascript. Вы настроили проект Vue, и в вашей системе установлен хороший редактор, например VS code. Если вы еще не настроили проект Vue, вы можете выполнить приведенную ниже процедуру, чтобы быстро настроить проект Vue.
Настроить проект Vue
Чтобы настроить проект Vue, сначала проверьте,.js установлен в вашей системе или нет, набрав команду, приведенную ниже:
$ vue --version
Если вы еще не установили его, введите приведенную ниже команду, чтобы установить Vue.js глобально в вашей операционной системе:
$ npm install -g @ vue / cli
После успешной установки Vue.js глобально в вашей операционной системе, создайте проект Vue, набрав приведенную ниже команду «vue create», за которой следует имя проекта:
$ vue создать vueprojectname
Вам будет предложено либо выбрать пресет, либо выбрать свой собственный пресет для проекта Vue.
После настройки или выбора предустановки по умолчанию через некоторое время будет создан проект Vue.
После создания проекта Vue перейдите в каталог только что созданного проекта с помощью команды «cd».
$ cd vueprojectname
На этом этапе вы успешно настроили проект Vue.
Установить Vue Material
Как только ваша система будет готова, и проект Vue настроен! Вы можете установить «vue-material» с помощью пряжи или NPM.
Для установки vue-material с помощью диспетчера пакетов Yarn введите команду, указанную ниже:
$ пряжа добавить vue-материалИЛИ ЖЕ
Для установки vue-material с помощью диспетчера пакетов NPM введите команду, указанную ниже:
$ npm install vue-material --save
Хорошо! После установки vue-material вы должны включить его в главном.js файл.
импортировать VueMaterial из 'vue-material'импортировать 'vue-material / dist / theme / default.css '
импортировать 'vue-material / dist / vue-material.мин.css '
Vue.использовать (VueMaterial)
После включения «vue-material» вы можете использовать его в своем проекте Vue.
Как использовать материал Vue во Vue
Чтобы использовать Vue Material с Vue, vue-material предоставляет различные компоненты для использования в качестве компонента Vue. Например, кнопка может быть создана с использованием vue-материала, подобного этому.
Чтобы узнать о других компонентах, посетите официальную страницу начала работы Vue Material.
Вот как просто установить и начать использовать Vue Material в проекте Vue.
Заключение
Vue Material - это модная библиотека компонентов материального дизайна, используемая для создания веб-приложений. В этом посте мы рассмотрим установку Vue Material в Vue.js и узнайте, как его включить и использовать. Комбинируя такие две надежные библиотеки, мы можем ускорить процесс разработки и украсить наше веб-приложение до самых высоких пределов.