Starter template for Routify.
Template | Description |
---|---|
master | Default template, includes examples folder |
blog | Generates a blog from local markdown posts. Includes mdsvex |
auth | Embedded login on protected pages. Includes Auth0 |
To use a template, run:
npx @sveltech/routify init
or
npx @sveltech/routify init --branch <branch-name>
The above commands will populate the current directory, they don't create a new one.
Syntax | Description |
---|---|
dev |
Development (port 5000) |
dev:nollup |
Development with crazy fast rebuilds (port 5000) |
dev-dynamic |
Development with dynamic imports |
build |
Build a bundled app with SSR + prerendering and dynamic imports |
serve |
Run after a build to preview. Serves SPA on 5000 and SSR on 5005 |
deploy:* |
Deploy to netlify or now |
export |
Create static pages from content in dist folder (used by npm run build ) |
SSR and pre-rendering are included in the default build process.
npm run deploy:(now|netlify)
will deploy the app with SSR and prerendering included.
To render async data, call the $ready()
helper whenever your data is ready.
If $ready() is present, rendering will be delayed till the function has been called.
Otherwise it will be rendered instantly.
See src/pages/example/api/[showId].svelte for an example.
__app.html
.For Typescript, we recommend @lamualfa excellent routify-ts
New project: npx routify-ts init <project-name> [routify-init-args]
Existing project: npx routify-ts convert [project-directory]
File on Github! See https://github.com/sveltech/routify/issues .
Smelte是一个 使用Material Design规范在Svelte和Tailwind CSS之上构建的UI框架 .它带有许多组件和实用程序功能,可以轻松构建漂亮的响应式布局,同时还要确保捆绑包的大小和性能,这一切都要归功于Svelte。
npm install smelte or yarn add smelte
Then add the Smelte Rollup plugin (after svelte but before css)
// rollup.config.js
const smelte=require("smelte/rollup-plugin-smelte");
plugins=[
...your plugins,
smelte({
purge: production,
output: "public/global.css", // it defaults to static/global.css which is probably what you expect in Sapper
postcss: [], // Your PostCSS plugins
whitelist: [], // Array of classnames whitelisted from purging
whitelistPatterns: [], // Same as above, but list of regexes
tailwind: {
colors: {
primary: "#b027b0",
secondary: "#009688",
error: "#f44336",
success: "#4caf50",
alert: "#ff9800",
blue: "#2196f3",
dark: "#212121"
}, // Object of colors to generate a palette from, and then all the utility classes
darkMode: true,
},
// Any other props will be applied on top of default Smelte tailwind.config.js
}),
]
Then you should add Tailwind utilites CSS in your app component.
import "smelte/src/tailwind.css" ;
例如: 在App.svelte文件下进行样式引入
// App.svelte
<script>
import { Router } from "@roxi/routify";
import { routes } from "../.routify/routes";
</script>
<style global>
@import "../assets/global.css";
@import "smelte/src/tailwind.css" ;
</style>
<Router {routes} />
只有上面是不够的,新建一个windcss.css,里面放编译过的tailwindcss的样式,需要这样手动引入,不然识别不出tailwindcss 而后在global.css中引入也行,在index.html中进行引入也行
当上面的文件都准备好的时候,可以进行npm run dev进行页面调试,此时页面报错,进行以下插件安装
npm install svelte-waypoint
当smelte的环境以及样式都引入成功之后,我们可以在我们的页面进行smelte的控件引入,例如:
// example的index.svelte页面
<script>
import { TextField } from "smelte";
</script>
<style>
</style>
<div style="width: 100%; text-align: center; margin-top: 4rem;">
<TextField label="Test label" />
</div>