Vue3項目的3種創(chuàng)建方式代碼示例

更新時間：2024年03月29日 10:54:10 作者：石小石Orz

使用VUE3開發(fā)很久了,但一直沒進行總結和記錄,忙里偷閑整理搭建一套VUE3項目,正好記錄一下,這篇文章主要給大家介紹了關于Vue3項目的3種創(chuàng)建方式,需要的朋友可以參考下

使用 vue-cli 創(chuàng)建

官方文檔：https://cli.vuejs.org/zh/guide/

vue-cli4.x是基于webpack4的，vue-cli5.x是基于webpack5的

## 安裝或者升級你的@vue/cli
npm install -g @vue/cli

## 創(chuàng)建
vue create vue3_cli           //vue_stduy_cli為自定義文件名

根據(jù)我們的需求選擇對應的模板

Vue CLI v5.0.8
? Please pick a preset:
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

使用crate-vite 創(chuàng)建

官方文檔：https://vitejs.cn/vite3-cn/guide/#scaffolding-your-first-vite-project

crate-vite是vite官方提供的官方腳手架，可以創(chuàng)建vue、react等框架的項目模板。

使用npm

npm create vite@latest

npm create 是 npm init 的別名 npm init vite@latest同樣生效

使用 Yarn:

yarn create vite

使用 PNPM:

pnpm create vite

根據(jù)我們的需求選擇對應的模板

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創(chuàng)建

https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

這是vue官方提供的vue項目構建工具，基于vite

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.

全選Yes后的模板目錄結構

├─ 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