Vue使用ElementUI搭建页面

跟着青戈学毕设-B站程序员青戈

一、Vue安装ElementUI

ElementUI官网 https://element.eleme.***/#/zh-***

1. 在idea项目终端
   npm安装

cd vue    //切换到vue文件下 
npm i element-ui -S

2. 安装成功
   vue -> node_modules -> element-ui说明安装成功
   
   

二、 Element组件学习

1. 引入element
   main.js文件代码
   vue -> src -> main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import '@/assets/css/global.css'//@表示src
Vue.config.productionTip = false

Vue.use(ElementUI, {
   
    size: 'small' }); //官方提供了3种尺寸默认，small，mini，通常用small小尺寸

new Vue({
   
   
  router,
  render: h => h(App)
}).$mount('#app')

2. 在router文件index.js中添加代码
   使新增路由指向新增页面element.vue

 {
   
   
    path: '/element',
    name: 'Element',
    ***ponent: () => import('../views/Element.vue')
  }

3. el-row行、el-col列
   el-row行组件，提供gutter属性来指定每一栏之间的间隔，默认间隔为0。
   el-col列组件，通过span属性来指定列占多少栏
   element提供一个布局，将一个网页分为24等份

<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #*********; text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" alt="">
          <div style="text-align: center">这是啦啦啦啦啦啦...</div>
          <div style="text-align: center; color: red">价格 $99.99</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #*********; text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" alt="">
          <div style="text-align: center">这是啦啦啦啦啦啦...</div>
          <div style="text-align: center; color: red">价格 $99.99</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #*********; text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" alt="">
          <div style="text-align: center">这是啦啦啦啦啦啦...</div>
          <div style="text-align: center; color: red">价格 $99.99</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #*********; text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" alt="">
          <div style="text-align: center">这是啦啦啦啦啦啦...</div>
          <div style="text-align: center; color: red">价格 $99.99</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
</script>

4. el-button按钮
   属性：type、plain朴素、round圆角和circle、icon图标定义按钮的样式。
   type：primary主要按钮、su***ess成功按钮、info信息按钮、warning警告按钮、danger危险按钮
   icon：el-icon-edit铅笔图标、el-icon-check小垃圾桶、el-icon-message、el-icon-star-off、el-icon-delete
   element常规的button按钮操作

	<el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary"