首页 > 其他分享 >如何在Vue项目中引入avue进行开发?

如何在Vue项目中引入avue进行开发?

时间:2023-09-13 20:34:14浏览次数:48  
标签:Vue name smallwei sex 引入 avue Avue

Avue的官网

官网地址:​ ​https://avuejs.com/
image

安装

3.1 安装

npm i @smallwei/avue -S

$3.2 在main.js中引入

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

4使用

4.1 官方文档

image
image

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 效果

image

标签:Vue,name,smallwei,sex,引入,avue,Avue
From: https://www.cnblogs.com/guozhiqiang/p/17700650.html

相关文章

  • Vue H5 Swiper 动画
    简介及使用教程VueH5Swiper是一个H5移动滑块组件,适用于H5应用程序,轻量。安装Npmnpmivue-h5-swiperYarnyarnaddvue-h5-swiper使用引入import{Swiper,SwiperItem}from'vue-h5-swiper';注册exportdefault{components:{Swiper,Swiper......
  • Vue 文本字幕组件(Marquee Text Component)
    简介及使用教程Vue文本字幕组件(MarqueeTextComponent)是一个Vue.js的字幕文本组件,具有CSSGPU动画、快速、功能强大等特点。安装Npmnpmivue-marquee-text-componentYarnyarnaddvue-marquee-text-component 使用全局注册importVuefrom'vue'importMa......
  • vue 大转盘旋转效果
    场景如下:用户点击抽奖,转盘立刻线性提速转动,同时请求抽奖接口,旋转过程中等待接口返回抽奖信息接口返回信息后,转盘减速至停转网上找到animejs动画框架,想钻研的同学可以看一下,我没有用此框架实现,是手写的这个demo没有实现停在指定奖品上也没有实现完全停止后,正好停在0°<temp......
  • 记录--用 Vue 实现原神官网的角色切换效果
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言为了更好的了解原神角色,我模仿官网做了一个角色切换效果,在做的过程当中也总结了一些技术点。为了让大家更好的体验,我兼容了PC端和移动端,建议在PC端查看效果更佳。接下来就为大家简单的分享一下!话不多说,......
  • 《VUE》走马灯组件
    <template><!--走马灯--><divclass="box"><divclass="carousel"><divclass="item"v-for="(v,i)inlist":key="i"@click="open(v)"><img:sr......
  • 创建mixin.js文件,引入表格分页
    //前端分页consttableFrontEndPaging={data(){return{currpage:1,page_size:10,page_list:[10,20,50],currentPage:null,header_cell_style:{background:'#C0C4CC',color:'#303133',borderColor:&#......
  • application 'vueApp' died in status NOT_MOUNTED: [qiankun]: Target container wit
    这是第一次微前端很常见的提示,尤其是第一次写前端的时候碰到的解决1:主应用的 App.vue标签上的id="app"去掉,这是报错的根本解决2://在子应用挂在的时候处理functionrender(props={}){const{container}=props;instance=newVue({render:h=>h......
  • 【Vue】带你进入七彩缤纷的世界
    hello,我是小索奇,Vue.js精心准备撰写了文章,其中进行多次修改给读者更好的学习进程,涵盖Vue2和Vue3,让大家用最通俗的方式来学会Vue,本系列会考虑到新手,将由浅入深进行讲解,即使你是老玩家,也可以收藏备用,其中有很多已经踩过的坑为大家铺垫平滑的道路~若您有任何问题,欢迎沟通,共同进......
  • nvm、node、vue安装、vue项目创建打包
    nvm、node、vue安装、创建vue项目nvm作用:可以管理多个版本的node,切换node版本,下载node。前情提要参考:https://zhuanlan.zhihu.com/p/519270555下载地址:https://github.com/coreybutler/nvm-windows/releases一、常用命令1、nvm查看安装了的nodenvmlsnvml......
  • vue导出带样式的excel
    示例说明实现导出excel不同块的颜色templatea标签仅做文件名称调整,默认为隐藏状态;<template><div><button@click="exportExcel">导出</button><aref="export_a"/></div></template>scriptexportdefault{name......