Лекции
April 30, 2020
SPA-приложение на Vue.js #1
Настройка окружения
$ npm i -g vue-cli
$ vue init webpack vue-covid
? Project name vue-covid ? Project description Vue dashboard for getting covid-statistics ? Author kantegory <davidobryakov@gmail.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) npm
cd vue-covid
Установка необходимых зависимостей:
npm i axios vue-axios vuex --save-dev npm i vuetify --save-dev npm i sass sass-loader fibers deepmerge -D
Настройка webpack.base.conf.js (вставляем в конец массива rules):
{ test: /\.s(c|a)ss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', // Requires sass-loader@^7.0.0 options: { implementation: require('sass'), fiber: require('fibers'), indentedSyntax: true // optional }, // Requires sass-loader@^8.0.0 options: { implementation: require('sass'), sassOptions: { fiber: require('fibers'), indentedSyntax: true // optional }, }, }, ], }
Создаём папку plugins в src, в ней создаём файлик vuetify.js со следующим содержимым (не забудьте установить mdi и typeface-roboto: npm i @mdi/font typeface-roboto --save
):
import Vue from 'vue' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' import '@mdi/font/css/materialdesignicons.css' Vue.use(Vuetify) const opts = { icons: { iconfont: 'mdi' } } export default new Vuetify(opts)
Импортируем vuetify в файлик main.js:
// The Vue build version to load with the import command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import vuetify from '@/plugins/vuetify' Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '<App/>', vuetify })
Скопируем готовую разметку из (не забудьте обёрнуть код в <v-app></v-app>
): https://vuetifyjs.com/ru/components/
Найти иконку можно здесь: https://materialdesignicons.com/
Пример вставки иконки (не забываем про префикс "mdi-"):
<v-icon>mdi-virus</v-icon>
Установить библиотеку для визуализации графики можно следующей командой:
npm install vue-chartjs chart.js --save