相关配置的提交

src/api/well.js

@@ -0,0 +1,9 @@
+import request from '../utils/request';
+
+export const fetchData = query => {
+    return request({
+        url: '/api/well/queryPaged',
+        method: 'get',
+        params: query
+    });
+};

src/pages/well/WellInfo.vue

@@ -0,0 +1,149 @@
+<template>
+ <div class="qpage">
+ <!-- 这里的@后面的就是传递给子组件的自定义方法名-->
+	<!-- vue3组件不需要注册-->
+	<WellInfoEdit ref="wellEdit" :title="formItem.title" :info="formItem.info" :author="formItem.author" :num="formItem.num" @nums="addnum">
+	 <!-- v-bind ( : ) ，父组件将值绑定到子组件上 -->
+    </WellInfoEdit>
+	<el-form :inline="true" :model="queryForm" class="query-form-inline">
+	   <el-form-item label="姓名">
+	     <el-input v-model="queryForm.user" placeholder="请输入用户名查询" />
+	   </el-form-item>
+	   <el-form-item label="其他">
+	     <el-input v-model="queryForm.other" placeholder="请输入其他查询" />
+	   </el-form-item>
+	   <el-form-item>
+	     <el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
+	   </el-form-item>
+	</el-form>
+	
+	<canvas  ref='canvas' height="420" width="600"></canvas>
+ </div>
+  
+</template>
+
+<script  setup>
+	import {reactive,ref,toRefs,toRef,onMounted} from 'vue'
+	//import { fetchData } from "../../api/well.js"
+	import { fetchData } from "@/api/well.js"
+	import WellInfoEdit from "./WellInfoEdit.vue"
+
+// 	const canvas = ref();
+// 	onMounted(() => {
+// 		const ctx = canvas.value.getContext('2d');
+// 		ctx.moveTo(100, 100);
+// 		ctx.lineTo(100, 400);
+// 		ctx.stroke();
+// })
+const canvas = ref();
+let ctx = ref();
+
+const drawLine = () => {
+	ctx.beginPath();
+  //ctx.moveTo(100, 100);//把路径移动到画布中的指定点，不创建线条
+  ctx.lineTo(100, 200);//添加一个新点，然后在画布中创建从该点到最后指定点的线条 
+  ctx.strokeStyle = 'green';
+  //ctx.strokeRect(10,10,120,80);//在x轴为10，y轴为10的位置画长为120，宽为80的长方形
+  ctx.stroke();//绘制已定义的路径
+}
+const drawCurvedLine = () => {
+  ctx.moveTo(100, 100);
+  ctx.lineTo(400, 100); 
+  ctx.lineTo(100, 400);
+  ctx.lineTo(400, 400);
+  //ctx.lineCap = 'round';//设置或返回线条的结束端点样式
+ // ctx.lineJoin = 'round';//设置或返回两条线相交时，所创建的拐角类型
+  ctx.stroke();
+}
+const drawStrokeRect = () => {
+  ctx.rect(100, 100, 100, 100);//创建矩形
+  ctx.strokeStyle = 'green';//设置或返回用于笔触的颜色、渐变或模式
+  ctx.stroke();
+}
+const drawFillRect = () => {
+  ctx.beginPath();//起始一条路径，或重置当前路径
+  ctx.rect(300, 100, 100, 100);
+  ctx.fillStyle = 'blue';//设置或返回用于填充绘画的颜色、渐变或模式
+  ctx.fill();
+}
+const drawFillYuan = () => {
+	ctx.beginPath();
+	ctx.arc(100,75,50,0,2*Math.PI);//创建弧/曲线（用于创建圆形或部分圆） 
+	ctx.stroke();
+}
+const initContext = () => {
+  ctx = canvas.value.getContext('2d');
+  console.log("canvas.value.width:"+canvas.value.width)
+  console.log("canvas.value.height:"+canvas.value.height)
+}
+onMounted(() => {
+  initContext();
+  //drawLine();
+  //drawCurvedLine();
+  //drawStrokeRect();
+ // drawFillRect();
+  drawFillYuan();
+})
+	console.log('---setup111---');
+	const formItem = reactive({
+		title: '文章标题222',
+	    info: '文章内容',
+	    author: 'hbjzws',
+		num:1
+	  });
+	  const addnum=(val)=>{
+		formItem.num=val
+	  }
+	  
+    const people = reactive({ name: "mika", age: "22" });
+	console.log('--people.name----'+people.name)
+	const {name,age} = toRefs(people) 
+	console.log('----name.value--'+name.value)
+	console.log('----name.value--'+age.value)
+	const name2 = toRef(people, "name")
+	console.log('----name2.value--'+name2.value)
+	let name3="mika3333333333";
+	let name4 =ref(name3);
+	console.log('----name4.value--'+name4.value)
+	let refV= ref(null);
+	console.log('----refV--'+refV.value)
+	const wellEdit=ref(null)
+	
+	const isQuerying=ref(false)
+	const queryForm = reactive({
+	  user: '',
+	  other:''
+	})
+	
+	const queryHandle=()=>{
+		console.log('----queryHandle--')
+		//子组件暴露的方法和属性，只有在父组件的方法中才生效，否则会报错
+		console.log("wellEdit.value.count:"+wellEdit.value.count) // 123456
+	  wellEdit.value.handleNodeClick()
+		isQuerying.value=true
+		//alert("111");queryForm.user="121";queryForm.other="333"
+		isQuerying.value=false
+		fetchData({}).then((res) => {
+			console.log('----111--')
+	        console.log(res)
+			if(res.code==0){
+				console.log('---当前页号--'+res.data.currPage)
+				console.log('---实际数据--'+res.data.data)
+				
+			}
+			//menus.value=res
+			
+			//store.currentMenu=res[0]
+	    });
+		
+	}
+
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	canvas {
+  border: 1px solid;
+}
+	
+</style>

