SvelteFire 项目教程

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