vue3学习

1、路由 路由的基本设置

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  { path: '/', component: () => import('@/views/home/index.vue') },
  { path: '/video/:id', component: () => import('@/views/video/index.vue')}
]

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

export default router

2、组件

<template>
    <AppHeader/>
    </template>
<script setup lang="ts">
    // setup 无需再次注册组件
    import AppHeader from '@/components/app-header.vue'
    </script>

3、eslintrc语法关闭

//vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false    //eslintrc语法关闭
})

4、安装依赖出bug

--legacy-peer-deps
npm i **** --legacy-peer-deps

5、组件库配置
vant组件库：

// npm i unplugin-vue-components -D --legacy-peer-deps
//vue.config.js
const { defineConfig } = require('@vue/cli-service')
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  lintOnSave: false,
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

6、组件简单使用

//main.js   引入
import { Tab, Tabs } from 'vant';
const app = createApp(App);
app.use(Tab);
app.use(Tabs);

<template>
   <van-tabs v-model:active="active">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
</template>

<script setup lang="ts">
import{ref} from 'vue'
const  active=ref(0)
</script>

7、axios+mock

import Mock from 'mockjs'
import navList from './data/navList'
import swiperList from './data/swiperList'
import videosList from './data/videosList'
import recommendList from './data/recommendList'
import commentsList from './data/commentsList'
import videoDetailList from './data/videoDetailList'

// mock/index的配置
Mock.setup({
  // 随机延时50-1000毫秒
  timeout: '50-1000'
})

// 轮播图
Mock.mock(/\/swiperList/, 'get', () => {
  return {
    code: 0,
    result: swiperList
  }
})

// 频道菜单
Mock.mock(/\/navList/, 'get', () => {
  return {
    code: 0,
    result: navList
  }
})

Mock.mock(/\/videosList/, 'get', () => {
  return {
    code: 0,
    result: videosList
  }
})

Mock.mock(/\/recommendList/, 'get', () => {
  return {
    code: 0,
    result: recommendList
  }
})

Mock.mock(/\/commentsList/, 'get', () => {
  return {
    code: 0,
    result: {
      count: 454,
      items: commentsList
    }
  }
})

interface IMockConfig {
  body: string | null;
  type: string
  url: string
}
Mock.mock(/\/videoDetail/, 'get', ({ url }: IMockConfig) => {
  const querystr = url.split('?')[1]
  const queryObj = new URLSearchParams(querystr)
  const id = queryObj.get('id')
  return Mock.mock({
    code: 0,
    result: function () {
      return videoDetailList.find(item => item.id === id)
    }
  })
})

//mock/data/navlist
export default [
  {
    text: '首页',
    id: '0'
  },
  {
    text: '动画',
    id: '1'
  },
  {
    text: '番剧',
    id: '2'
  },
  {
    text: '国创',
    id: '3'
  },
  {
    text: '音乐',
    id: '4'
  },
  {
    text: '舞蹈',
    id: '5'
  },
  {
    text: '科技',
    id: '6'
  },
  {
    text: '游戏',
    id: '7'
  },
  {
    text: '娱乐',
    id: '8'
  },
  {
    text: '鬼畜',
    id: '9'
  },
  {
    text: '电影',
    id: '10'
  },
  {
    text: '电视剧',
    id: '11'
  },
  {
    text: '纪录片',
    id: '12'
  },
  {
    text: '影视',
    id: '13'
  },
  {
    text: '时尚',
    id: '14'
  },
  {
    text: '生活',
    id: '15'
  },
  {
    text: '广告',
    id: '16'
  },
  {
    text: '直播',
    id: '17'
  },
  {
    text: '相簿',
    id: '18'
  }
]
//其他文件类似
`虚拟数据拦截axios请求`

<template>
   <van-tabs v-model:active="active">
  <van-tab title="标签 1">内容 1</van-tab>
</van-tabs>
</template>

<script setup lang="ts">
import{ref} from 'vue';
import axios from 'axios';
const  active=ref(0)
const list=ref([])
axios({
  url:'/navList',
  method:'get'
}).then(res=>{
  console.log(res.data)
  list.value=res.data
})

</script>

npm i axios --legacy-peer-deps    //axios
npm i mockjs --legacy-peer-deps   //mock模拟数据
npm i --save-dev @types/mockjs --legacy-peer-deps   //语法

8、数据格式ts

const list=ref<invaitem[]>([])
//interface   ts的接口用于标记数据格式
interface invaitem{
  id:string,
  text:string
}