SPA-приложение на Vue.js #1

Настройка окружения

Устанавливаем vue-cli:

$ 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