Vue项目 elementUI 按需导入

徐同保

已于 2022-08-16 15:59:44 修改

阅读量1.4k

点赞数 1

分类专栏： web前端文章标签： javascript

于 2022-04-15 16:10:57 首次发布

本文链接：https://blog.csdn.net/xutongbao/article/details/124197209

版权

web前端专栏收录该内容

735 篇文章 16 订阅

订阅专栏

本文展示了如何利用Element UI库和Babel配置一个登录页面。代码示例中，详细地引入了组件、样式，并实现了输入验证、登录功能及密码显示切换。在`babel.config.js`文件中配置了Babel插件，而在`Login.vue`组件中，整合了Element UI的按钮和图标组件，以及登录方法和密码可见性切换。

摘要由CSDN通过智能技术生成

https://element.eleme.cn/#/zh-CN/component/quickstart

yarn add babel-plugin-component

babel.config.js:

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset', ['@babel/preset-env', { modules: false }]],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
  ],
}

<template>
  <div>
    <div>
      <input v-model="username" placeholder="请输入用户名" autofocus />
    </div>
    <div>
      <input
        v-model="password"
        placeholder="请输入密码"
        :type="visible ? 'text' : 'password'"
        @keyup.enter="handleLogin"
      />
      <Icon
        :name="visible ? 'show' : 'close'"
        class="m-login-icon"
        @onClick="handleVisible"
      ></Icon>
    </div>
    <el-button type="primary" @click="handleLogin">登录</el-button>
  </div>
</template>

<script>
import { Icon } from '../../../components/light'
import Api from '../../../api'
import { Button } from 'element-ui'

export default {
  data() {
    return {
      username: 'admin',
      password: '123456',
      visible: false,
    }
  },
  components: {
    Icon,
    [Button.name]: Button
  },
  methods: {
    handleLogin() {
      Api.light
        .login({ username: this.username, password: this.password })
        .then((res) => {
          if (res.state === 1) {
            localStorage.setItem('token', res.data.username)
            this.$router.push('/light/index/home')
          }
        })
    },
    handleVisible() {
      this.visible = !this.visible
    },
  },
}
</script>

<style></style>