Day06--使用ElementUi和按需引入

ElementUi和按需引入

ElementUi官网

• 安装 Elementui

  npm install element-ui --S
  

• 安装 babel-plugin-component 依赖完成按需引入

  npm install babel-plugin-component --D
  

• 修改 babelrc文件，引入component

  "plugins": [
      "transform-vue-jsx",
      "transform-runtime",
      [
          "component",
          {
              "libraryName": "element-ui",
              "styleLibraryName": "theme-chalk"
          }
      ]
  ]
  

• 在 main.js 中按需引入组件,并注册

  import { Button } from "element-ui"  // 引入 element-ui 的 Button 组件
  

  Vue.component(Button.name, Button)  // 将 Button 挂载到 Vue 实例上
  

• 在 PageContainer.vue 组件中直接使用 button

  <!-- 页面内容 -->
  <template>
  <div class="page-container">
  <div class="page-wrapper">
      <div class="page-content">
      <p>page content</p>
      <p>page content</p>
      <p>page content</p>
      <!-- 使用button -->
      <el-button type="primary">test</el-button>
      </div>
  </div>
  </div>
  </template>
  

• 运行项目，可以看到项目按钮显示成功

项目仓库

Gitee