vue中按需引入element-ui,关于版本和配置的那点事儿~
读前说明版本介绍开始配置01020304 相关资料读前说明
众所周知,
在前端领域内,一个插件的小小版本号,都可能让一个大项目瞬间崩溃。
由于vue在不断升级,而ele有点小小的跟不上节奏,
导致很多人在使用中出现了各种问题,碰了不少壁。
而在@vue/cli3版本前后,配置方法是非常不一样的。
所以,本次就以常见版本为基础,梳理一下完整的配置。
版本介绍
本次使用版本:
vue: ^2.6.11@vue/cli : 4.5element-ui: 2.15.7
开始配置
01
进入vue项目文件夹,使用命令:
vue add element
, 把ele加载到vue中。
他会自动给安装一个插件vue-cli-plugin-element
然后,会出现两次选择,第一次是:
How do you want to import Element?
意思是,你想怎么引入element-ui?
一个是全部,一个是按需(Import on demand
),毫无疑问,选择按需加载。
(这里是用键盘的上下键来选择,选好之后,按回车键即可)
第二次是:
让你选择语言。 看着选就行,zh-CN
是中文简体。
02
babel7.0版本前后,babel配置文件名字是不一样的。
7.0之后的版本,配置文件名是babel.config.js
module.exports = {presets: ['@vue/app',['@babel/preset-env',//添加 babel-preset-env 配置 {'modules': false}]],plugins: [ // element官方教程['component',{'libraryName': 'element-ui','styleLibraryName': 'theme-chalk'}]]}
03
这里还有个坑。
因为我们做项目,一般上来就会把vue文件中自带的HelloWorld.vue
文件给删掉,
这时候要是运行yanr serve
就会报错:
ERROR Failed to compile with 1 error
This relative module was not found:
* ./components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
这时候,不要慌,搜索一下引用HelloWorld
组件的地方,都删一下,清理干净即可。
这时候再运行yarn serve
,
就可以看到这个成功的页面:
04
这时候, 可以发现,准备工作做好后,vue自动给引入了一个按钮做例子,
而我们啥都没做。
所以,回到文件中,我们可以看到这个按需加载是怎么用的:
在main.js
中,是这样的:
在App.vue
文件中这样使用ui组件:
相关资料
快速上手:/#/zh-CN/component/quickstart
vue-cli-plugin-element :/ElementUI/vue-cli-plugin-element
配置好的:/guozia007/vue-handbook
over~