JSvelte

Stackblitz

Edit on StackBlitz ⚡️

Stackblitz + Github 系列功能都还在测试阶段

1. stackblitz Save 记得 Commit，没有 Commit 重进会被 Github 库初始化后覆盖
2. stackblitz Commit 大概率会连接失败，多等等别想着退出去重新进参考第一条
3. 什么是环境，什么是 node_modules
4. Commit 跳过了 gitignore 的忽略
5. 运行得先装依赖 yarn install && yarn run dev
6. Stackblitz 有前端主流框架的初始化模板，不依赖于仓库快速进行研学

要允许所有 StackBlitz 项目使用 Service Workers，请转到浏览器的 Cookie 首选项，并为以下 URL 模式添加例外：

https://[*.]stackblitz.io
https://[*.]webcontainer.io

Github dev

Edit on VScode ⚡️

1. 在线VScode终端在 Web 编辑器中不可用。如需终端可采用上述stackblitz 工具或 codespace
2. 登录GitHub账号的本地VScode 于 Github dev 共享用户配置
3. 在线VScode 操作GitHub仓库项目
4. codespace 里的 Web 编辑器分配了运行空间可以使用终端

Svelte

路由

• Svelte 目前没有提供官方路由组件，这是社区中找到的以及它的风格模式

1. svelte-routing -> react-router-dom
2. svelte-spa-router -> vue-router 路由规则的配置
3. Routify : 是约定式路由解决方案，无需配置路由规则，直接根据目录结构生成路由

样式

• 使用 emotion 如React 一样进行 CSS-IN-JS 的样式编写
• Svelte 文件里style 直接写，文件结构与Vue一致

单个组件用style 组件渗透用emotion

• 全局样式策略

/* 通过global.css设置全局样式变量 */
:global(:root){
   --header-color: purple
}

预处理相关

• svelte-preprocess

UI 框架

sveltematerialui

• svelte-material-ui 📌

• sveltematerialui 🚀

• stdf

sveltestrap

• sveltestrap 📌

• sveltestrap 🚀

Babel 升级

vite.config.js 文件 plugins 里直接加

plugins: [svelte(),
   '@babel/plugin-proposal-optional-chaining',// 可选链
   '@babel/plugin-proposal-nullish-coalescing-operator'//双问号
],

npm install --save-dev @babel/plugin-proposal-optional-chaining // 可选链
npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator // 合并操作符
npm install --save-dev @babel/plugin-proposal-logical-assignment-operators // 短路符
npm install --save-dev @babel/plugin-proposal-private-methods // 私有属性关键词"#"
npm install --save-dev @babel/plugin-proposal-partial-application // 函数科里化

拓展用法参照

Vite