Vue快速学习笔记(9)Vuetify配置及简单使用

Vuetify的安装及配置

相对来说vuecli的安装配置比较简单，在插件里搜索Vuetify，安装即可，这里说下Vuetify在webpack的安装及配置方式。

首先是:

npm install vuetify
npm install sass sass-loader fibers deepmerge -D

然后是配置文件里的加载器配置，因为使用了sass,如下方法配置。

// webpack.config.js

module.exports = {
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
            },
        },
        },
    ],
    },
],
}

然后是引入，这里官网用了一个新建.js来配置Vuetify的引入，如果没有设置@指向目录，可能会没有效果。 这里我就直接修改了在main.js里引用：

//导入Vue
import Vue from "vue";

import App from "./components/App.vue";

// 引入Vuetify组件
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
// vuetify 自定义配置
var vuetify = new Vuetify({})

var vm = new Vue({
    el: '#app',
    render: c => c(App),
    vuetify

});

好了，大功告成，现在就可以开始愉快的使用Vuetify了，总体来说，我比较喜欢Vuetify，很有设计感细节颜色设计的非常棒。 javaScript在线正则表达式测试，本程序纯粹是为了学习Vue、webpack、Vuetify，一个重复制造轮子的的实践。欢迎大家交流学习。

项目演示地址：JavaScript_RegExp

项目仓库地址：

JavaScript_RegExp___gitee JavaScript_RegExp___github