element如何按需导入

2021-02-22 21:16发布

2条回答
芒果
2楼-- · 2021-02-23 11:54

  1. 安装element-ui组件

  2. 查看配置文件package.json,是否有element-ui组件的版本号

      在node_modules中也可以查看,所有安装的源文件可以在这里面找到

  3. 在main.js中引入

      以下代码便完成了 Element 的引入

      import ElementUI from 'element-ui'

      import 'element-ui/lib/theme-chalk/index.css'

      Vue.use(ElementUI)

   4. 当然也可以按需引入Element UI组件

      1)先安装 babel-plugin-component

        {  

            "presets": [   

               ["es2015", { "modules": false }] 

            ], 

            "plugins": [["component", [ 

                {     

                    "libraryName": "element-ui",    

                    "styleLibraryName": "theme-chalk"   

                }

            ]]]

        }

    2)修改.babelrc

    3)在 main.js 中引入你所需要的组件

   5. 在创建的组件使用element的组件

   6. 可以看到我们成功的使用了element组件

我的网名不再改
3楼-- · 2021-02-24 13:55

在vue项目的开发中,实现对Element-ui组件库插件的安装及按需导入

基于图形化界面自动安装

1、运行vue ui打开图形化界面
在这里插入图片描述

2、在项目配置模板中点击插件 — 添加插件,进入插件查询面板
在这里插入图片描述
3、搜索vue-cli-plugin-element并安装
在这里插入图片描述
4、配置插件,实现按需导入,从而减小打包后的项目体积
在这里插入图片描述
5、完成安装后,项目的main.js文件会出现导入element.js的代码
在这里插入图片描述
6、在element-ui官网复制“标签”的相关代码,尝试导入“标签”这个组件
在这里插入图片描述
7、按需导入tag组件,并注册为vue组件
在这里插入图片描述
8、保存后重新运行项目
在这里插入图片描述