在Vue中使用Avue、配置过程及实际应用小结

目录
  • 1、使用Avue的原因
  • 2、Avue的官网
  • 3、安装使用
    • 3.1 安装
    • 3.2 在main.js中引入
  • 4 使用Avue组件库
    • 4.1 基本样式
    • 4.2 实际应用
    • 4.3 效果

在新项目中用到一个新的小玩意、还挺不错的、立马安装使用到自己的项目中。哈哈哈

1、使用Avue的原因

在项目中遇到通过点击加号实现输入框的增加、以及对该输入框的输入内容进行验证。有感而发

2、Avue的官网

官网地址：https://avuejs.com/

3、安装使用

可以直接根据官网的教程来

以下介绍我成功安装的案例

3.1 安装

npm i @smallwei/avue -S

我安装的是这个版本的avue。默认会安装最新的版本、安装最新的可能会遇到版本不兼容问题（我就是遇到了这个鬼问题、程序都启动不成功了。可以选择安装指定的版本npm i @smallwei/avue@2.8.27 -S）

3.2 在main.js中引入

// 引入
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue)

4 使用Avue组件库

样式是多的很、感觉可不赖。爱了爱了

4.1 基本样式

4.2 实际应用

就是将组件的代码复制粘贴到你想要放置的代码位置

<template>
  <div>
    <p>这里是管理员信息界面</p>
    <hr />
    <avue-crud :data="data" :option="option"></avue-crud>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          name: "张三",
          sex: "男",
        },
        {
          name: "李四",
          sex: "女",
        },
      ],
      option: {
        border: true,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "性别",
            prop: "sex",
          },
        ],
      },
    };
  },
};
</script>

4.3 效果

