前端框架:Vuetify:从零开始安装Vuetify

文章目录

安装

前端框架:Vuetify:从零开始安装Vuetify

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 并安装插件
前端框架:Vuetify:从零开始安装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 11Safari 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>

页面效果前端框架:Vuetify:从零开始安装Vuetify

参考资料

上一篇:Vuetify表单校验


下一篇:javascript – RxJS:区分单击和拖动