对likeadmin项目uniapp部分的学习

目录结构

可以看到很清晰 server以外是docker和客户端程序

Vue知识

npm list vue   //查看vue版本号

import { reactive } from 'vue'
意思是从vue中引入reactive方法给本页面使用
reactive是Vue3中提供的响应式数据的方法

	//定义对象 并初始化
       const state = reactive<{
		pages: any[]
		article: any[]
	}>({
		pages: [],
		article: []
	})
	const getData = async () => {
		const data = await getIndex()
		state.pages = JSON.parse(data?.page?.data)
		state.article = data.article
	}
       getData()
async/await特点

1.async/await更加语义化，async 是“异步”的简写，async function 用于申明一个 
2.function 是异步的； await，可以认为是async wait的简写， 用于等待一个异步方法执行完成；
3.async/await是一个用同步思维解决异步问题的方案（等结果出来之后，代码才会继续往下执行）
4.可以通过多层 async function 的同步写法代替传统的callback嵌套

async function语法

自动将常规函数转换成Promise，返回值也是一个Promise对象
只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数
异步函数内部可以使用await

几个组件的定义和使用

<w-search :content="item.content" :styles="item.styles" />
src\components\widgets\search\search.vue

猜测组件格式如<w-xxxx   ######/>
则组件文件位置为
src\components\widgets\xxxx\xxxx.vue
需要注意的是组件改动后需要改动下引用页面然后编译

由于其使用了uview插件ui框架 然后他支持全局样式变量

	.article-title {
		&::before {
			content: '';
			width: 8rpx;
			height: 34rpx;
			display: block;
			margin-right: 10rpx;
			background: $u-type-primary;
		}
	}
uni.scss文件

~~~~~~~~~~~~~~~~~likeadmin的前端框架我主要需要注重学习uview插件

在hbuider里面运行是开发环境 发布是生产环境

vite========================

onLaunch(async () => {
    await appStore.getConfig() //这里使用了类似热更新接口
    // #ifdef H5
    const { status, page_status, page_url } = appStore.getH5Config
    if (status == 0) {
        if (page_status == 1) return (location.href = page_url)
        uni.reLaunch({ url: '/pages/empty/empty' })
    }
    // #endif
    await getUser()
})

getCurrentPages()获取当前页面栈的实例,最后一个为当前页 第一个为首页

const tabbarList = computed(() => {                           //computed的结果是计算属性
    return appStore.getTabbarConfig.map((item: any) => {      //map遍历数组并对其中每一个对象进行处理
        return {
            iconPath: item.unselected,                        
            selectedIconPath: item.selected,
            text: item.name,
            link: item.link,
            pagePath: item.link.path
        }
    })
})