Vue基础篇之第三方插件的使用与安装

---

安装elelment

• 1）在终端中启动Vue ui
• 2）如何新建项目 vue-ui
• 3）选择 Vue2 默认安装
• 4）安装完成后选择插件点击左上角安装插件
• 5）任何搜索 elelment 安装第一个 会问引入方式，选择第二项
• 6）安装完成后点击运行 启动 打开项目既可
  

elelment介绍

• element 可以按需加载
• element 是 ui 库，那么它就拥有许多的组件样式，那么全体引入的话，会将所有组件以及所有组件的样式全部引入
• 所有需要按照需求去 引入，需要什么就引入什么

elelment.js
---------------
import Vue from 'vue'
import {
    Button } from 'element-ui'

// element 可以按需加载
// element 是 ui 库，那么它就拥有许多的组件样式，那么全体引入的话，会将所有组件以及所有组件的样式全部引入
// 所有需要按照需求去 引入，需要生命就引入什么
// 制作成全局的
Vue.use(Button)

---

elelment实现功能

1、使用Form登录弹窗

1.1、基础结构

• 代码解释：
  • 这里我们使用了:Dialog 需要在element.js 中引入
  • slot="footer" = v-slot:footer, 但 v-slot:footer 只能写在 templat 上

<template>
  <div>
    <el-button type="primary">登录</el-button>
    <!-- 这里我们使用了：Dialog 需要在element.js 中引入 -->
    <el-dialog title="提示" :visible="true" width="30%">
      <span>这是一段信息</span>
      <!--  slot="footer" = v-slot:footer, -->
      <!-- 但 v-slot:footer 只能写在 templat 上 -->
      <template v-slot:footer>
        <span class="dialog-footer">
        <el-button >取 消</el-button>
        <el-button type="primary" >确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
     };
</script>

<style>
</style>

element.js

import Vue from 'vue'
import {
    Button,Dialog} from 'element-ui'

// element 可以按需加载
// element 是 ui 库，那么它就拥有许多的组件样式，那么全体引入的话，会将所有组件以及所有组件的样式全部引入
// 所有需要按照需求去 引入，需要生命就引入什么
// 制作成全局的

Vue.use(Button)
Vue.use(Dialog)
在这里插入代码片

1.2、出现弹窗

<template>
  <div>
    <el-button ... @click="visible = true">登录</el-button>
    <!-- 这里我们使用了：Dialog 需要在element.js 中引入 -->
    <el-dialog ... :visible.sync="visible" >
      <template v-slot:footer>
        <span class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary"  size="small">确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return{
     
      visible:false
    }
  }
};
</script>

<style>
</style>

1.3、弹窗内容

<template>
  <div>
  ....
      <el-form
        label-width="60px"
        :model="info"
      >
        <el-form-item label="用户名">
          <el-input v-model="info.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="info.password"></el-input>
        </el-form-item>
      </el-form>
...
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
   ......