前端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>