SvelteFire 项目教程
sveltefireCybernetically enhanced Firebase apps项目地址:https://gitcode.com/gh_mirrors/sv/sveltefire
1. 项目的目录结构及介绍
SvelteFire 项目的目录结构如下:
sveltefire/
├── public/
├── src/
│ ├── lib/
│ │ └── firebase.js
│ ├── routes/
│ │ └── index.svelte
│ └── app.svelte
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── rollup.config.js
目录结构介绍
public/
: 存放静态资源文件,如图片、字体等。src/
: 项目的源代码目录。lib/
: 存放库文件,如firebase.js
用于初始化 Firebase。routes/
: 存放路由组件,如index.svelte
是首页组件。app.svelte
: 项目的根组件。
.gitignore
: Git 忽略文件配置。README.md
: 项目说明文档。package-lock.json
: 锁定依赖包版本。package.json
: 项目依赖和脚本配置。rollup.config.js
: Rollup 打包配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是 src/app.svelte
,它是整个应用的入口点。
src/app.svelte
<script>
import { onMount } from 'svelte';
import { firestore } from './lib/firebase';
import { docStore } from 'sveltefire';
const post = docStore(firestore, 'posts/id');
onMount(() => {
console.log('App mounted!');
});
</script>
<main>
<h1>Welcome to SvelteFire</h1>
<p>{$post.title}</p>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
font-size: 2em;
margin: 0;
}
</style>
启动文件介绍
<script>
标签内引入了onMount
生命周期函数和sveltefire
库。docStore
用于从 Firestore 中获取数据并存储在 Svelte 的 store 中。onMount
生命周期函数在组件挂载时执行,这里简单输出了一条日志。<main>
标签内是应用的主要内容,显示欢迎信息和从 Firestore 获取的帖子标题。
3. 项目的配置文件介绍
项目的配置文件主要包括 package.json
和 rollup.config.js
。
package.json
{
"name": "sveltefire",
"version": "1.0.0",
"scripts": {
"dev": "rollup -c -w",
"build": "rollup -c",
"start": "sirv public"
},
"dependencies": {
"svelte": "^3.0.0",
"sveltefire": "^2.0.0",
"firebase": "^9.0.0"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^13.0.0",
"rollup": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"sirv-cli": "^2.0.0"
}
}
配置文件介绍
scripts
: 定义了项目的脚本命令,如dev
用于开发模式,build
用于构建项目,start
用于启动服务。dependencies
: 项目的运行时依赖,包括svelte
、sveltefire
和firebase
。devDependencies
: 开发环境依赖,包括 Rollup 打包工具和相关插件。
`rollup.config
sveltefireCybernetically enhanced Firebase apps项目地址:https://gitcode.com/gh_mirrors/sv/sveltefire