vue3+vite+ts真实项目笔记

真实项目笔记，记录项目中遇到的小问题，持续更新……

1.watch监控route中path变化

   let router = useRouter()
   // 监听当前路由变化
    watch(
      () => router.currentRoute.value,
      () => {
       	console.log("路由变化了")
      }
    );

2.router跳转（router.push)

import { useRoute, useRouter } from 'vue-router'

const router = useRouter()

router.push({ path: '/home' })

3.项目中echarts组件文件模板

<template>
    <div id="myChart" :style="{ width: '100%', height: wh.wh?.value?.height + 'px' }"></div>
</template>
<script setup lang="ts">
import { toRefs, ref, getCurrentInstance, onMounted } from 'vue'
const $echarts = getCurrentInstance()?.appContext.config.globalProperties.$echarts
const props = defineProps({
    //子组件接收父组件传递过来的值
    wh: Object,
})
const wh = toRefs(props)
console.log('wh', wh.wh?.value?.height)
onMounted(() => {
    let myChart = $echarts.init(document.getElementById("myChart"));
    let echarts = $echarts;
    let colorList = ['#343E48', '#D8E6EF', '#D9D9D7', '#3bafff', '#f1bb4c', "rgba(250,250,250,0.5)"];
    // 绘制图表
    myChart.setOption({
        // 这里填写option内容
    });
})
</script>
<style scoped lang="less">

</style>

4.公共样式文件

// 公共样式书
* {
    -webkit-touch-callout: none;
    /* 系统默认菜单被禁用 */
    -webkit-user-select: none;
    /* webkit浏览器 */
    -khtml-user-select: none;
    /* 早期浏览器 */
    -moz-user-select: none;
    /* 火狐 */
    -ms-user-select: none;
    /* IE10 */
    user-select: none;
}

input {
    -webkit-user-select: auto;
    /* webkit浏览器 */
}

textarea {
    -webkit-user-select: auto;
    /* webkit浏览器 */
}

// 重置样式
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
input,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
textarea,
article,
aside,
audio,
canvas,
figure,
footer,
header,
mark,
menu,
nav,
section,
time,
video {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}

article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
blockquote {
    display: block;
}

ul,
ol {
    list-style: none;
}

img {
    border: 0 none;
    vertical-align: top;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

strong,
em,
i {
    font-style: normal;
    font-weight: normal;
}

ins {
    text-decoration: underline;
}

del {
    text-decoration: line-through;
}

mark {
    background: none;
}

input::-ms-clear {
    display: none !important;
}

body {
    font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif;
    background: #fff;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    text-decoration: underline;
}

* {
    font-family: Source Han Sans CN;
    box-sizing: border-box;
}
input,select,option,textarea  {
    outline:none;
}
// ==重置样式


/*float*/
.f_l {
    float: left;
}

.f_r {
    float: right;
}

/* ==float */

/* 鼠标变手型 */
.pointer {
    cursor: pointer;
}

// 禁止使用
.notPointer {
    cursor: not-allowed;
}

/* 固定定位 */
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}


/* 定义滚动条样式 */
::-webkit-scrollbar {
    width: 10px;
    height: 6px;
    margin-right: 2px;
}

/* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
    border-radius: 10px;
    background-color: rgba(240, 240, 240, 0);
}

/* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
    background-color: #C4E2FF;
}

// 加粗字体
.bold{
    font-weight: bold;
}

5.项目vite跨域配置

文档链接