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

路由部分

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>