Element UI 基本使用

推荐使用 npm 的方式安装，它能更好地和  webpack  打包工具配合使用。

npm i element-ui -S，

2：引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

2.1完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'

import App from './App.vue'

import ElementUI from 'element-ui'//全局引入

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

Vue.config.productionTip = false

//Vue.use(ElementUI)

Vue.use(Button)

Vue.use(Aside)

Vue.use(Main)

Vue.use(Container)

new Vue({

  render: h =>h(App),

}).$mount('#app')

2.2按需引入

借助  babel-plugin-component ，我们可以只引入需要的组件，以达到减小项目体茄厅积的目的。

首先，安装 babel-plugin-component：

在命令行输入

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：//等同于 babel.config.js文件

module.exports = {

  presets: [

 镇简   '@vue/cli-plugin-babel/preset',

    ["@babel/preset-env", { "modules": false }]

  ],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

2.2.1在main.js配置

import Vue from 'vue'

import App from './App.vue'

 import {Button,Aside,Main,Container} from 'element-ui'//按需引入 注：Container首字母大写

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

Vue.config.productionTip = false

//Vue.use(ElementUI)

Vue.use(Button)

Vue.use(Aside)

Vue.use(Main)

Vue.use(Container)

new Vue({

  render: h =>h(App),

}).$mount('#app')

小菜刚学会element_ui组件使用，如何全局引入库文件太大，开发时浪费资源，御纳裤希望大神们多指教

✍ 目录总览：

① 安装依赖包 npm i element-ui –S

② 导入 Element-UI 相关资源

① 运行 vue ui 命令，打开图形化界面

② 通过 Vue 项目管理器 ，进入具体的项目配置面板

③ 点击 插件 ->添禅冲返加判正插件 ，进入插件查询面板

④ 搜索 vue-cli-plugin-element 并安装

⑤ 配置插件，实现按需导入，从而减少打包后项目的体贺饥积

最终效果：

这里是直接使用 UI 里的表格组件，F12 查看

可以明显看出：

我们想要的效果是向下滚动，即向键毕衫下移动 48px

感谢支持。若不足之处，欢迎大家指出，共勉。

如果觉稿腔得不错，记得 点数世赞，谢谢大家