18-Vue之Element UI安装

Posted 2021-11-04 爱学习de测试小白

目录

安装Element UI

使用Element UI

第一个demo

---

安装Element UI

1. 创建vue项目，参考：17-Vue项目搭建_小白的博客-CSDN博客
2. 项目目录下使用命令：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