全栈之路-前端vue中按需引入Element UI及使用

Posted 2021-12-03 涂宗勋

有些简单操作时间长了不用可能也会忘记，尤其是一些细节，因此对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