Vanilla SPA 项目教程
vanilla-spa项目地址:https://gitcode.com/gh_mirrors/va/vanilla-spa
1. 项目的目录结构及介绍
Vanilla SPA 项目的目录结构如下：
vanilla-spa/
├── index.html
├── css/
│ └── styles.css
├── js/
│ ├── app.js
│ └── router.js
├── images/
└── README.md
目录介绍
index.html: 项目的主页面。css/: 存放样式文件的目录。styles.css: 主要的样式文件。
js/: 存放JavaScript文件的目录。app.js: 主应用程序文件。router.js: 路由管理文件。
images/: 存放图片资源的目录。README.md: 项目的说明文档。
2. 项目的启动文件介绍
项目的启动文件是 index.html。该文件包含了基本的HTML结构，并引入了必要的CSS和JavaScript文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanilla SPA</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app"></div>
<script src="js/router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
关键点
<div id="app"></div>: 这是应用程序的主要容器。<script src="js/router.js"></script>: 引入路由管理文件。<script src="js/app.js"></script>: 引入主应用程序文件。
3. 项目的配置文件介绍
Vanilla SPA 项目没有显式的配置文件，但可以通过修改 js/router.js 和 js/app.js 来调整项目的行为。
js/router.js
该文件负责管理页面路由，定义了不同URL路径对应的页面内容。
const routes = {
'/': 'Home',
'/about': 'About',
'/contact': 'Contact'
};
function navigateTo(path) {
document.getElementById('app').innerHTML = routes[path];
}
window.addEventListener('popstate', () => {
navigateTo(window.location.pathname);
});
document.body.addEventListener('click', (e) => {
if (e.target.matches('a')) {
e.preventDefault();
history.pushState(null, '', e.target.href);
navigateTo(window.location.pathname);
}
});
navigateTo(window.location.pathname);
js/app.js
该文件负责初始化应用程序，并可能包含一些全局配置或逻辑。
document.addEventListener('DOMContentLoaded', () => {
console.log('App initialized');
});
关键点
routes对象定义了不同路径对应的页面内容。navigateTo函数负责根据路径更新页面内容。window.addEventListener('popstate', ...)监听浏览器历史变化。document.body.addEventListener('click', ...)处理链接点击事件。
通过修改这些文件，可以调整项目的路由和行为。
vanilla-spa项目地址:https://gitcode.com/gh_mirrors/va/vanilla-spa
扫一扫
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
