前端代码基本逻辑-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>