【Svelte】官方Typescript支持+ Tailwind

一、下载官方模板工程

模板工程

node scripts/setupTypeScript.js

Typescript依赖于一些软件包，因此在脚本运行后运行软件包管理器npm install

您还可以在此处了解有关Svelte的Typescript支持的更多信息，它还描述了如何为现有项目手动进行设置

三、安装依赖、启动 【npm/yarn】

npm install
npm run dev

四、路由管理svelte-spa-router

添加依赖

npm install svelte-spa-router --save

在App.svelte中引入

<script lang='ts'>
    import Router from 'svelte-spa-router'
    //具体路由在router.js中写
    import { routes } from './router.js'
</script>

<Router {routes} />

<!--
<main>

</main>
-->

<style>
    
</style>

router.js

import Home from './views/Home.svelte'
import About from './views/About.svelte'
import Smui from './views/Smui.svelte'
export const routes = {
  '/':Home,
  '/smui':Smui,
  '/about/*':About
}

具体跳转可参照如下写法：

<script lang="ts">
    import {link} from 'svelte-spa-router';
</script>
<a href="/about/321" use:link>About </a><br/>
<a href="/smui" use:link>SMUI</a>

五、添加TailwindCSS

添加tailwindcss包并生成tailwind.config.js配置文件

yarn add tailwindcss  /   npm install tailwindcss --save
npx tailwindcss init

Typescript设置已经附带了svelte-preprocess，所以大多数设置已经为我们完成了，
但是我们仍然需要告诉它使用postcss和其他一些软件包。

yarn add -D postcss postcss-load-config @fullhuman/postcss-purgecss 
//或者
npm install --save-dev postcss postcss-load-config @fullhuman/postcss-purgecss  autoprefixer

创建一个postcss.config.js文件，注意这里的名称很重要，因为postcss-load-config将在寻找该文件。

六、UI框架：sveltematerialui

目前为止，svelte稍微成熟点的ui应该就是这个了

七、其他