src/pages/well/WellInfoEdit.vue

@@ -0,0 +1,35 @@
+<template>
+    <section>
+  		<p>{{ title }}</p>
+    	<p>{{ info }}</p>
+    	<p>{{ author }}</p>
+	</section>
+    <div>子组件</div>
+    <button @click="btn">改变值{{num}}</button>
+</template>
+<script setup>
+import {reactive,ref,toRefs,toRef} from 'vue'
+	const props = defineProps({
+		title: String,
+		info: String,
+		author: String,   
+        num:Number
+	});// 对象形式声明 props
+	// 等价于以 字符串数组声明 props
+	//const props = defineProps(['title', 'info', 'author']);
+	// 如果在setup中使用则直接 props.title
+    //defineProps(['']);
+    const emit =defineEmits(['nums'])//接收父组件传递的方法
+    const btn =()=>{
+        emit('nums',1000)
+    }
+    const count = ref(123456)
+    const handleNodeClick = () => {
+        console.log('要执行子组件的方法')
+    }
+//将方法暴露出
+defineExpose({ handleNodeClick,count})
+
+
+</script>
+<style></style>

vite.config.js

@@ -1,7 +1,27 @@
 import { defineConfig } from 'vite'
+import { resolve } from "path"
+
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
+   // ↓路径别名，主要是这部分
+   alias: {
+    "@": resolve(__dirname, "./src")
+  },
+  server: {
+    port: 3005, // 设置服务启动端口号
+    open: true, // 设置服务启动时是否自动打开浏览器
+    cors: true, // 允许跨域
+
+    // 设置代理，根据我们项目实际情况配置
+    proxy: {
+      '/api': { //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
+        target: 'http://127.0.0.1:8080/zl/api',
+        changeOrigin: true, //是否跨域
+        rewrite: (path) => path.replace('/api', '') //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
+      }
+    }
+}
 })