【腾讯云 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