Stencil App Starter 项目教程

最新推荐文章于 2024-09-11 07:31:14 发布

窦欢露Paxton

最新推荐文章于 2024-09-11 07:31:14 发布

阅读量434

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00641/article/details/142114623

版权

Stencil App Starter 项目教程

stencil-app-starter Minimal starter project for building web components with Stencil 项目地址: https://gitcode.com/gh_mirrors/st/stencil-app-starter

1. 项目的目录结构及介绍

stencil-app-starter/
├── src/
│   ├── assets/
│   ├── components/
│   ├── global/
│   ├── index.html
│   ├── index.ts
│   ├── service-worker.ts
│   └── utils/
├── .editorconfig
├── .gitignore
├── .prettierrc.json
├── LICENSE
├── package.json
├── README.md
├── stencil.config.ts
└── tsconfig.json

目录结构介绍

src/: 项目的源代码目录，包含所有组件、样式、脚本等。
- assets/: 存放静态资源文件，如图片、字体等。
- components/: 存放项目的Web组件。
- global/: 存放全局样式和脚本。
- index.html: 项目的入口HTML文件。
- index.ts: 项目的入口TypeScript文件。
- service-worker.ts: 用于PWA的Service Worker文件。
- utils/: 存放工具函数和辅助代码。
.editorconfig: 编辑器配置文件，用于统一代码风格。
.gitignore: Git忽略文件配置。
.prettierrc.json: Prettier代码格式化配置文件。
LICENSE: 项目许可证文件。
package.json: 项目的依赖管理文件。
README.md: 项目的说明文档。
stencil.config.ts: Stencil项目的配置文件。
tsconfig.json: TypeScript配置文件。

2. 项目的启动文件介绍

`index.html`

index.html 是项目的入口HTML文件，包含了基本的HTML结构和一些必要的元数据。通常情况下，这个文件不需要进行太多的修改，除非你需要添加一些全局资源或配置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stencil App Starter</title>
</head>
<body>
  <my-app></my-app>
</body>
</html>

`index.ts`

index.ts 是项目的入口TypeScript文件，负责初始化应用并加载所有必要的组件。通常情况下，这个文件也不需要进行太多的修改。

import { defineCustomElements } from '@stencil/core/loader';

defineCustomElements();

3. 项目的配置文件介绍

`stencil.config.ts`

stencil.config.ts 是Stencil项目的核心配置文件，用于配置项目的构建、打包、测试等行为。

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'my-app',
  outputTargets: [
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
};

`tsconfig.json`

tsconfig.json 是TypeScript的配置文件，用于配置TypeScript编译器的行为。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "lib": ["dom", "es2017"],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": ["src"]
}

`package.json`

package.json 是项目的依赖管理文件，包含了项目的依赖、脚本命令等信息。

{
  "name": "stencil-app-starter",
  "version": "0.0.1",
  "description": "Stencil App Starter",
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll"
  },
  "dependencies": {
    "@stencil/core": "^2.0.0"
  },
  "license": "MIT"
}

通过以上配置，你可以轻松地启动和构建Stencil项目，并根据需要进行自定义配置。

stencil-app-starter Minimal starter project for building web components with Stencil 项目地址: https://gitcode.com/gh_mirrors/st/stencil-app-starter

窦欢露Paxton

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Stencil App Starter 项目教程

Stencil App Starter 项目教程 stencil-app-starter Minimal starter project for building web components with Stencil 项目地址:...
复制链接

扫一扫