我试图以几种方式将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组件未正确呈现。
例:
这是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] 删除。
我来说两句