Svelte 3 前排佔坑（一）

用svelte當前端寫一個blog，後端用sb吧，主要看看svelte的體驗感。

一、初始化svelte項目

這裏用一個svelte模板https://github.com/sveltejs/template快速初始化

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

用於Svelte 3應用程序的路由器，專門針對單頁應用程序（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