Vuetify：从零开始安装Vuetify

文章目录

安装
- Webpack安装Vuetify
- - 添加依赖(非必须)
  - 安装字体
  - 添加入口
- Vue UI安装(推荐)
浏览器兼容
- 浏览器
- 支持 IE11 和 Safari 9 问题
- Vue CLI解决兼容问题
- 添加 IE11 和 Safari 9 支持
- - polyfills
  - Babel preset-evn(推荐)
- Template 警告
- 页面效果
- 参考资料

安装

Webpack安装Vuetify

# 创建Vue项目
vue create vuetify
cd vuetify
npm install vuetify

添加依赖(非必须)

npm install sass@~1.32 sass-loader deepmerge -D

安装字体

最简单的安装方法是在你的 public\index.html 中加入他们的 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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">

添加入口

在src根目录下新建plugins/vuetify.js

// src/plugins/vuetify.jsimport Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';Vue.use(Vuetify);export default new Vuetify({});

找到main.js内添加

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'Vue.config.productionTip = falsenew Vue({vuetify,render: h => h(App)
}).$mount('#app')

至此，Vuetify的安装已经完成，现在添加一些组件查看效果吧~

Vue UI安装(推荐)

# 确保 Vue CLI 版本 >= 3.0
vue --version
vue ui

在屏幕左侧，单击插件。在输入框中搜索 Vuetify 并安装插件

如果使用Vue UI安装会自动解决浏览器兼容等问题，直接进入项目启动即可.

浏览器兼容

浏览器

浏览器名称	支持状态
Chromium (Chrome, Edge Insider)	支持
Edge	支持
Firefox	支持
Safari 10+	支持
IE11/Safari 10	需要polyfill
IE9 / IE10	不支持

支持 IE11 和 Safari 9 问题

Vuetify 使用 ES2015/2017 的功能，这些功能需要使用 polyfills 来兼容 Internet Explorer 11 和 Safari 9/10。

Vue CLI解决兼容问题

为了解决Vue CLI在IE11上的兼容性，您需要在webpack.config.js中手动添加transpileDependencies参数

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

添加 IE11 和 Safari 9 支持

polyfills

npm install core-js regenerator-runtime --save

然后在main.js文件或应用程序入口安装插件

// 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(推荐)

npm install @babel/preset-env -D

安装完毕后，将预设添加到babel.config.js文件内

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

Template 警告

由于 Internet Explorer 对<template>标签的支持有限，您必须向浏览器发送完整编译的 dom 元素。这可以通过提前构建你的 Vue 代码或者通过创建辅助组件来替换 dom 元素来实现。例如，如果直接发送至 IE，就会失败：

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

页面效果

参考资料

安装
浏览器支持
常见问题