18-Vue之Element UI安装

最新推荐文章于 2025-03-05 19:16:47 发布

爱学习de测试小白

最新推荐文章于 2025-03-05 19:16:47 发布

阅读量418

点赞数 1

分类专栏： # Vue 文章标签： vue elementui

-- 来着爱学习de测试小白

本文链接：https://blog.youkuaiyun.com/IT_heima/article/details/120808767

版权

Vue 专栏收录该内容

41 篇文章

订阅专栏

本文档介绍了如何在Vue项目中安装和使用ElementUI库，通过创建第一个组件Demo展示按钮的不同类型，详细步骤包括安装命令、配置main.js、创建Demo.vue组件、设置路由及在App.vue中添加导航链接。最后，成功运行项目并在浏览器中预览了Demo页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装Element UI

使用Element UI

第一个demo

安装Element UI

创建vue项目，参考：17-Vue项目搭建_小白的博客-优快云博客
项目目录下使用命令：npm i element-ui -S

使用Element UI

在main.js里面添加如下三行内容

// 引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; //避免后期打包样式不同，要放在import App from './App';之前

// 在Vue项目中使用element ui
Vue.use(ElementUI);

第一个demo

在components下创建Deme.vue文件

// components新建的Demo.vue
<template>
    <div>
        <el-row>
            <h1>{{mes}}</h1>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      mes: "这是第一个demo!!!"
    };
  }
};
</script>

<style>
</style>

在router下index.js导入Demo并添加路由

// router下的inde.js文件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Demo from '@/components/Demo' // 导入Demo

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 添加demo路由
    {
      path: '/demo',
      name: 'Demo',
      component: Demo
    },
  ]
})

在App.vue中添加a标签并删除css样式

// App.vue
<template>
  <div id="app">
    <a href="#/demo">第一个demo</a>
    <br />
    <br />
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>

运行项目，访问新添加的路由地址


运行项目npm run dev

打开demo地址：http://localhost:8081/#/demo

看到如下页面，恭喜你成功完成第一个demo