1、vite生成项目
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
2、element-plus
开发项目，首先要挑选一个 UI 组件库。目前市面上支持 Vue 3 的组件库并不多，Element UI 不负众望已经完成支持了。Element Plus 是饿了么 Element UI 团队推出的适配了 Vue 3 的全新版本，新增了很多实用组件，体验非常好。
(1)、安装
npm install element-plus -S
(2)、引入
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
（3）、使用小技巧
修改卡片内边距（elment-card）
<el-card shadow="hover" :body-style="{padding:'20px'}">
<total-sales />
</el-card>
3、配置vue3的路由
（1）、安装
npm install vue-router@next --save
（2）、配置路由
新建页面
//view/welcom.vue
<template>
welcom
</template>
新建index.js
//router/index.js
import {createRouter, createWebHashHistory} from 'vue-router';
// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import welcome from "../view/welcome.vue";
const routes = [
{ path: "/", redirect: '/welcome' },
{ path: "/welcome", component: welcome }
]
// Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
routes // short for `routes: routes`
})
main.js
import { createApp } from 'vue'
import router from './router/index'
import App from './App.vue'
createApp(App).use(router).mount('#app')
App.vue
<template>
<router-view></router-view>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<style>
html,body,#app {
padding:0;
margin:0;
width:100%;
height:100%;
background-color: #eee;
}
</style>
4、vite组件传参
（1）、props(defineProps)
注册属性
<script setup>
import { defineProps } from 'vue'
let props = defineProps({
title:String,
value:String
})
</script>
使用
<div class="title">{{props.title}}</div>
5、插槽
新语法v-slot
<template v-slot>
<div class="compare">6</div>
</template>
<template v-slot:footer>
<span>昨日销售额</span>
<span class="money">￥ 30,000,000</span>
</template>
具名插槽就使用v-slot绑定，默认插槽就空写一个v-slot
6、echarts安装
（1）、安装
npm install --save echarts
（2）、使用
//引入
import * as echarts from 'echarts'
...
//初始化
var myChart = echarts.init(document.getElementById('main'))
//设置参数
myChart.setOption({
xAxis:{},
yAxis:{},
series:[]
})
//...
7、组件封装层级
为了更好的维护与开发，展示一个组件封装层级
组件封装效果图
组件层级
TopView为盛放这四个组件的容器组件：
<template>
<div class="top_view" >
<el-row :gutter="20">
<el-col :span="6">
<el-card shadow="hover" :body-style="{padding:'20px'}">
<total-sales />
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<total-orders />
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<total-users />
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<today-users />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup>
import totalSales from '../TotalSales/index.vue'
import todayUsers from '../TodayUsers/index.vue'
import totalUsers from '../TotalUsers/index.vue'
import totalOrders from '../TotalOrders/index.vue'
</script>
totalSales,todayUsers,totalUsers,totalOrders为图中的四个组件，但这四个组件有想类似的结构，将结构抽离出来封装为commandCard组件：
<template>
<div class="common-card">
<div class="title">{{props.title}}</div>
<div class="value">{{props.value}}</div>
<div class="chart">
<slot></slot>
</div>
<div class="line"></div>
<div class="total">
<slot name="footer">
</slot>
</div>
</div>
</template>
<script setup>
import { defineProps } from 'vue'
let props = defineProps({
title:String,
value:String
})
</script>
<style scope>
.title{
font-size:12px;
color:#999;
}
.value{
font-size:25px;
color:#000;
margin-top:5px;
letter-spacing:1px;
}
.chart {
height:50px;
}
.line{
margin:10px 0;
border-top:1px solid #eee;
}
.totle{
color:#eee;
font-size:12px;
}
</style>
再以totalSales组件为例展示commandCard的用法
<template>
<common-card title="累计销售额" value="￥ 32,039,165">
<template v-slot>
<div class="compare-wrapper">
<div class="compare">
<span>日同比</span><span class="emphasis">7.33%</span><span class="increase"></span>
</div>
<div class="compare">
<span>月同比</span><span class="emphasis">38.79%</span><span class="decrease"></span>
</div>
</div>
</template>
<template v-slot:footer>
<span>昨日销售额</span>
<span class="emphasis">￥ 30,000,000</span>
</template>
</common-card>
</template>
<script setup>
import commonCard from '../CommonCard/index.vue'
</script>
<style scope>
.compare-wrapper{
height:100%;
display:flex;
flex-direction: column;
align-items: center;
}
.compare{
width:100%;
font-size:12px;
margin-top:3px;
display:flex;
}
.increase{
display:inline-block;
width:0;
height:0;
border-width:3px;
border-color:transparent transparent red transparent;
border-style:solid;
margin:3px 0 0 5px;
}
.decrease{
display:inline-block;
width:0;
height:0;
border-width:3px;
border-color: green transparent transparent transparent;
border-style:solid;
margin:7px 0 0 5px;
}
</style>
<style>
.emphasis{
margin-left:5px;
color:#333;
letter-spacing: 1px;
font-weight: 700;
}
.increase{
display:inline-block;
width:0;
height:0;
border-width:3px;
border-color:transparent transparent red transparent;
border-style:solid;
margin:3px 0 0 5px;
}
.decrease{
display:inline-block;
width:0;
height:0;
border-width:3px;
border-color: green transparent transparent transparent;
border-style:solid;
margin:7px 0 0 5px;
}
</style>
8、饼图指示线问题
版本前提
"dependencies": {
"echarts": "^5.1.2",
"element-plus": "^1.0.2-beta.69",
"v-charts": "^1.19.0",
"vue": "^3.0.5",
"vue-echarts": "^6.0.0",
"vue-router": "^4.0.10"
}
问题描述：
饼图设置label后，指示线消失
指示线消失
代码：
series:[{
type:'pie',
data:mockData,
radius: [0, 100],
center: ["50%", "50%"],
itemStyle: {
normal: {
labelLine: {
normal: {
show:true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 50,
length2: 100,
}
},
label:{
show:true,
position:'outter',
formatter:function(params){
return params.data.legendname
}
}
}
}
}]
问题解决
将position字段去掉后，指示线重新显示
指示线复现
代码：
series:[{
type:'pie',
data:mockData,
radius: [0, 100],
center: ["50%", "50%"],
itemStyle: {
normal: {
labelLine: {
normal: {
show:true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 50,
length2: 100,
}
},
label:{
show:true,
formatter:function(params){
return params.data.legendname
}
}
}
}
}]
网友评论