标题element-ui 按需引入, cdn引入,全部引入
1.按需引入
首先,需要安装element-ui, npm install element-ui --save
然后,在main.js文件中按需引入
import Vue from 'vue'
import {
Button,
Message,
Form,
FormItem
} from 'element-ui';
//由于Message组件并没有install方法供Vue来操作的,是直接返回的,因此按照官方文档单独引入的方法会报错的,需要给 Message 添加 install 方法
Message.install = function (Vue) {
Vue.prototype.$message = Message
}
Vue.use(Button)
Vue.use(Message)
Vue.use(Form)
Vue.use(FormItem)
2. cdn引入
- 首先,我是用的vue cli3.0脚手架,需要在public文件夹下的index.html文件中添加cdn链接,element-ui是cdn引入,vue也必须是cdn引入,而且vue的引入必须在element-ui之前,因为element-ui是基于vue书写的。
(element-ui是cdn引入,vue是npm安装,这样会报错的)
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script> -->
- 然后, 在vue.config.js文件中配置一些属性,为了项目文件可以识别cdn引入的vue和element-ui。
(不需要再在main.js中引入vue和elemet-ui)
(有一个不好,那就是不能修改主题颜色,我本人比较菜,没找到解决办法)
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
// 'vue-router': 'VueRouter',
// 'vuex': 'Vuex',
// 'axios': 'axios'
}
}
}
3. 全部引入
- 首先, 安装element-ui,
npm install element-ui --save
- 然后,在main.js文件中引入
import Vue from 'vue'
import ElementUI from 'element-ui'
// 主题颜色修改文件
import "./style/element-variables.scss"
Vue.use(ElementUI)
主题颜色修改,并存放到本地项目的style文件夹下的element-variables.scss
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
最后,对比了全部引用和cdn引用这2种方式打包之后的dist大小,二者打出的dist大小相差差不多4M