到此这篇关于在Vue中使用Avue、配置过程以及实际应用的文章就介绍到这了,更多相关Vue使用Avue内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • avue实现自定义搜索栏及清空搜索事件的实践

    avue实现自定义搜索栏及清空搜索事件的实践

    目录 1.自定义搜索栏内容 2.自定义搜索按钮 对搜索栏进行自定义,并通过按钮实现折叠搜索栏效果.自定义效果如下: 折叠前: 折叠后: 1.自定义搜索栏内容 其实也简单,只要在对应的vue文件中\src\views\admin\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="search"属性即可自定义搜索栏内容: <template slot-scope="scope" slot=&q

  • vue项目中使用AvueJs的详细教程

    目录 一.背景 二.项目中的运用 1.引入 2.table(avue-crud)的使用 三.使用想法 Avue是基于Vue.js和element的快速开发框架 它的核心是数据驱动UI的思想,让我们从繁琐的crud开发中解脱出来,它的写法类似easyUI,但是写起来比easyui更容易,因为它是基础数据双向绑定以及其他vue的特性.同时不知局限于crud,它还有我们经常用的一些组件例如,表单,数据展示卡,人物展示卡等,更多的组件还在开发. Avue.js是基于现有的element-ui库进行的二次

  • Avue和Element-UI动态三级表头的实现

    Avue和Element-UI动态三级表头的实现

    目录 Avue配置方式 Element-UI三级表头动态写法 需求场景: 业务方希望有表格可以体现员工的考勤信息,要具体到上午下午,统计司机上下班打卡所产生的数据.产品提出想做成三级表头根据页面查询条件的年月去动态生成表格的表头.三级分别是月份日期,对应的星期,以及每天的上午以及下午. 效果如下: Avue配置方式 通过对avue-crud组件的option的配置如下: { label: `${$this.month}月${$this.dateList[0].ri}日`, // 月份 heade

  • avue-crud多级复杂的动态表头的实现示例

    avue-crud多级复杂的动态表头的实现示例

    目录 前言 后台数据拼接 前台数据展示 页面效果展示 Avue.js 是基于现有的element-ui库进行的二次封装,从而简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易. 前言 在实际开发过程,需要多级复杂的动态表头,表头中的内容是动态填充的.以下是avuejs官网提供的负责表头样式,因此我后台返回的数据,需要拼接avue-crud中的

  • Avue 组件库的使用初体验

    Avue 组件库的使用初体验

    目录 1. 使用的初体验 2. 不好的地方 1. 使用的初体验 今天给大家讲一下我最近发现的比较冷门的一个组件库,但是功能还是蛮多,这里就给大家介绍一下 , 网址也给大家放在这里 Avue 这里我大概介绍一下,因为我这里也就是做了几个dome,并没有拿到实际的项目中,但是,却发现的一些好的地方,跟需要闭坑的地方 这里的组件超级多,而且很丰富 ,下面就是签名啊 还可以调用我的摄像头 图片的裁剪 2. 不好的地方 发现这边的文档写的相当的不全面,例如我上面的那个签名的介绍 <avue-sign re

  • 在Vue中使用Avue、配置过程及实际应用小结

    目录 1.使用Avue的原因 2.Avue的官网 3.安装使用 3.1 安装 3.2 在main.js中引入 4 使用Avue组件库 4.1 基本样式 4.2 实际应用 4.3 效果 在新项目中用到一个新的小玩意.还挺不错的.立马安装使用到自己的项目中.哈哈哈 1.使用Avue的原因 在项目中遇到通过点击加号实现输入框的增加.以及对该输入框的输入内容进行验证.有感而发 2.Avue的官网 官网地址:https://avuejs.com/ 3.安装使用 可以直接根据官网的教程来 以下介绍我成功安装

  • 详解axios在vue中的简单配置与使用

    一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 二.引入方式: npm: $ npm install axios //淘宝源 $ cnpm install axios bower: $ bowe

  • Vue中的Vux配置指南

    简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码. vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范.最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状

  • 简述vue中的config配置

    在webpack.base.conf文件中配置别名以及扩展名 resolve: { extensions: ['.js', '.vue', '.json', '.styl'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'src': path.resolve(__dirname, '../src'), 'common': path.resolve(__dirname, '../src/common'), 'compo

  • vue中接口域名配置为全局变量的实现方法

    src中新建 一个 domain.js文件 // 配置全局接口域名 const domain = 'http://bowensi.xiaoniren.cn/'; export default { testUrl:domain } main.js中 import domain from './domain.js'; global.domain = domain; 组件中: data () { return { imgsrc:domain.testUrl}} 以上这篇vue中接口域名配置为全局变量的

  • 解决vue中使用proxy配置不同端口和ip接口问题

    问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081  或者 http://192.168.10.30:9999等 解决问题: 在vue.config.js中配置不同的端口号 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devSe

  • vue中使用protobuf的过程记录

    由于目前公司采用了ProtoBuf做前后端数据交互,进公司以来一直用的是公司大神写好的基础库,完全不了解底层是如何解析的,一旦报错只能求人,作为一只还算有钻研精神的猿,应该去了解一下底层的实现,在这里记录一下学习过程. Protobuf简单介绍 Google Protocol Buffer(简称 Protobuf)是一种轻便高效的结构化数据存储格式,平台无关.语言无关.可扩展,可用于通讯协议和数据存储等领域. 有几个优点: 1.平台无关,语言无关,可扩展: 2.提供了友好的动态库,使用简单; 3

  • Vue中使用vux配置代码详解

    一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目 二.想在已创建的Vue工程里引入vux组件 <1>. 在项目里安装

  • vue中使用typescript配置步骤

    vue中使用typescript配置步骤

    目录 1.vue老项目引入TypeScripe 从零开始创建vue+typescript项目 通过前端各个框架的发展,例如vue3.0,react和angular等框架的源码都是用ts(typescript)进行编写的,因此我感觉未来的中大型项目的发展趋势也离不开ts.因此我根据一些入门教程利用vue结合ts编写了文档,适合入门配置vue+ts项目. 1.vue老项目引入TypeScripe npm install vue-class-component vue-property-decorat

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

随机推荐