【腾讯云 Cloud Studio 实战训练营】深度体验 | 使用腾讯云 Cloud Studio 快速构建 Vue 实现走马灯展示图与数据展示表格

 yarn add vue-router@4

import { createRouter, createWebHistory } from 'vue-router';

export const routes = [
  {
    path: '/login',
    name: 'Login',
    meta: {
      title: '登录',
      requireAuth: false,
    },
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/',
    name: 'Home',
    meta: {
      title: '首页',
      requireAuth: true,
    },
    component: () => import('@/layout/baseLayout.vue'),
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dash',
        meta: {
          title: '首页',
          requireAuth: true,
          icon: 'Stopwatch',
        },
        component: () => import('@/views/dashboard.vue'),
      },
      {
        path: 'mytable',
        name: 'mytable',
        meta: {
          title: '表格',
          requireAuth: true,
          icon: 'Stopwatch',
        },
        component: () => import('@/views/mytable.vue'),
      },
    ],
  },
];

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

export default router;

yarn add element-plus @element-plus/icons-vue

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index';
import './style.css';
// CSS 重置的现代替代方案
import 'normalize.css/normalize.css'

// 实例化 Vue 实例
const app = createApp(App)

app.use(router);
// 挂载到 #app 节点
app.mount('#app')

yarn add -D less@^3.12.2
yarn add -D less-loader@^7.0.1

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
    devServer: {
        disableHostCheck: true
    },
    configureWebpack: {
      plugins: [
        ComponentsPlugin({
          resolvers: [VantResolver()],
        }),
      ],
    },
    // 增加less配置
    css: {
      loaderOptions: {
        less: {
          lessOptions: {
            // 在这里添加自定义的Less配置
          },
        },
      },
    },
}

<script setup>
import Header from './Header/header.vue';
import Menu from './Menu/side.vue';
import Footer from './Footer/footer.vue';
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside><Menu></Menu></el-aside>
      <el-container class="containerTwo">
        <el-header><Header></Header></el-header>
        <el-main>
          <section class="main-box">
            <router-view v-slot="{ Component, route }">
              <transition appear name="fade-transform" mode="out-in">
                <component :is="Component" :key="route.path"></component>
              </transition>
            </router-view>
          </section>
        </el-main>
        <el-footer><Footer></Footer></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.el-container {
  height: 100%;
  .el-aside {
    width: auto;
    height: 100%;
    box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);
  }
  .containerTwo {
    background-color: #f0f2f5;
    .el-header {
      background-color: #fff;
    }
    .el-footer {
      height: 50px;
    }
  }
}
</style>

<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

provide(THEME_KEY, 'dark');

const option = ref({
  title: {
    text: 'Traffic Sources',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
  },
  series: [
    {
      name: 'Traffic Sources',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 234, name: 'Ad Networks' },
        { value: 135, name: 'Video Ads' },
        { value: 1548, name: 'Search Engines' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});
</script>

<style scoped>
.chart {
  height: 100vh;
}
</style>

<script setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    school: 'Peking University'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    school: 'Peking University'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    school: 'Peking University'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    school: 'Peking University'
  },
]
</script>

<template>
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 text="2xl" justify="center">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <el-table :data="tableData" style="width: 100%; margin-top: 80px;">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
    <el-table-column prop="school" label="Address" />
  </el-table>
  </template>
  
  <style scoped>
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  </style>
 

// git初始化操作
$ git init
Initialized empty Git repository in /workspace/vuejs-quickstart/webapp/.git/
// 添加文件
$ git add ./
// 提交
$ git commit -m "feat: 初始化项目"
[master (root-commit) 3805d4c] feat: 初始化项目
 12 files changed, 9700 insertions(+)
 create mode 100644 .gitignore
 ......
 create mode 100644 vue.config.js
 create mode 100644 yarn.lock