vue-cli を使用して作成
公式ドキュメント: https://cli.vuejs.org/zh/guide/
vue-cli4.x は webpack4 に基づいており、vue-cli5.x は webpack5 に基づいています。
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue3_cli //vue_stduy_cli为自定义文件名
必要に応じて対応するテンプレートを選択してください
Vue CLI v5.0.8
? Please pick a preset:
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
クレートバイトで作成
公式文書: https://vitejs.cn/vite3-cn/guide/#scaffolding-your-first-vite-project
crate-vite は vite が提供する公式の scaffolding であり、vue、react、およびその他のフレームワークのプロジェクト テンプレートを作成できます。
npmを使用する
npm create vite@latest
npm create は npm init のエイリアスですnpm init vite@latestも
Yarn を使用して動作します:
yarn create vite
PNPM の使用:
pnpm create vite
必要に応じて対応するテンプレートを選択してください
PS C:\Users\Administrator\Desktop> npm create vite@latest
√ Project name: ... vite-project
? Select a framework: » - Use arrow-keys. Return to submit.
> Vanilla
Vue
React
Preact
Lit
Svelte
Others
create-vueを使用して作成する
https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
これは、vite に基づいて、vue が提供する公式の vue プロジェクト構築ツールです。
npm init vue@latest
npm create は npm init のエイリアスですnpm create vue@latestも有効になります
✔ Project name: … <your-project-name>
✔ 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 both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
[はい] を選択した後のテンプレート ディレクトリ構造
├─ cypress
├─ public
│ └─ favicon.ico
├─ src
│ ├─ App.vue
│ ├─ assets
│ ├─ components
│ ├─ main.ts
│ ├─ router
│ │ └─ index.ts
│ ├─ stores
│ │ └─ counter.ts
│ └─ views
│ ├─ AboutView.vue
│ └─ HomeView.vue
├─ tsconfig.app.json
├─ tsconfig.config.json
├─ tsconfig.json
├─ tsconfig.vitest.json
└─ vite.config.ts
├─ .eslintrc.cjs
├─ .gitignore
├─ .prettierrc.json
├─ cypress.config.ts
├─ env.d.ts
├─ index.html
├─ package.json