新しいリポジトリを作成するときに を使用すると、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 入門チュートリアル