文章目录
安装
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.js
import 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 = false
new 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.js
module.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>