碎言博客

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

J.sky 2020-03-19 09:33:18 Vue

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

发现错误?想参与编辑? 在 GitHub 上编辑此页!

如果您有什么问题,欢迎加入Python/Javascript学习讨论群询问

Python/Javascript学习QQ群号:217840699