umi4+vue3项目：使用elementUI

HaanLen

已于 2022-07-04 23:23:17 修改

阅读量744

点赞数

分类专栏： Vue3.0 文章标签： elementui vue.js javascript

于 2022-07-04 23:22:57 首次发布

本文链接：https://blog.csdn.net/weixin_40119412/article/details/125610609

版权

Vue3.0 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在项目目录下执行命令

pnpm install element-plus

在这里插入图片描述

<template>
  <div>
    <h2>Yay! Welcome to umi ❤️ vue!</h2>
    <p>
      <img src="../assets/yay.jpg" width="388" />
    </p>
    <p>To get started, edit <code>pages/index.vue</code> and save to reload.</p>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { ElButton } from "element-plus";
export default defineComponent({
  components: {
    ElButton,
  },
  setup() {},
});
</script>

在这里插入图片描述

elementui样式未生效解决

导入样式import 'element-plus/es/components/button/style/css'
在入口文件

<template>
  <div class="navs">
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
      <li>
        <router-link to="/docs">Docs</router-link>
      </li>
      <li>
        <a href="https://github.com/umijs/umi">Github</a>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import 'element-plus/es/components/button/style/css'

export default defineComponent({
  setup() {
    
  },
})
</script>

<style lang="less">
  .navs {
    ul {
      padding: 0;
      list-style: none;
      display: flex;
    }
    li {
      margin-right: 1em;
    }
  }
</style>