🐈 Vue3 開発環境を整えよう
作成日: 2023/09/29
0

Vue3最新版の開発環境を作るやつ

npm init vue@latest

2.フォルダの名前を決める

? Project name: » vue-create-sample

3.プロジェクトのセットアップを決める

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
? Add Prettier for code formatting? » No / Yes

【説明】
TypeScript を追加しますか?
JSX をサポートしますか?
SPA 開発のための Vue Router を追加しますか?
状態管理の Pinia を追加しますか?
ユニットテストの Vitest を追加しますか?
E2E テストの Cypress を追加しますか?
ESLint を追加しますか?
Prettier を追加しますか?
4.プロジェクトに入る

cd ⚪︎⚪︎⚪︎⚪︎⚪︎

または、プロジェクトフォルダをドラッグ&ドロップしVScodeのターミナルで5番を記述
5.

npm i

6.サーバーを立ち上げる

npm run sever
// or
npm run dev

私はよく、configファイルからseverdevにかえる(別にしなくて良い作業)


感想

vueの最新版のフォルダ作成方法を紹介しました。
新しくなるにつれ、質問内容など変わってくると思うのでその都度アップデートしていけたら。。。


フロントエンドエンジニアを頑張って勉強中。 最近はVueやNuxtを勉強中です。 コミュニティなどあれば参加してみたいと思ってます。 どうぞ、生暖かい目で見ていただけると幸いです。