全栈之路-前端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及使用的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli引入element和vant前端ui组件

vue-cli3X + elementUI 按需引入踩的坑

Laravel+Vue.js全栈开发之路

vue2.0+按需引入element-ui报错

vue-cli3.0安装element-ui组件及按需引入element-ui组件

vue按需引入Element UI的方法