create-leafer

create-leafer is a command-line tool designed to help you quickly create Leafer projects. Make sure you have Node.js installed.

Thanks to LeaferJS community member @214L for dedicating time to development and maintenance 👍👍👍. Feel free to give it a ⭐ on GitHub Star

Note

Please install Node.js version 14 or above.

Let’s begin your Leafer journey 🌱

Usage

Quickly create a Vue + Leafer template project

If you want to quickly start a Leafer project, simply run the following command. It will generate a project template with Vue3 + TypeScript + Leafer in the current directory, which is perfect for quickly setting up a Leafer development environment.

npm create leafer@latest vue-template

Integrate Leafer into an existing project

If you want to introduce Leafer into an existing project, you can use this command. It will guide you through an interactive process to add Leafer-related scene packages and official plugins.

npm create leafer@latest init

    ✔ Please select the platform that your project will support. › web
    ✔ Choose a scene package to quickly start the project, or skip to make detailed selections. › editor
    ✔ Choose the official feature plugins you want. › interface, editor, html, scroll, arrow, view, state
    Fetching Leafer version...
    Initialization complete. Now run:
      npm install
      npm run dev

Please make sure to run this command in a project that contains a package.json file. It is recommended to first use build tools like vite or webpack to freely configure your project environment, and then use this command to easily integrate Leafer dependencies.

Add or remove Leafer dependencies in your project

If you need to modify Leafer dependencies in your project, you can use this command. It will guide you through an interactive process to add or remove dependencies.

npm create leafer@latest add

Please ensure your project already includes Leafer-related dependencies so the command can run properly.

Update Leafer dependency versions in your project

To check and update Leafer dependency versions in your project, use this command:

npm create leafer@latest update

    Fetching Leafer version...
    ✔ The following Leafer dependencies can be updated:
    {
      "leafer-editor": "^2.1.0",
      "@leafer-in/animate": "^2.1.0"
    }
    Do you want to update them? … yes
    ✔ Dependencies updated successfully! Please run npm install to install the latest versions.

The platform packages, core packages, and official plugin packages of Leafer are kept version-synchronized. Manually updating versions in package.json may lead to omissions. This command scans all Leafer-related dependencies in your project, fetches the latest Leafer version, and updates the versions in package.json.

After completion, remember to run your package manager install command to apply the updates. If you encounter cache conflicts with older versions, delete the lock file and reinstall.

Quickly create a LeaferX plugin template

Want to develop a LeaferX plugin? This command generates a project template suitable for plugin and higher-level application development.

npm create leafer@latest plugin

For more details, see Plugin Development.

Global Installation

You can also install create-leafer globally so you can use it anytime.

Although global installation provides shorter commands, we still recommend using npm create leafer@latest to always get the latest version of create-leafer automatically. If you choose global installation, please update it regularly to ensure you are using the latest features and stability improvements.

npm install -g create-leafer@latest

After global installation, you can use the create-leafer or leafer command to run features.

npx leafer vue-template
npx leafer init
npx leafer plugin
...

Feedback & Improvements

If you encounter bugs or have suggestions during use, feel free to submit an issue at GitHub Issues or contact the author. Your feedback is very important to us!