vue3+vite引入vant样式不起作用
搜了很多资料没有搜到一篇能解决问题的文章,基本上都是说什么vite引入的问题,其实并不是,官网给的按需引入的代码没有什么问题这是vite的配置import vue from '@vitejs/plugin-vue';import styleImport from 'vite-plugin-style-import';export default {plugins: [vue(),styleImpo
·
搜了很多资料没有搜到一篇能解决问题的文章,基本上都是说什么vite引入的问题,其实并不是,官网给的按需引入的代码没有什么问题
这是vite的配置
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default {
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style/index`,
},
],
}),
],
};
于是乎还得靠自己把vant这个对象打出来看看有什么猫腻
得到的结果是这样的
那么我的问题就出在组件引入的问题上
由于我是在script中加了setup
所以按我引入的习惯
比如引入库里面的组件,我会按下面的方式引入
import {Form, Field, CellGroup, Button,Dialog} from 'vant'
但是从我们打印出来的组件对象来看这么引入是错的
正确的引入方式是
<script lang="ts">
import {Form, Field, CellGroup, Button,Dialog} from 'vant';
import {defineComponent, ref} from "vue";
export default defineComponent({
components: {
[Form.name]: Form, //这里必须这么写不然就报错样式也不会有.这就是坑
[Field.name]: Field,
[CellGroup.name]: CellGroup,
[Button.name]: Button,
[Dialog.Component.name]: Dialog.Component
},
setup() {
const username = ref('');
const password = ref('');
const onSubmit = (values:string) => {
console.log('submit', values);
};
return {username, password, onSubmit,};
},
})
</script>
vant文档对刚使用它的人十分不友好,可以说引入组件那部分文档就是错的,要靠用户自己取猜,怎么引
更多推荐
已为社区贡献2条内容
所有评论(0)