全栈之路-前端vue中按需引入Element UI及使用
Posted 涂宗勋
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了全栈之路-前端vue中按需引入Element UI及使用相关的知识,希望对你有一定的参考价值。
有些简单操作时间长了不用可能也会忘记,尤其是一些细节,因此对vue中按需引入element-ui也做一个简单记录。
安装依赖
cnpm i element-ui -S
cnpm i babel-plugin-import -D
以上操作也可以使用npm
,但相对速度可能会慢点。element-ui
是基础依赖,babel-plugin-import
的作用是按需引入,这些在element官网都有说明。
配置
安装了依赖之后,还需要一定的配置,主要是两个文件,一个是babel.config.js
,另一个是main.js
,如果创建vue项目时不时使用的babel,可能babel.config.js
这一项会有所区别。
babel.config.js
module.exports =
"presets": [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", "modules": false ]
],
"plugins": [
[
"component",
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
]
]
最开始接触vue的时候,就好几次因为这个没有配置好而导致按需引入后有问题。
main.js
这里是一个示例,我是用了element的时间线组件,所以按需引入了相关的几个component。
import Icon, Timeline,TimelineItem from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Icon);
Vue.use(Timeline);
Vue.use(TimelineItem );
使用
这里依赖于上一步的组件引入,有的时候先复制了官网的代码,结果发现并没有官网的效果,可能就是忘了import组件。这里示例使用时间线,复制官网的代码进行了一点修改,官网地址:
https://element.eleme.cn/#/zh-CN/component/timeline
<el-timeline>
<el-timeline-item icon="el-icon-more" type="primary" color="activity.color" size="large" timestamp="2021/10/30" placement="top">
<el-card>
<h4>增加页面交互功能</h4>
<ol>
<li>增加顶部导航栏和主内容区域切换的交互</li>
<li>引入el-timeline、Icon、Card实现网站历程</li>
</ol>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2021/10/29" placement="top">
<el-card>
<h4>项目初始化</h4>
</el-card>
</el-timeline-item>
</el-timeline>
示例源码地址
为了更好的验证和巩固这些知识,我创建了一个项目,并进行了服务器的部署,不过目前仅实现了一些最简单的交互。
网站部署在阿里云服务器,url:http://tzxcode.cn/
源码托管于gitee,地址:https://gitee.com/tuzongxun/tzxcode
以上是关于全栈之路-前端vue中按需引入Element UI及使用的主要内容,如果未能解决你的问题,请参考以下文章