Plasmic からネイティブ コード ベースを作成する

公式文書

新しいリポジトリを作成するときに を使用すると、create-plasmic-appすべてが自動的にセットアップされます。プロジェクトを作成するには、コマンド ライン ツールで次のコードを実行します。

npx create-plasmic-app

約 1 分半後、インストールが成功したことを示すメッセージが表示されます。次に、プロンプトに従ってプロジェクト名、コード言語、反応フレームワーク、統合スキーム、プロジェクト リンクを設定できます。プロジェクト名とリンクに加えて、残りの 3 つの項目はキーボードの/矢印で選択します。
プロジェクト名を書くだけでOK、プロジェクトリンクはプラズマの設計図へのリンク、その他のオプションは公式推奨オプションに基づいています。
たとえば、私が入力した内容は次のとおりです(参考のみ)。

Please specify the project directory
? What is your project named? plasmicdesign
? What language do you want to use? TypeScript
? What React framework do you want to use? Next.js
? Which scheme do you want to use to integrate Plasmic? PlasmicLoader

? What is the URL of your project?
(If you don't have a project yet, create one by going to
https://studio.plasmic.app/starters/simple-light):
 https://studio.plasmic.app/projects/x2MP8nP6DT8WT9iEdA83zr

次に、次のプロンプトが表示されます。

Let's get started! Here's what we'll do: 
1. Authenticate with Plasmic
2. Create a React/Next/Gatsby repo
3. Integrate with Plasmic

==================================================
AUTHENTICATING WITH PLASMIC
==================================================

If your browser doesn't automatically open, enter the following URL:
https://studio.plasmic.app/auth/plasmic-init/94da7201-bd39-4ccd-951c-36e6fa043bbf

Please log in and authorize Plasmic CLI.
Waiting for token...

このとき、ブラウザにページが表示されるので、承認するボタンをクリックします。
ここに画像の説明を挿入
認証後、ローカル コンピュータ上の Plasmic のコード ベースの場所が表示されます。
次に、プロジェクト ファイルが自動的に作成され、依存関係がインストールされます。

Successfully created Plasmic credentials file at /Users/ym/.plasmic.auth

==================================================
CREATING THE PROJECT
==================================================
npx -p create-next-app create-next-app --typescript /Users/ym/plasmicdesign
npx: 1 安装成功,用时 2.924 秒
Creating a new Next.js app in /Users/ym/plasmicdesign.

Using npm.

Installing dependencies:
- react
- react-dom
- next

次に、完全に自動でインストールされるプロセスがあるため、詳細については説明しません。
最後に、成功を示す次の行が表示されます。

Congrats! We created the Plasmic-connected project at plasmicdesign

次に、プロンプトに従って設定ディレクトリに入り、サービスを開始します。

cd plasmicdesign
npm run dev

関連リンク: Plasmic Studio 入門チュートリアル

おすすめ

転載: blog.csdn.net/ymyz1229/article/details/127490299