vue3+antd+g2plot快速入门

创建项目

bash 复制代码
pnpm create vite

选择vue和JavaScript

安装依赖

bash 复制代码
pnpm i ant-design-vue
pnpm i @antv/g2plot
pnpm i vue-router

完整代码

package.json

json 复制代码
{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@antv/g2plot": "^2.4.31",
    "ant-design-vue": "^4.2.3",
    "vue": "^3.4.29",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}

src/main.js

js 复制代码
import {createApp} from 'vue'

import Antd from 'ant-design-vue';
import router from './router';

import 'ant-design-vue/dist/reset.css';

import App from './App.vue'

const app = createApp(App)

app.use(Antd)
app.use(router)

app.mount('#app')

src/App.vue

html 复制代码
<template>
  <RouterView/>
</template>

src/router/index.js

js 复制代码
import {createWebHashHistory, createRouter} from 'vue-router'

import Layout from '../page/layout/index.vue'
import Home from '../page/home/index.vue'
import LineQuickStart from '../page/line/quick_start.vue'

const routes = [
    {
        path: '/',
        component: Layout,
        redirect: '/home',
        children: [
            {path: "/home", component: Home},
            {path: "/line/quickstart", component: LineQuickStart},
        ]
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

src/page/layout/index.vue

html 复制代码
<script setup>
import {ref} from 'vue';
import {useRouter} from "vue-router";

const router = useRouter()
const collapsed = ref(false);
const selectedKeys = ref(['1']);


const handleLeftMenuClick = ({item, key, keyPath}) => {
  console.log(item, key, keyPath)
  router.push(key)
}

</script>

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="inline"
          @click="handleLeftMenuClick"
      >
        <a-menu-item key="home">
          <span>首页</span>
        </a-menu-item>
        <a-sub-menu key="line">
          <template #title>
            <span>
              <span>折线图</span>
            </span>
          </template>
          <a-menu-item key="/line/quickstart">快速入门</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content style="margin: 10px 16px">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '460px' }">
          <RouterView/>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        版权所有 © 2024 Python私教 张大鹏
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>

src/home/index.vue

html 复制代码
<script setup>

</script>

<template>
home
</template>

<style scoped>

</style>

src/line/quick_start.vue

html 复制代码
<script setup>
import {onMounted} from "vue";
import {Line} from "@antv/g2plot";

onMounted(() => {
  const data = [
    {year: '1991', value: 3},
    {year: '1992', value: 4},
    {year: '1993', value: 3.5},
    {year: '1994', value: 5},
    {year: '1995', value: 4.9},
    {year: '1996', value: 6},
    {year: '1997', value: 7},
    {year: '1998', value: 9},
    {year: '1999', value: 13},
  ];
  const line = new Line('container', {
    data,
    xField: 'year',
    yField: 'value',
  });
  line.render();
})
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>

</style>
相关推荐
dy17171 天前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918411 天前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 天前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 天前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 天前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go1 天前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x1 天前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java1 天前
CSS3核心技术
前端·css·css3
空山新雨(大队长)1 天前
HTML第八课:HTML4和HTML5的区别
前端·html·html5