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} = bindingif(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")

使用

//获取全局proxyconst {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-typesconst 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")

Vue3项目基本知识点相关推荐

【Vue】新建一个Vue3项目
目录 1.新建vue项目 2.路径更改至新建的vue项目处 3.安装cnpm 4.cnpm安装vant3 5.安装babel-plugin 6.安装vue路由 7.安装axios 其他注意事项仅用于 ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1500人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...
Vite --- 创建Vue3项目
Vite 需要 Node.js 版本 >= 12.0.0. 1. node -v 查看node当前版本号 2. npm方式创建Vue3项目 npm init @vitejs/app 输入项目名 ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
【信息系统项目管理师】第11章-项目风险管理知识点详细整理
个人资料,仅供学习使用教程:信息系统项目管理师(第3版) 修改时间--2021年10月4日 15:12:26 参考资料: 信息系统项目管理师(第3版) 题目书(2021下半年)--马军本文包括: ...
【信息系统项目管理师】第8章-项目质量管理知识点详细整理
个人资料,仅供学习使用教程:信息系统项目管理师(第3版) 修改时间--2021年10月2日 16:24:45 参考资料: 信息系统项目管理师(第3版) 题目书(2021下半年)--马军本文包括: ...
【信息系统项目管理师】第7章-项目成本管理知识点详细整理
个人资料,仅供学习使用教程:信息系统项目管理师(第3版) 修改时间--2021年10月2日 10:54:17 参考资料: 信息系统项目管理师(第3版) 题目书(2021下半年)--马军本文包括: ...
vue3 项目搭建以及使用
一.创建一个普通的vue3项目创建一个普通的vue3项目 //注意如果之前安装过的话建议先卸载再重新安装 npm uninstall vue-cli -g //yarn global remove ...

Vue3项目基本知识点