Svelte-MUI 项目教程
svelte-muiSimple Svelte 3 UI components项目地址:https://gitcode.com/gh_mirrors/sv/svelte-mui
1. 项目的目录结构及介绍
Svelte-MUI 项目的目录结构如下:
svelte-mui/
├── src/
│ ├── components/
│ ├── styles/
│ ├── main.js
│ └── App.svelte
├── public/
│ ├── index.html
│ └── global.css
├── package.json
├── rollup.config.js
└── README.md
目录结构介绍
- src/: 包含项目的源代码。
- components/: 存放各种 Svelte 组件。
- styles/: 存放全局样式文件。
- main.js: 项目的入口文件。
- App.svelte: 主应用组件。
- public/: 包含公开的静态资源。
- index.html: 主 HTML 文件。
- global.css: 全局 CSS 文件。
- package.json: 项目的依赖和脚本配置文件。
- rollup.config.js: Rollup 打包配置文件。
- README.md: 项目说明文档。
2. 项目的启动文件介绍
main.js
main.js
是项目的入口文件,负责初始化应用并挂载到 DOM 中。其主要内容如下:
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'Svelte-MUI'
}
});
export default app;
App.svelte
App.svelte
是主应用组件,包含了应用的主要逻辑和布局。其主要内容如下:
<script>
export let name;
</script>
<style>
h1 {
color: #333;
}
</style>
<h1>Welcome to {name}!</h1>
<main>
<!-- 其他组件和内容 -->
</main>
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他配置信息。主要内容如下:
{
"name": "svelte-mui",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public"
},
"dependencies": {
"svelte": "^3.0.0"
},
"devDependencies": {
"rollup": "^2.0.0",
"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');
}
}),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
!production && livereload('public'),
production && terser()
],
watch: {
clearScreen: false
}
};
通过以上介绍,您应该对 Svelte-MUI 项目的目录结构
svelte-muiSimple Svelte 3 UI components项目地址:https://gitcode.com/gh_mirrors/sv/svelte-mui