当前位置：首页 > news >正文

Vue3项目基本知识点

news 来源：原创 2024/11/13 15:23:29

vue 文件基本结构

<template></template>
<script setup></script>
<style lang="less">

vue 常用插件

vuex 全局状态管理
vue-router 路由管理
vite 框架搭建
tailwind css 框架
axios 接口封装
element-pluse ui组件
leaflet 地图框架
qiankun 微前端
create-form 表单生成
mockm 前端接口自定义

Vue3 自定义指令

定义文件

export default{
  mounted(el,binding,vnode){
    const {value} = binding
    if(value){
      return true
    }
    return false
  }
}

使用在mian.js 中引入定义好的文件

import XXX from "./XXX.js"
import {createApp} from "vue"
import App from './App'

const app = createApp(App)

app.directive('XXX',XXX)
app.mount("#app")

Vue3定义、获取全局函数

定义

import XXX from "./XXX.js"
import {createApp} from "vue"
import App from './App'
//创建
const app = createApp(App)

app.config.globalProperties.XXX = XXX

//挂载
app.mount("#app")

使用

//获取全局proxy

const {proxy} = getCurrentInstance()

proxy.XXX()

在Vue3 中使用element-pluse icon组件

//安装
yarn add @element-plus/icons-vue
//引入
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon'
import elementIcons from '@/components/SvgIcon/svgicon'

app.use(elementIcons)
app.component('svg-icon', SvgIcon)

SvgIcon 封装

import * as components from '@element-plus/icons-vue'

export default {
    install: (app) => {
        for (const key in components) {
            const componentConfig = components[key];
            app.component(componentConfig.name, componentConfig);
        }
    },
};

在Vue3中封装Axios

errorCode.js

export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}

request.js

import axios from 'axios'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'


axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 10000
})


service.interceptors.request.use() //请求拦截
service.interceptors.response.use()//响应拦截

文件下载

file-saver

//安装file-saver  
npm instal file-saver
yarn add file-saver


//引入
import {saveAs} from "file-saver"

saveAs(blob,fileName)

Vue Hooks使用方法

Hooks 是做什么的
通俗讲就是钩子

一.在父组件生命周期中使用

在组件内部使用

import {ref,onMounted} from "vue"
export const useName=()={
  const name:string = ref("name")
  
  const getName=():string=>{
    return name.value
  }
  
  const setName = (value:string):void=>{
    name.value = value
  }
onMounted(()=>{
  console.log(name.value)
})
  return {name,getName,setName}
}

在组件外部使用

<template>
  <child @hook:></child>
 </template>
<script>
export default{
  setup(props){
  
    
  }
}  
</script>

二.在组件中使用

新建hooks文件

import {ref,onMounted} from "vue"
export const useName=()={
  const name:string = ref("name")
  
  const getName=():string=>{
    return name.value
  }
  
  const setName = (value:string):void=>{
    name.value = value
  }
  return {name,getName,setName}
}

在文件中使用

import {useName} from "@/hooks/useName"
export default{
  setup(props){
    const {name,getName,setName} = useName()
    return {name,getName,setName}
  }
}

Vue 父组件向子组件传值

props

import {defineProps} from "vue"
const time = defineProps({
  time:Object
})

<children :time="time"></children>


import children form './children'
import {ref} from 'vue'
const time = ref(new Date())

provide

import {inject} from 'vue'
const sub = inject("upperComp")//获取
sub.changeParams("你好")

import {provide,reactive} from "vue"
const params = reactive({
  title:"你好"
})
provide("upperComp",{
  params,
  changeParams:(value)=>{
    params.title = value
  }
})

Vue 子组件向父组件传

defineEmits

const emit = defineEmits(["changeTime"])

const changeTime=()=>{
  emit('changeTime',value)
}

<children @changeTime></children>

const changeTime=(value)=>{
  console.log(value)
}

Vue 中RouterView使用方法

<router-view v-slot="{Component}">
  <keep-alive>
    <component :is="Component">
  </keep-alive>
</router-view>

vite 中定义文件别名设置跨域代理

import {resolve} from "path"
import {defineConfig} from 'vite'
import WindiCSS from 'vite-plugin-windicss'
import vue from '@vitejs/plugin-vue'
export dafault defineConfig({
  plugins:[vue(),WindiCSS()],
  //设置文件别名
  resolve:{
    alias:{
      "@":reslove(__dirname,'src')
    }
  },
  server:{
    //设置跨域代理
    proxy:{
      '/api':{
        target:"",
        changeOrigin:true,
        rewrite:(path)=>path.replace(/^\/api/,"")
      }
    }
  }
})

Vite使用外部变量

VITE_TITLE="我是vite"

VITE_APP_ENV=dev
VITE_BASE_URL="http://localhost:9000/"

VITE_APP_ENV=production

import.meta.env.VITE_BASE_URL

Vite 中动态引入组件

const modules = import.meta.glob("/src/views/**/**.vue") //引入全部组件
modules[`/src/views${item.url}/index.vue`] //使用组件

Vue3 使用ts 解决未定义interface 报错

在根目录定义env.d.ts

declare module 'js-cookie'
declare module 'nprogress'
declare module '*.vue' {
    import { DefineComponent } from 'vue'
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
}

ref、reactive、toRef与toRefs 的区别

ref

用于为数据添加响应状态，因为reactive只能传入对象类型的参数，对于基本类型只能用ref,同样返回一个具有响应式状态的副本

获取数值时需要加.value
参数可以传递任意数据类型，传递对象类型时也能保持深度响应式
Vue3.0 setup里面定义数据时优先使用ref，方便逻辑拆分和业务解耦

import {ref} from "vue"

const name = ref("Tom")

const state = ref({
  count:0
})

reactive

reactive 用于为对象添加响应式状态
接受一个js对象作为参数，返回一个具有响应式状态的副本

获取数值时直接获取，不需要添加.value
参数只能传递对象类型

import {reactive} from "vue"

const state = reactive({
  count:0
})

console.log(state.count)

toRef

toRef用于为原响应式对象上的书香新建一个ref,从而保持对其源对象属性的响应式链接，
接受两个参数：源响应式对象和属性名称，返回一个ref数据
列如：使用父组件传递的props数据时，需要引入props的某一个属性且需要保持响应式连接时就很有用

获取数据时需要添加.value
toRef后的ref数据如果是复杂类型数据时，不是原始数据的拷贝而是引用，改变结果也会导致原始数据的改变

import {toRef,defineProps} from 'vue'
const title = defineProps({
  title:{
    type:string,
    default:"Tom"
  }
})

const myTitle = toRef(title,"title")