vuetify2安装问题和css / scss必须

汤姆

我试图以几种方式将Vuetify添加到我的项目中,但是却引起了很多错误(vue cli,vue ui,根据文档使用vuetify插件文件和特定的webpack配置)。因此,最后,我决定以更传统的方式进行操作。但是然后看起来我并没有使用所有样式。我不能将justify =“ center”与v-row(没有。样式justify-center)一起使用,容器全高没有全高并且v-text-field轮廓看起来很糟糕(标签应在左侧,但应在右侧,然后您单击它,它的顶部移至错误位置)

因此,也许有人可以帮助我正确添加它?也许我需要一些额外的加载程序或导入更多CSS样式。其中哪一个是强制性的?

我是怎么做到的?

1)npm install vuetify-保存

2)在index.js中导入vuetify和vuetify.min.css

import Vue from 'vue';
import App from './src/App.vue';
import router from './router';
import Vuetify from 'vuetify';


import './style.scss';
import './node_modules/bootstrap/dist/css/bootstrap-grid.css';
import './node_modules/vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.use(Vuetify);

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

3)简单的webpack配置

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    devtool: "source-map",
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                loaders: [
                  'style-loader',
                  'css-loader',
                  'sass-loader',
                ],
            },
            {
                test: /\.(woff2?|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    limit: 10000,
                    name: '[name].[hash:7].[ext]'
                }
             }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
      ]
};

我没有错误。唯一的问题是vuetify组件未正确呈现。

例:

大纲输入应如下所示: 在此处输入图片说明

但看起来:
在此处输入图片说明

卢卡·罗西(Luca Rossi)

这是App.js上必须包含Vuetify的内容:

import Vuetify from 'vuetify'
import colors from 'vuetify/lib/util/colors'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    router,
    render: h => h(App)
})

这样会起作用

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章