Svelte 3 前排占坑（一）

用svelte当前端写一个blog，后端用sb吧，主要看看svelte的体验感。

一、初始化svelte项目

这里用一个svelte模板快速初始化

npx degit sveltejs/template my-svelte-blog
cd my-svelte-blog
npm install
npm run dev

一个简单的svelte的hello world就好了，下面都是选择安装

二、安装rollup-plugin-postcss

svelte的默认打包工具(rollup.js)配置里面没有处理css的模块，import .css会报错，so

npm install --save-dev rollup-plugin-postcss

在rollup配置文件中添加css支持

// rollup配置  rollup.config.js
import postcss from rollup-plugin-postcss;

// ...


export default {
  // ... 
  plugins: [
      postcss({
	    extensions: [ .css, .scss ],
      }),
  ]
}

那么你的main.js就可以引入css文件了

import ./assets/css/responsive-5.4.css;

三、svelte的路由管理svelte-spa-router

用于应用程序的路由器，专门针对单页应用程序（SPA）优化（官网抄的介绍）

此处install一下

npm install svelte-spa-router

新建一个router.js

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

在我们的App.svelte引入路由文件

<script>
  import Router from svelte-spa-router
  import { routes } from ./router/router.js
</script>
<Router {routes} />

在我的Home页面想要跳转首先要import {link} from svelte-spa-router;

<a href="/about/321" use:link>About</a>

（完）下一章讲store