Phenquestions
Материалният дизайн е най-популярният език за дизайн в света, създаден от Google Inc. Той предоставя огромен брой компоненти или шаблони за дизайн, за да придаде на материала ви вид на вашето приложение. Някои базирани на материалния дизайн интерфейсни рамки се създават от общността и се използват за създаване на интерактивни и интуитивни уеб приложения. Тази публикация ще научи за инсталирането на 'vue-material' и ще се научи да го използва във Vue.js Framework.
Vue Material е библиотека, вдъхновена от Google Material Design, използвана за изграждане на уеб приложения.
Инсталиране на Vue материал
Vue библиотеката с материали може да се използва като компоненти на Vue в проект на Vue. Преди да започнете с инсталирането на Vue материал, се предполага, че сте запознати с HTML, CSS и Javascript. Настроили сте Vue Project и имате инсталиран добър редактор на вашата система като VS код. Ако все още не сте настроили Vue проекта, можете да следвате процедурата, дадена по-долу, за да настроите бързо Vue проект.
Настройка на Vue Project
За да настроите 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-материала” с помощта на преждата или NPM.
За да инсталирате 'vue-material' с помощта на мениджъра на пакети за прежди, въведете командата, дадена по-долу:
$ прежда добавете vue-материалИЛИ
За да инсталирате 'vue-material' с помощта на NPM диспечера на пакети, въведете командата, дадена по-долу:
$ npm инсталирайте vue-material --save
Добре! След като 'vue-material' бъде инсталиран, трябва да го активирате в основната.js файл.
импортирайте VueMaterial от „vue-material“импортиране 'vue-material / dist / theme / default.css '
import 'vue-material / dist / vue-material.мин.css '
Vue.използване (VueMaterial)
След като активирате „vue-material“, вече можете да го използвате във вашия Vue проект.
Как да използваме Vue материал във Vue
За да използвате Vue Material с Vue, 'vue-material' предоставя различни компоненти, които да се използват като Vue компонент. Например, бутон може да бъде създаден с помощта на „vue-material“ по този начин.
За да знаете за допълнителни компоненти, не се колебайте да посетите официалната страница за начало на Vue Material.
Ето колко е лесно да инсталирате и започнете да използвате Vue Material в Vue проект.
Заключение
Vue Material е модерна библиотека за компоненти за дизайн на материали, използвана за изграждане на уеб приложения. В тази публикация разглеждаме инсталацията на Vue Material във Vue.js и вижте как да го активирате и използвате. С комбинацията от такива две здрави библиотеки можем да ускорим процеса на разработка и да разкрасим нашето уеб приложение до най-високите граници.
