Введение в Vue.js и Quasar Framework

 data () { return { columns: [ { name: 'name', required: true, label: 'Dessert (100g serving)', align: 'left', field: row => row.name, format: val => `${val}`, sortable: true }, { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true }, { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true }, { name: 'carbs', label: 'Carbs (g)', field: 'carbs' }, { name: 'protein', label: 'Protein (g)', field: 'protein' }, { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' }, { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) } ], data: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, sodium: 87, calcium: '14%', iron: '1%' }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, sodium: 129, calcium: '8%', iron: '1%' }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, sodium: 337, calcium: '6%', iron: '7%' }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium: '3%', iron: '8%' }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, sodium: 327, calcium: '7%', iron: '16%' }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, sodium: 50, calcium: '0%', iron: '0%' }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, sodium: 38, calcium: '0%', iron: '2%' }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, sodium: 562, calcium: '0%', iron: '45%' }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, sodium: 326, calcium: '2%', iron: '22%' }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, sodium: 54, calcium: '12%', iron: '6%' } ] } } } 

(Это объект, который мы взяли из документации Quasar.)

Нам также нужно добавить компонент QTable в quasar.conf.js как в QAvatar , и теперь мы должны увидеть таблицу в середине нашего макета:

Ссылку на компонент таблицы можно найти здесь .

Новым дополнением к Quasar v1 является QMarkupTable , компонент, который можно использовать для обертывания обычной таблицы HTML, чтобы придать ей стиль оформления материала .

Чтобы протестировать другой компонент, мы добавим маршрут /editor в router/routes.js :

 const routes = [ { path: '/', component: () => import('layouts/MyLayout.vue'), children: [ { path: '', component: () => import('pages/Index.vue') } ] }, { path: '/editor', component: () => import('layouts/MyLayout.vue'), children: [ { path: '', component: () => import('pages/Editor.vue') } ] } ] // Always leave this as last one if (process.env.MODE !== 'ssr') { routes.push({ path: '*', component: () => import('pages/Error404.vue') }) } export default routes 

Теперь мы добавляем компонент редактора . Мы добавим QEditor в quasar.conf.js и скопируем src/pages/Index.vue в src/pages/Editor.vue .

Затем мы добавляем этот код в копию, где мы изначально заменили тег img в файле Index.vue :

  <div class="q-pa-md q-gutter-sm"> <q-editor v-model="editor" :definitions="{ save: { tip: 'Save!', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload!', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }" :toolbar="[ ['bold', 'italic', 'strike', 'underline'], ['upload', 'save'] ]" /> </div> 

Примечание: мы также удаляем классы flex из тега q-page в Editor.vue.

Нам также необходимо убедиться, что тег script в файле Editor.vue выглядит следующим образом:

 <script> export default { name: 'PageEditor', data () { return { editor: 'this is a test' } }, methods: { saveWork () { this.$q.notify({ message: 'Saved your text in the browser storage', color: 'green-4', textColor: 'white', icon: 'fas fa-check-circle' }) }, uploadIt () { this.$q.notify({ message: 'Error! Check your connection', color: 'red-5', textColor: 'white', icon: 'fas fa-exclamation-triangle' }) } } } </script> 

Примечание: когда мы компилируем это, мы можем получить ошибки отступа, которые не должны быть слишком трудными для решения.

Когда мы перейдем к http://localhost:8080/#/editor , мы должны увидеть редактор:

Это редактор WYSIWYG, и у него есть больше элементов, доступных для его панели инструментов.

На самом деле мы добавили бы axios в наше приложение — рекомендуемую библиотеку для запросов Ajax — и Vuex для обработки данных среди других утилит Quasar.

Вывод

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

Это просто введение, и ни в коем случае не всестороннее. Но мы рассмотрели ту часть, которая чаще всего является самым большим препятствием на пути к усыновлению: понимание процесса установки и создания лесов. С остальной литературой по Vue.js в нашей библиотеке и отличной документацией на веб-сайте Quasar, это руководство должно позволить вам сразу перейти к созданию реальных приложений Quasar.