Vuetify: install vuetify from scratch

install

Webpack install Vuetify

#  establish Vue project 
vue create vuetify
cd vuetify
npm install vuetify

Add dependency ( Not necessary )

npm install [email protected]~1.32 sass-loader deepmerge -D

Install Fonts

The easiest way to install is in your public\index.html Join their CDN

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

Add entry

stay src New at root plugins/vuetify.js

// src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
    
});

find main.js Add in

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
    
    vuetify,
    render: h => h(App)
}).$mount('#app')

thus ,Vuetify The installation of has been completed , Now add some components to see the effect ~

Vue UI install ( recommend )

#  Make sure  Vue CLI  edition  >= 3.0
vue --version
vue ui

On the left side of the screen , single click plug-in unit . Search the input box for Vuetify And install plug-ins

If you use Vue UI Installation will automatically solve problems such as browser compatibility , Directly enter the project to start .

Browser compatibility

browser

Support IE11 and Safari 9 problem

Vuetify Use ES2015/2017 The function of , These functions require the use of polyfills Compatible Internet Explorer 11 and Safari 9/10.

Vue CLI Solve compatibility problems

In order to solve Vue CLI stay IE11 Compatibility on , You need to webpack.config.js Add manually in transpileDependencies Parameters

// vue.config.js
module.exports = {
    
    transpileDependencies: ['vuetify']
}

add to IE11 and Safari 9 Support

polyfills

npm install core-js regenerator-runtime --save

And then in main.js File or application entry to install plug-ins

// Polyfills
import 'core-js/stable'
import 'regenerator-runtime/runtime'

// Imports
import Vue from 'vue'
import vuetify from '@/plugins/vuetify'

new Vue({
     vuetify }).$mount('#app')

Babel preset-evn( recommend )

npm install @babel/preset-env -D

After installation , Add preset to babel.config.js In the file

// babel.config.js

module.exports = {
    
    presets: ['@babel/preset-env']
}

Template Warning

because Internet Explorer Yes <template> Tag support is limited , You must send a fully compiled... To the browser dom Elements . This can be done by building your Vue Code or replace by creating auxiliary components dom Element to implement . for example , If sent directly to IE, Will fail ：

<!-- Vue Component -->
<template v-slot:items="props">
  <td>{
   { props.item.name }}</td>
</template>

Page effects

Reference material

• install
• Browser support
• common problem