Why use Svelte
Svelte is a brand new way to build a user interface. Traditional frameworks (such as React and Vue) do most of the work in the browser, while Svelte transfers this work to the compilation steps that occur when building the application.
Svelte did not use techniques such as virtual DOM diffing, but wrote code to update the DOM surgically when the state of the application changes.
In this tutorial, you will build your own application from scratch, using Svelte-Cli and cloud development platform respectively
Svelte-Cli quickly build the project
1. Build a local development environment
Svelte requires Node.js version>=12.2.0. However, some templates require a higher Node. The js version can only work, if your package manager issues a warning, please upgrade. You can use n, nvm, or nvm-windows to manage multiple versions of Node on the same machine. To learn how to install Node.js, nodejs.org .If you are not sure about the Node running in the system. What is the js version, please run node-v in the terminal window.
npm package manager Because we usually use the scaffolding provided by Svelte to build the project structure, we have to download and install the npm package and npm>=6., You need an npm package manager. This guide uses the npm client command line interface, which is installed in Node by default.js. To check if you have the npm client installed, run npm-v in a terminal window.
You can use the Svelte-Cli generator to create projects, generate application and library code, and perform various continuous development tasks, such as testing, packaging, and deployment.
2. Create a new initial application
degit is a tool for creating projects from templates stored in git repos. Global installation
Svelte also provides a command-line interface, but it is not recommended to use it in a production environment. The CLI will compile your components into separate JavaScript files, but will not automatically recompile them when they change, nor will it delete duplicate code shared between components. Please use one of the above methods instead.
If you have svelte installed globally, you can use svelte–help for a complete list of options. Some examples of more common operations are as follows：
# Generate a JavaScript module from MyComponent.html
svelte compile MyComponent.html > MyComponent.js
svelte compile -i MyComponent.html -o MyComponent.js
# Generate a UMD module from MyComponent.html, inferring its name from the filename (‘MyComponent’)
svelte compile -f umd MyComponent.html > MyComponent.js
# Generate a UMD module, specifying the name
svelte compile -f umd -n CustomName MyComponent.html > MyComponent.js
# Compile all .html files in a directory
svelte compile -i src/components -o build/components
You can also use npx to use the CLI without installing Svelte globally—just add npx before the command: npx svelte compile…
3. Start the application server
Enter the workspace directory and start the application.
- cd my-new-project
- npm install
- npm run dev
The npm run dev command will build the application, start the development server, listen to the source files, and rebuild the application when those files change.，
One-click deployment of Svelte on cloud development platform
As an Svelte developer, the cloud development platform provides you with a one-stop, cloud-wide development platform, allowing you to open a browser to complete development, debugging, and go online. At the same time, the underlying cloud development platform calls Alibaba Cloud Group Serverless products, which can achieve low-threshold development, deployment, debugging, and reduce the cost of getting started with development, so that Svelte applications can be quickly deployed with one click!
