• 分类:【前端
  • 浏览【103】
  • 评论【0】
  • 更新【2021-4-07 14:29:00】

上篇简单介绍了sapper和sveltekit的发展,目前sveltekit还只是Beta版本,有很多不确定因素存在,有可能会有大的变更,所以还不推荐在生产环境中使用,不过在个人项目和小项目中可以大胆尝试。 今天我们就正式使用sveltekit开发一个web项目。 第一步:创建项目 mkdir my-app cd my-app npm init svelte@next npm install npm run dev 这样就可以创建一个简陋的项目了,不过和我们真实需求还有些差距,既然是使用sveltekit,那么最重要的原因是其支持服务端渲染了。这就需要从服务端获取数据,接下来就实现这

阅读全文
  • 分类:【前端
  • 浏览【118】
  • 评论【0】
  • 更新【2021-3-30 10:33:30】

虽然您可能现在还没有听说过svelte,但是其实svelte的发展速度超过了你的想象。 本文主要讲的是关于sapper和sveltekit这两款框架的发展。 svelte作者里奇·哈里斯(Rich Harris)在2020年10月的svelte峰会上表示:sapper永远不会发布1.0版本。 也就是说sapper不会发布正式版,一直处于非稳定版本。也可能放弃更新。 主要原因是sapper多年来代码库变得凌乱,但更主要的原因是最近网络发生了很大变化。 而作者放弃sapper后的另一种选择是开发SvelteKit。 Sapper和SvelteKit都是svelte的开发框架,类似于vue的nuxt

阅读全文
  • 分类:【前端
  • 浏览【274】
  • 评论【0】
  • 更新【2021-1-08 11:55:56】

npms.io上搜索到svelte的route包其实也不算少,使用比较广泛的svelte-spa-router路由包却不支持history模式。有些支持history模式的使用上也不是很方便,试用过五六个支持history的路由后最终@spaceavocado/svelte-router算是满足了要求。 使用简单 功能丰富 支持history和hash 我也是够难伺候的。 在试用了多个支持history的路由过程中,都遇到了一个问题:切换路由后刷新404。这也算是单页应用的通病了。不过像vue这种是在部署到服务器上刷新404,而svelte却在开发过程中也出现了,又想放弃了... 好在我也

阅读全文
  • 分类:【前端
  • 浏览【216】
  • 评论【0】
  • 更新【2021-1-05 19:09:55】

sapper可能被放弃更新,如果您要继续使用svelte,可以考虑使用sveltekit 最近使用svelte开发一个项目,说实在的,开发过程中遇到不少问题。 每次遇到问题的时候都有种想放弃的冲动,这生态也太差了,查个啥啥问题都查不到,找个啥啥插件也没有。 不过,到最后,遇到的问题又都解决了。 这不,今天又遇到了本地代理的设置问题。 在说遇到的问题之前先介绍一些项目架构。该项目是基于sapper框架开发,这是一个使用svelte开发的框架,具备以下特点: 服务端渲染 路由 代码分割 默认支持渐进式web应用(PWA) 预取路由 单独的头标签(meta,link等) 作为静态站点弹出 C

阅读全文
  • 分类:【前端
  • 浏览【300】
  • 评论【0】
  • 更新【2021-1-05 11:20:41】

使用svelte开发项目时遇到需要将px转换成rem的需求,有试过postcss-px2rem,postcss-pxtorem,等postcss插件,都没成成功,最后找到了postcss-units插件成功实现。 完整rollup配置文件如下: converts px to rem 该配置是sapper项目配置 import path from 'path'; import resolve from '@rollup/plugin-node-resolve'; import replace from '@rollup/plugin-replace'; import commonjs from

阅读全文
  • 分类:【前端
  • 浏览【214】
  • 评论【0】
  • 更新【2020-12-29 10:20:33】

svelte给dom对象绑定事件和vue框架类似。 定义函数: function handler(index){ alert("hello", index); } 绑定事件: <button on:click={handler}>点击</button> 但是带参函数的使用就略有不同了,函数handler的参数index需要传入的时候,不能直接这样使用<button on:click={handler(123)}>点击</button>,这样的写法会在页面打开时直接执行,而不是在点击按钮的时候执行。 这是初学svelte的时

阅读全文
  • 分类:【前端
  • 浏览【454】
  • 评论【0】
  • 更新【2020-11-28 15:16:53】

svelte目前没有提供官网路由组件,不过可以在社区中找到。本文介绍的是svelte-spa-router的使用方法。 npm i svelte-spa-router 参考以下目录结构创建文件(不是必须) router.js: import index from './index/index.svelte'; import a from './a/a.svelte'; import b from './b/b.svelte'; export const routes = { '/': index, '/a': a, '/b': b } 动态导入组件和代码分割: i

阅读全文