|
1 | | -*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* |
2 | | - |
3 | | ---- |
4 | | - |
5 | | -# svelte app |
6 | | - |
7 | | -This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. |
8 | | - |
9 | | -To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): |
10 | | - |
11 | | -```bash |
12 | | -npx degit sveltejs/template svelte-app |
13 | | -cd svelte-app |
14 | | -``` |
15 | | - |
16 | | -*Note that you will need to have [Node.js](https://nodejs.org) installed.* |
17 | | - |
18 | | - |
19 | | -## Get started |
20 | | - |
21 | | -Install the dependencies... |
22 | | - |
23 | | -```bash |
24 | | -cd svelte-app |
25 | | -npm install |
26 | | -``` |
27 | | - |
28 | | -...then start [Rollup](https://rollupjs.org): |
29 | | - |
30 | | -```bash |
31 | | -npm run dev |
32 | | -``` |
33 | | - |
34 | | -Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. |
35 | | - |
36 | | -By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. |
37 | | - |
38 | | -If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense. |
39 | | - |
40 | | -## Building and running in production mode |
41 | | - |
42 | | -To create an optimised version of the app: |
43 | | - |
44 | | -```bash |
45 | | -npm run build |
46 | | -``` |
47 | | - |
48 | | -You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). |
49 | | - |
50 | | - |
51 | | -## Single-page app mode |
52 | | - |
53 | | -By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. |
54 | | - |
55 | | -If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: |
56 | | - |
57 | | -```js |
58 | | -"start": "sirv public --single" |
59 | | -``` |
60 | | - |
61 | | -## Using TypeScript |
62 | | - |
63 | | -This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with: |
64 | | - |
65 | | -```bash |
66 | | -node scripts/setupTypeScript.js |
67 | | -``` |
68 | | - |
69 | | -Or remove the script via: |
70 | | - |
71 | | -```bash |
72 | | -rm scripts/setupTypeScript.js |
73 | | -``` |
74 | | - |
75 | | -## Deploying to the web |
76 | | - |
77 | | -### With [Vercel](https://vercel.com) |
78 | | - |
79 | | -Install `vercel` if you haven't already: |
80 | | - |
81 | | -```bash |
82 | | -npm install -g vercel |
83 | | -``` |
84 | | - |
85 | | -Then, from within your project folder: |
86 | | - |
87 | | -```bash |
88 | | -cd public |
89 | | -vercel deploy --name my-project |
90 | | -``` |
91 | | - |
92 | | -### With [surge](https://surge.sh/) |
93 | | - |
94 | | -Install `surge` if you haven't already: |
95 | | - |
96 | | -```bash |
97 | | -npm install -g surge |
98 | | -``` |
99 | | - |
100 | | -Then, from within your project folder: |
101 | | - |
102 | | -```bash |
103 | | -npm run build |
104 | | -surge public my-project.surge.sh |
105 | | -``` |
| 1 | +# Полный курс по Svelte (YouTube) |
| 2 | + |
| 3 | +1. [Установка и структура проекта](https://youtu.be/N4KXC7z---Y) |
| 4 | +2. [Компонент и его структура](https://youtu.be/u-_pqJ9ARos) |
| 5 | +3. [Жизненный цикл компонента](https://youtu.be/drgBkaPNpk0) |
| 6 | +4. [Синтаксис HTML шаблонов](https://youtu.be/pOmTYXiF0AU) |
| 7 | +5. [События и обработка событий](https://youtu.be/f1i-9RdxDCc) |
| 8 | +6. [Привязки (Bindings)](https://youtu.be/hHAszJgyUMc) |
| 9 | +7. [Хранилище (Store)](https://youtu.be/equxrqhb534) |
| 10 | +8. [Анимации и переходы (Motion, Transition and Animation)](https://youtu.be/tx-o1QNHcCo) |
| 11 | +9. [Действия и директива use (Actions)](https://youtu.be/Eg18v8l1WdM) |
| 12 | +10. [Слоты (Svelte slots). Context Модуль (Svelte module context)](https://youtu.be/BmvwzMRUBFM) |
| 13 | +11. [API контекста (Context API)](https://youtu.be/olyPCoIdgT0) |
| 14 | +12. [Специальные элементы (Special elements)](https://youtu.be/axGxAHwbYYg) |
| 15 | + |
| 16 | +👉 [Плейлист со всеми частями курса](https://www.youtube.com/playlist?list=PLmfIBo6rTVR5XNcJxu8TwzEvIDUCAhGc6) |
0 commit comments