vue组件css的最佳处理方式是什么?合并为css文件还是按需组件引入

html-css014

vue组件css的最佳处理方式是什么?合并为css文件还是按需组件引入,第1张

按需组件引入吧,这样会减少不必要的css,当然你每个组件的css要独立出来,而且如果使用webpack 的vue-loader处理 即使重复引用同一个组件css也是同用一份,不会额外的复制多个

选择一个文件夹,在终端中打开

也可一步创建

具体步骤见下图,这里使用的是yarn

yarn install后执行yarn run dev,可以看到,启动项目只用了1秒多(选择的模板为vue)

从上图中可以看到vite初始化出来的组件script标签中默认加入了setup,这种写法源于之前的一个关于 script setup提案 ,感兴趣的可以看下,写法跟之前有很多区别,写了两个demo,可以实际运行起来体验下,用的是上面初始化的项目,写法比之前简单许多。

(父组件,也就是App.vue)

(子组件,也就是HelloWorld.vue)

现在单独的一个css文件也可导入,如在当前组件需要main.css中定义的样式,只需要@import url()

更多有关CSS特性参考 官网 给出的配置,我这里就不详细说明了

有时候,我们需要动态绑定图片的时候会用到require('../xxx')

但是在vite中会出现这样一个错误

有关项目我已上传,地址为 https://github.com/czy1026/vite-test.git