526互联

【10.0】Vue之插件

发布时间 2023-08-07 08:28:18作者: Chimengmeng

【一】插件

  • 插件功能：用于增强Vue，有很多第三方插件

    • (vuex，router，elemetui)

  • 定义自己的插件

    • 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

  • 使用步骤：

    • 定义插件

      • plugins---》index.js---》
      export default {
    install() {
        # 1 在vue实例中放属性
        # 2 定义混入，全局都可以使用混入
        # 3 自定义指令(不讲了)---》以后我们可能使用了一个第三方插件，它提供了一些指令  v-lq
         # 4 定义全局组件---》全局
        }
    }

    • 在main.js中 使用插件

      import child from '@/plugins'
        Vue.use(child)  # 这句话，就会执行child中得install，并且把vue传入

import axios from "axios";
import Vue from 'vue';

export default {
    install(vue) {
        // console.log(vue) // vue 实例
        //  1 在vue实例中放属性
        // 向Vue的原型中方axios对象,在组件中 this.$ajax ----> 拿到的就是 axios 对象 ，直接使用即可
        // Vue.prototype.$ajax = axios;
        // 2 定义混入，全局都可以使用混入
        // Vue.mixin({
        //     data() {
        //         return {
        //             name: 'child',
        //         }
        //     },
        //     methods: {
        //         clickFunc() {
        //             alert(this.name)
        //         }
        //     }
        // })
        // 3 自定义指令(不讲了)---》以后我们可能使用了一个第三方插件，它提供了一些指令  v-lq
        
        // 4 定义全局组件---》全局
    }
};

【二】Elementui

  • ElementUI是一个基于Vue.js的UI库，用于控制样式和提供丰富的组件、指令和工具。

    • 通过引入ElementUI，可以快速构建美观、响应式的用户界面。

  • 在Vue项目中使用ElementUI，需要进行以下配置步骤：

    • 在项目中安装

      cnpm install element-ui -S

    • main.js配置

      • 导入ElementUI对象：
        • 在main.js文件中
        • 使用import ElementUI from 'element-ui'将ElementUI对象引入。
      • 引入ElementUI样式：
        • 继续在main.js文件中
        • 使用import 'element-ui/lib/theme-chalk/index.css'引入ElementUI的样式。
      // 导入ElementUI对象
import ElementUI from 'element-ui';       
// 引入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css';

    • 注册ElementUI组件：

      • 在main.js文件中，通过Vue.use(ElementUI)全局注册ElementUI组件，并使其可在所有的Vue组件中使用。
      Vue.use(ElementUI)

    • 这样配置完成后，就可以在项目中直接使用ElementUI提供的组件和样式了。

      • 如果在其他组件中看到了喜欢的ElementUI的样式效果，可以直接复制相关的HTML、CSS和JavaScript代码来使用。
      • 通过引入ElementUI，可以简化UI设计和开发工作，提供了许多常用的交互组件和布局，如按钮、弹窗、表格等。
      • 此外，ElementUI还提供了一些附加的功能，如表单验证、日期选择器、图标库等，可根据具体需求灵活使用。

【三】Elementui的使用

<template>
  <div>
    <h1>按钮的使用</h1>
    <el-button-group>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="primary" icon="el-icon-share" @click="handleClick"></el-button>
      <el-button type="primary" icon="el-icon-delete"></el-button>
    </el-button-group>
    <hr>

    <h1>带链接的文字</h1>
    <div>
      <el-link href="https://element.eleme.io" target="_blank" type="danger">点我看美女</el-link>
    </div>

    <h1>Radio单选</h1>
    <el-radio v-model="radio" label="1">男</el-radio>
    <el-radio v-model="radio" label="2">女</el-radio>

    <h1>input</h1>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 130px">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="handleClick2"></el-button>
      </el-input>
    </div>


    <h1>表格</h1>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>

    <h1>message消息提示</h1>
    <el-button :plain="true" @click="open4">错误</el-button>
  </div>
</template>

<script>
export default {
  name: "ElementUIView",
  data() {
    return {
      radio: '1',
      input3: '',
      select: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleClick() {
      location.href = 'http://www.baidu.com'
    },
    handleClick2() {
      console.log(this.select)
      console.log(this.input3)
    },
    open4() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    }
  }
}
</script>

<style scoped>

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>