Svelte 新闻应用项目教程
1. 项目的目录结构及介绍
svelte-news-app/
├── public/
│ ├── index.html
│ └── global.css
├── src/
│ ├── App.svelte
│ ├── main.js
│ ├── components/
│ │ ├── Header.svelte
│ │ └── Footer.svelte
│ └── routes/
│ ├── Home.svelte
│ └── About.svelte
├── .gitignore
├── package.json
├── README.md
├── rollup.config.js
└── package-lock.json
目录结构说明:
- public/: 包含公开的静态文件,如
index.html
和全局样式global.css
。 - src/: 包含源代码文件,包括主应用组件
App.svelte
和入口文件main.js
。- components/: 包含可重用的组件,如
Header.svelte
和Footer.svelte
。 - routes/: 包含应用的路由组件,如
Home.svelte
和About.svelte
。
- components/: 包含可重用的组件,如
- .gitignore: 指定 Git 忽略的文件和目录。
- package.json: 项目的依赖和脚本配置。
- README.md: 项目说明文档。
- rollup.config.js: Rollup 打包配置文件。
- package-lock.json: 锁定依赖版本。
2. 项目的启动文件介绍
src/main.js
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'Svelte News App'
}
});
export default app;
启动文件说明:
- 导入主应用组件
App.svelte
。 - 创建
App
实例,并将其挂载到document.body
。 - 传递初始属性
name
给App
组件。
3. 项目的配置文件介绍
package.json
{
"name": "svelte-news-app",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public"
},
"dependencies": {
"svelte": "^3.0.0"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^11.0.0",
"rollup": "^2.3.4",
"rollup-plugin-svelte": "^7.0.0",
"sirv-cli": "^1.0.0"
}
}
配置文件说明:
- scripts: 定义了构建、开发和启动服务的命令。
build
: 使用 Rollup 进行构建。dev
: 使用 Rollup 进行开发,并启用监视模式。start
: 启动开发服务器。
- dependencies: 生产环境依赖,如
svelte
。 - devDependencies: 开发环境依赖,如 Rollup 插件和开发服务器。
rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
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');
}