随笔分类 - stenciljs

stenciljs 学习十三 @stencil/router 组件使用说明

摘要：@stencil/router 组件包含的子组件 stencil-router stencil-route-switch stencil-route stencil-route-link stencil-route-redirect stencil-route-title stencil-route 阅读全文

posted @ 2018-09-27 15:23 荣锋亮阅读(605) 评论(0) 推荐(0) 编辑

stenciljs 学习十二官方doc 路由使用的例子

摘要：路由在单页面应用开发中是一个相对比较重要的位置以下为官方网站的路由配置 <stencil-router scrollTopOffset={0}> <stencil-route-switch> <stencil-route url="/" component="landing-page" exact 阅读全文

posted @ 2018-09-27 10:57 荣锋亮阅读(359) 评论(0) 推荐(0) 编辑

stenciljs 学习十一 pwa 支持

摘要：stenciljs 对于pwa 的支持是自动注入的，我们只需要简单的配置，stenciljs使用workbox 配置默认配置 { skipWaiting: true, clientsClaim: true, globPatterns: [ '**/*.{js,css,json,html,ico,p 阅读全文

posted @ 2018-09-27 09:10 荣锋亮阅读(314) 评论(0) 推荐(0) 编辑

stenciljs 学习十服务器端渲染

摘要：stenciljs提供了 ssr 支持，对于express 最简单的就是使用提供的中间件 express 集成 const express = require('express'); const stencil = require('@stencil/core/server'); // create 阅读全文

posted @ 2018-09-27 08:59 荣锋亮阅读(428) 评论(0) 推荐(0) 编辑

stenciljs 学习九使用jsx

摘要：可以使用jsx 方便组件的开发基本格式主要是render 函数 class MyComponent { render() { return ( <div> <h1>Hello World</h1> <p>This is JSX!</p> </div> ); } } 数据绑定 render() { 阅读全文

posted @ 2018-09-27 08:54 荣锋亮阅读(535) 评论(0) 推荐(0) 编辑

stenciljs 学习八组件测试

摘要：测试对于框架来说比较重要，对于web 组件的测试同样很重要，类似的jest 很方便，stenciljs也是基于jest 开发的包含两个核心api render(), flush() 测试配置 package.json 配置 "devDependencies": { ... "@types/jest 阅读全文

posted @ 2018-09-27 08:53 荣锋亮阅读(359) 评论(0) 推荐(0) 编辑

stenciljs 学习七路由

摘要：stenciljs路由类似react router 安装 npm install @stencil/router --save 使用导入包 import "@stencil/router" 添加路由组件配置包含的组件 stencil-router 项目中应该只有一个模板路由器组件。此组件控制与浏阅读全文

posted @ 2018-09-27 08:52 荣锋亮阅读(413) 评论(0) 推荐(0) 编辑

stenciljs 学习六组件开发样式指南

摘要：组件不是动作，最好使用名词而不是动词，文件结构每个文件一个组件。每个目录一个组件。虽然将类似的组件分组到同一目录中可能是有意义的，但我们发现当每个组件都有自己的目录时，更容易记录组件。实现（.tsx）和组件的样式应该位于同一目录中。参考格式 ├── card │ ├── card.ios. 阅读全文

posted @ 2018-09-26 23:21 荣锋亮阅读(529) 评论(0) 推荐(0) 编辑

stenciljs 学习五事件

摘要：组件可以使用Event Emitter装饰器发送数据和事件。 Event 定义参考： import { Event, EventEmitter } from '@stencil/core'; ... export class TodoList { @Event() todoCompleted: E 阅读全文

posted @ 2018-09-26 23:04 荣锋亮阅读(623) 评论(0) 推荐(0) 编辑

stenciljs 学习四组件装饰器

摘要：stenciljs 可以方便的构建交互式组件支持以下装饰器 component prop watch state method element component 说明 component 包含tag styleUrl 参数 tag 定义组件的名称，注意需要使用-连接， styleUrl 指定组件阅读全文

posted @ 2018-09-26 22:20 荣锋亮阅读(1211) 评论(0) 推荐(0) 编辑

stenciljs 学习三组件生命周期

摘要：stenciljs 组件包含好多生命周期方法， will did load update unload 实现生命周期的方法比价简单类似 componentWillLoad 。。。。，使用typescript 比较方便，实现接口就可以了参考实现 import { Component, Prop,Co 阅读全文

posted @ 2018-09-26 21:32 荣锋亮阅读(609) 评论(0) 推荐(0) 编辑

stenciljs 学习二 pwa 简单应用开发

摘要：stenciljs 介绍参考官方网站，或者 https://www.cnblogs.com/rongfengliang/p/9706542.html demo 项目使用脚手架工具创建项目使用脚手架工具 npm init stencil 更新版本（实际上是bug fix） npm install 阅读全文

posted @ 2018-09-26 14:58 荣锋亮阅读(625) 评论(0) 推荐(0) 编辑

stenciljs 学习一 web 组件开发

摘要：stenciljs 介绍参考官方网站，或者 https://www.cnblogs.com/rongfengliang/p/9706542.html 创建项目使用脚手架工具 npm init stencil 更新版本（实际上是bug fix） npm install @stencil/core@l 阅读全文

posted @ 2018-09-26 14:23 荣锋亮阅读(1041) 评论(0) 推荐(0) 编辑

stenciljs ionic 团队开发的方便web 组件框架

摘要：stenciljs 是ionic 团队开发的方便组件话开发的js 框架，具体以下特点简单，零配置，简单的api，typescript 支持性能，压缩之后6Kb，支持ssr，以及强大的原生web component 支持基于web 标准，同时方便的和ng ，vue ，react ，ember 集阅读全文

posted @ 2018-09-26 14:04 荣锋亮阅读(938) 评论(0) 推荐(0) 编辑