范天缘的博客

前言:有些树形控件是需要默认勾线的 但是请求后渲染不显示 刷新外部的key值也没有用。看了一下文档 我们使用自带的方法来解决。

1.我这边使用的是cdn引入形式 比较简单的方式 不需要下载依赖在项目文件的index.html引入 这样cesium就会挂载到window对象上面去了然后我们打印下看window上面有没有cesium引入成功了 接下来我们在vue3项目里面初始化cesium并且定位到某个点。

2.新建一个监控复用组件,只需要通过props传入监控编号 就能使用了。在vue3项目里的index.html引入。1.首先我们在海康威视官网上面下载这个。把这三个文件放进你的public里面去。下载以后打开demo。

跳转到新的页面 只有海康的监控没有消失 使用控制台审查元素也审查不到。解决方法：在vue3的销毁周期把海康的监控销毁掉。

业务中有时候会碰见多个表单一起提交的场景,每个表单都有校验，官方文档中没有看到这种解决方法。

业务中经常会碰见同一方法需要多次调用,这时候如果每次都写一遍就显得代码不够优雅了,所以封装公共方法是非常有必要的。1.在vue项目中src/untils/ 创建ts文件 例：common.ts。2.在main.ts 引用 然后设置成vue的全局变量。这里我们就封装好了示例公共方法,接着我们如何显示调用。3.common.ts写一个实例。

注明：如果是vite.config.ts的话 pluginOptions需要定义类型。

把tsconfig.json配置项moduleResolution："bundler"改为 moduleResolution："node"就可以了。vue3+vite项目引入vue报错。

vue3引入scss

vue3高德地图绘制3d图形

patterns must be an array

vue3去掉console

vue3引入three

点击标记时要有交互行为,比如说弹出一个框,显示详细信息var clickHandler = function(e) { console.log(e) // alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');}; // 绑定事件 map.on('click', clickHandler);...

1.第一步 登录高德开发平台 找到你的控制台 ->应用->安全密匙 (没有就自己创建一个)2.访问这个高德自定义地图地址 创建一个你自己想要的模板高德自定义地图地址3.点击进入到你的模板,看到url了吗? styleid后面的一串字符就是你自定义地图模板的样式id4.在你的vue3工程文件夹 ->public/index.html加入你的密匙注明：这一步很重要<script> window._AMapSecurityConfig = {

业务中有时候需要定时器来轮询接口,关闭页面时需要销毁定时器,要不然会导致内存泄漏export default { setup () { const state = reactive({ timeInter:null,//定义定时器 }) onMounted(()=>{ state.timeInter = setInterval(()=>{ //业务代码 },3000) }) onUnmounted

1.先在高德开发平台申请key，记得选择web服务2.然后直接在代码里面get请求示例//请求高德天气 const gaodeWeather = async () =>{ const res = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=234e06465507fad793f681f3d494df70&city=420100&extensions

1.在平台申请你的key2.在public/index.html引入cdn<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key,在高德控制台可以看到"></script> 在这里插入代码片3.在vue.config.js全局配置引入的高德地图cdnmodule.exports = { configureWebpack:

背景:引入cdn直接调用提示undefined原因:因为你没有在vue.confing注册，然后重新运行项目正确做法：1.public/index.html 里面的body里面引入cdn2.在vue.config.js里面配置cdnmodule.exports = { configureWebpack: { externals: { AMap: 'AMap' } }}3.在需要的vue文件里面调用import AMap from 'AMap'4

使用vue3+vite搭建了一个新项目,这里需要配置一下@import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path' //这个要引入// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], //新增加的 resolve:{ alias:{ '@

vue3项目中控制台报了这个错误原因:在router文件里面没有定义historyimport { createRouter } from 'vue-router';const router = createRouter({ routes,});改为import { createRouter , createWebHashHistory } from 'vue-router';const router = createRouter({ history:createWebHas

第一步：添加依赖npm install vue-jsonp --save第二步：在vue cli项目main.js中添加import { VueJsonp } from 'vue-jsonp'Vue.use(VueJsonp）第三步：直接使用async getJsonp(){ const response = await this.$jsonp('xxx你的请求地址',{ callbackQuery:'callbackParam', //一定要加这两个参数

访问嵌套路由报错 No match found for location with path解决方法:子路由的path 不要斜杠/path:’/keyBusinessIndex’ 改成 path:‘keyBusinessIndex’ { path: '/keyBusiness', //关键业务 component: keyBusiness, children: [ { path:'/keyBus

有时候需求进入页面调用用户权限接口 这时候在main.js请求是最好的main.js请求写法const getUpdateTime = (async()=>{ let params = {} const res = await $http(params,'getUpdateTime');})getUpdateTime()

import {useRouter} from 'vue-router'setup(){ const $router = useRouter()}//query传参console.log($router.currentRoute.value.query)//params传参console.log($router.currentRoute.value.params)

//错误引入import { useStore } from 'vuex'const $store = useStore();console.log($store) //undefined//正确引入import myStore from '@/store/index.js'const $store = myStore;console.log($store)

定义router的js文件找到注册router的下方加上beforeEach//创建路由const router = createRouter({ history: createWebHashHistory(process.env.BASE_URL), routes,});//看这里router.beforeEach((to,from)=>{ console.log(to,'to') console.log(from,'from') //这里写具体操

备注:我这里用的vue3//请求一const one = async() => { let params = {} const res = await $http(params) return res}//请求二const two = async() => { let params = {} const res = await $http(params) return res}//promise.all()来使他们并行请求const total

deep:true 开启深度监听immediate:true 开启直接监听watch(() => state.topDate,(newVal,oldVal)=>{ console.log(newVal,'新') console.log(oldVal,'旧') },{ deep: true,immediate:true } )

1.father.vue<template> <div> <Son :data=name></Son> </div></template><script>import Son from './son'export default { components:{ Son }, setup() { const name = '小范' retu

1.father.vue<template> <div> <Son :data=name @clickFu="clickFu"></Son> </div></template><script>import Son from './son'export default { components:{ Son }, setup() { const nam

vue3 可以写多个watchimport { reactive,toRefs,computed,watch } from 'vue';import { useStore } from 'vuex';export default { setup(){ //定义vuex方法 const store = useStore(); //初始化 相当于vue2的data const state = reactive({ //使用计算属性动态拿到vu

import { reactive,toRefs,computed,watch } from 'vue';import { useStore } from 'vuex';export default { setup(){ //定义vuex方法 const store = useStore(); //初始化 相当于vue2的data const state = reactive({ //使用计算属性动态拿到vuex的值 ra

这里我只用到了state和mutations1.vuex文件 store.jsstate: { passwordState:false,//登录状态},mutations:{// 设置修改登录状态的方法setPasswordState(state,value){ state.passwordState = value; },}2.具体操作页面import { onMounted } from 'vue'import { useStore } from 'vuex'

import { onMounted } from 'vue'import { useRouter } from 'vue-router'export default { setup() { const $router = useRouter() onMounted(()=>{ //当前路由路径名称 console.log($router.currentRoute._rawValue.path) }) retur

import { useRouter } from 'vue-router';export default { setup() { const $router = useRouter(); //点击方法 const urlClick= () => { $router.push({ path:'你的路径'}) } return{ //方法需要return出去 urlClick