用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