在Vue项目中使用Element UI

最近在学习vue项目开发的过程中,接触到了Element UI,这是一个由饿了么团队开发的UI框架。首先是安装框架:

npm i element-ui -S

等待安装完成即可。然后是引入 Element UI,支持完整引入按需引入。完整引入需要在项目的main.js文件中添加如下内容中标记了🔺的行:

import Vue from 'vue';
import ElementUI from 'element-ui';//🔺
import 'element-ui/lib/theme-chalk/index.css';//🔺
import App from './App.vue';

Vue.use(ElementUI);//🔺

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

注意这里样式文件单独引入了哦。但是我在按照如上官方文档安装和引入之后,Element UI的css样式并没有起作用。查了一些资料,原来是vue.config.js中关于css配置的问题,我们只需要将vue.config.js配置文件里css的requireModuleExtension: 改为true 即可。示例如下:

module.exports = {
    css: {
        extract: true,
        sourceMap: false,
        loaderOptions: {
            sass: {
                prependData: `@import "./src/styles/main.scss";`
            }
        },
        requireModuleExtension: true  //🔺
    }
}

修改之后,重新启动服务,就能看见样式生效了。按需引入的部分目前还没有涉及到,如果需要了解的话可以参考官方文档,如果后边有什么心得,会另行记录下来。

发表评论

电子邮件地址不会被公开。 必填项已用*标注