前端代码基本逻辑-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) => {
// 打印分类 ID
console.log(value.key);
// 将获取的数据赋值给 allBooks
allBooks.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>原文地址：https://blog.csdn.net/m0_66691386/article/details/140408287
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！