前端代码基本逻辑-vue3

前端vue建立过程

安装nodejs

官网下载安装，并且记住安装路径，记得配置系统变量Path

安装VUE/CLI

npm install -g @vue/cli --全局安装vue

使用VUE/CLI生成代码框架

vue create your-project-name --我的your-project-name为web

运行项目

cd your-project-name --我的your-project-name为web ​ npm run serve

前端布局过程

访问 Ant Design Vue 查询想要的布局效果

生成代码框架结构介绍--观察VUE前端代码结构

web			使用命令行生成的前端文件夹名称
	public		共有的文件夹，通常存放公共（静态）资源（图片/声音）
		picture	自建，存放图片，src="/picture/xxx.png"
		favicon.ico	在...引用，浏览器标签使用的图片
		index.html	项目的入口，用于加载vue
	src		存放代码
		assets	资源目录，存放静态资源
		logo.png	示例图片
	components		组件，存放一些不需要改变的页面效果
		TheHeader.vue	自建，渲染页面的头部效果
		TheFooter.vue	自建，渲染页面的底部效果
	router		路由工具
		index.ts	用来将view里面的页面和路径映射
	store		状态管理目录，使用 Vuex 进行状态管理
		index.ts	状态管理配置文件
	units		工具类
		tool.ts	自建，主要功能（某元素判空，某元素判非空，复制元素）
	view		存放页面
		HomeView.vue	生成的，可根据需要改动
		AboutView.vue	生成的，可根据需要改动
	App.vue		根组件，作为 Vue 应用的入口点
package.json			定义各个引入组件/依赖/脚本
package-load.json			用来锁定组件/依赖/脚本版本号
.eslintrc.js			可以用来忽略某些语法检查警告
.env.dev			可以用来定义后端（开发）服务的地址前缀，如：VUE_APP_SERVER = http://127.0.0.1:10086
.env.prod			可以用来定义后端（生产）服务的地址前缀，如：VUE_APP_SERVER = http://xxxxxxxxxxxx

路由部分

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
​
const routes: Array<RouteRecordRaw> = [
//   {
//    path: '路径',
//    name: '名称',
//    component: 页面名称
//  },{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: AboutView}
]
​
const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})
​
export default router

以生成的HomeView为例分析具体标签作用

<template><!-- Vue 模板定义了组件的 HTML 结构 --><div><!-- 使用插值表达式显示响应式变量 demo 的 message 属性 --><h1>{{ demo.message }}</h1><!-- 其他页面元素可以继续添加，比如列表、按钮等 --></div>
</template>
​
<style scoped>
/* 这里的 CSS 只应用于当前组件，因为使用了 scoped 属性 */
/* .img-style 可以被模板中的元素通过 class 引用 */
.img-style {width: 50px; /* 设置图片样式的宽度为 50px */
}
</style>
​
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import axios from 'axios'; // 导入 axios 用于发起 HTTP 请求
​
export default defineComponent({name: 'MyComponent', // 组件的名称，用于标识组件，方便在路由中使用setup() {// 定义一个响应式的 demo 对象，初始 message 为空字符串，这里的也可以不写如  const demo = ref();const demo = ref({ message: '' });
​// 定义一个方法，用于获取数据const way = () => {axios.get("/ebook/listAllDate").then((response) => {// 将获取的数据赋值给 demo 的 message 属性demo.value.message = response.data;});};
​// 定义响应式的变量 allBooks 用于存储书籍列表const allBooks = ref([]);// 定义响应式的变量 isWelcome 用于控制欢迎信息的显示const isWelcome = ref(false);
​// 使用 ref 创建响应式的 categoryId2 变量const categoryId2 = ref(null);
​// 定义一个带参数的方法，用于处理点击事件const handleClick = (value: any) => {axios.get("/ebook/listByCategoryId", { params: { categoryId: value.key } }).then((response) => {// 打印分类 IDconsole.log(value.key);// 将获取的数据赋值给 allBooksallBooks.value = response.data;});if (value.key === "welcome") {// 如果 key 是 "welcome"，则显示欢迎信息isWelcome.value = true;} else {// 否则，更新 categoryId2 并隐藏欢迎信息categoryId2.value = value.key;isWelcome.value = false;way(); // 重新调用 way 方法以更新数据}};
​// 使用 onMounted 钩子在组件挂载后执行 way 方法onMounted(() => {way();});
​// 返回响应式状态和方法，使它们在模板中可用return {demo,way, // 定义组件的方法，可以被模板调用handleClick // 定义组件的事件处理函数};}
});
</script>