• 分类:【前端
  • 浏览【135】
  • 评论【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却在开发过程中也出现了,又想放弃了... 好在我也

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

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

阅读全文
  • 分类:【前端
  • 浏览【134】
  • 评论【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

阅读全文
  • 分类:【前端
  • 浏览【116】
  • 评论【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的时

阅读全文
  • 分类:【前端
  • 浏览【252】
  • 评论【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

阅读全文