Svelte-Routing 开源项目教程
项目的目录结构及介绍
Svelte-Routing 项目的目录结构相对简洁,主要包含以下几个部分:
svelte-routing/
├── src/
│ ├── routes/
│ │ ├── About.svelte
│ │ ├── Home.svelte
│ │ └── Users.svelte
│ ├── App.svelte
│ ├── main.js
│ └── router.js
├── public/
│ ├── index.html
│ └── global.css
├── package.json
├── README.md
└── rollup.config.js
目录结构说明:
- src/: 包含项目的源代码。
- routes/: 存放各个路由组件,如
About.svelte
,Home.svelte
,Users.svelte
。 - App.svelte: 主应用组件,包含路由配置。
- main.js: 项目的入口文件。
- router.js: 路由配置文件。
- routes/: 存放各个路由组件,如
- public/: 包含公开的静态资源。
- index.html: 项目的入口 HTML 文件。
- global.css: 全局样式文件。
- package.json: 项目的依赖管理文件。
- README.md: 项目说明文档。
- rollup.config.js: Rollup 打包配置文件。
项目的启动文件介绍
项目的启动文件是 src/main.js
,其主要作用是初始化 Svelte 应用并挂载到 DOM 中。
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
启动文件说明:
- import App from './App.svelte': 导入主应用组件
App.svelte
。 - new App({ target: document.body, props: { name: 'world' } }): 创建
App
实例并挂载到document.body
上,同时传递初始属性name
。
项目的配置文件介绍
项目的配置文件主要包括 package.json
和 rollup.config.js
。
package.json
package.json
文件包含了项目的依赖、脚本命令和其他元数据。
{
"name": "svelte-routing",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public"
},
"dependencies": {
"svelte": "^3.0.0",
"svelte-routing": "^1.5.0"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"rollup": "^2.3.4",
"rollup-plugin-svelte": "^6.0.0",
"sirv-cli": "^1.0.0"
}
}
rollup.config.js
rollup.config.js
文件是 Rollup 的配置文件,用于打包项目。
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
dev: !production,
css: css => {
css.write('public/build/bundle.css');
}
}),