导读:很多朋友问到关于django怎么引入elementui的相关问题,本文首席CTO笔记就来为大家做个详细解答,供大家参考,希望对大家有所帮助!一起来看看吧!
关于element-ui的按需引入配置
前言:因为刚开始搭建项目框架的时候比较急,那时候确认要使用element-ui框架,就直接去官网照着安装全局引入,最近项目结束后,发现首页的加载速度有点小慢,就准备将项目内的所有引入的element-ui组件全部归类出来,按需引入!怕忘记自己的这一套引入方式,因此记录,废话不多说,上菜!
目录结构我就上传了,本框架使用的是vue版本的,未转换为ts版本!
先创建一个companyImport.js,将element-ui的样式及所使用的组件全部引入,格式如下
然后进入main.js文件中,将之前定义的文件引入,然后使用Vue.use(xxx)进行全局声明
按照上面的配置,蹬~蹬~蹬~,之前页面内使用的组件就不报错了,因为我这个demo是写在vue-cli的vue-electron的模板下的,所以这里配置文件不一样,请关注重点!
element-ui引入方式、自定义主题
在 main.js 中写入以下内容:
借助 babel-plugin-component ,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
然后,将 .babelrc 修改为:
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
新建一个样式文件,例如 element-variables.scss ,写入以下内容:
之后,在项目的入口文件中,直接引入以上样式文件即可(无需引入 Element 编译好的 CSS 文件):
如上是全局安装可以在命令行里通过 et 调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss ,当然你可以传参数指定文件输出目录。
直接编辑 element-variables.scss 文件,例如修改主题色为红色。
ps: 注意不要手动修改 ./theme 下的 *.css 文件样式,因为et命令编译输出会覆盖
可以再package.json script字段增加命令: "build_theme": "node_modules/.bin/et -o ./themes"
运行: npm run build_theme
如果以上工具全局安装了,运行:
在django或flask带的jinja2模版中使用vue和element-ui
1,head标签中加上:
2,在需要用的地方加上id,使用[[]]包上变量,可同时使用jiaja2变量:
3,js里面构造实例vm:
解决低版本引入高版本element ui组件单独全局注册
一、从高版本的node_module里面找到element-ui/packages 里的组件引入到components
二、main.js引入
三、在node_modules 里面的element-ui/lib/theme-chalk里面找到对应组件样式引入
结语:以上就是首席CTO笔记为大家整理的关于django怎么引入elementui的全部内容了,感谢您花时间阅读本站内容,希望对您有所帮助,更多关于django怎么引入elementui的相关内容别忘了在本站进行查找喔。