Element-UI的安装和引入

Element-UI安装、按需加载和插件引用。
110阅读 · 0评论 · 2020-8-31 23:45发布

Element-UI基本用法

Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0的桌面端组件库。

  1. 项目初始化(需要提前安装cnpm install -g @vue/cli,如果出现错误,需要删除之前安装的npm uninstall -g vue-cli后,再尝试安装vue-cli)
    vue create element-test
     # 都使用默认选项即可
     # 安装成功后,进入创建目录下,执行npm run serve即可启动项目
    
  2. 安装Element-UI依赖
    # 进入项目目录下
     npm i -S element-ui
     # 安装后package.json的dependencies下多出element-ui的属性
    
  3. Vue中引用ElmentUI插件
    # main.js中添加如下内容
     import ElementUI from 'element-ui'
     Vue.use(ElementUI)
    
  4. 引入Element-UI样式文件
    import 'element-ui/lib/theme-chalk/index.css'
    
  5. 修改项目中App.vue,添加element-ui的按钮。

    <template>
       <div id="app">
         <el-button @click="show">提交</el-button>
       </div>
     </template>
    
     <script>
     export default {
       name: 'App',
       methods: {
         show() {
             this.$message.success('ok')
         }
       }
     }
     </script>
    

按需加载

使用全量加载会导致项目过大,可以使用按需加载,只引入需要的内容。

  1. 安装babel-plugin-component(如果不成功则cnpm uninstall babel-plugin-component后,再尝试安装)
    cnpm i -D babel-plugin-component
    
  2. 修改babel.config.js的配置文件。
    module.exports = {
       presets: [
         '@vue/cli-plugin-babel/preset'
       ],
       plugins:[
         [ 
            'component',
             {
                 libraryName: 'element-ui',
                 styleLibraryName: 'theme-chalk'
             }
         ]
       ]
     }
    
  3. 在main.js中按需引入。

    import Vue from 'vue'
     import App from './App.vue'
     import {Button,Message} from 'element-ui'
    
     Vue.component(Button.name,Button)
     Vue.prototype.$message = Message
    
     Vue.config.productionTip = false
    
     new Vue({
       render: h => h(App),
     }).$mount('#app')
    

插件引用

使用插件的形式引入element-ui,无需手动配置app.vue、main.js文件,配置难度降低。

  • 直接使用vue安装element。
    vue add element
    

共有0 条评论

暂无评论