快捷導(dǎo)航

手把手教你創(chuàng)建vue3項目的最佳方式

更新時間：2022年11月22日 09:29:00 作者：魚?空

如今的Vue3已經(jīng)勢不可擋,當(dāng)然搭建一個全新的Vue3項目也有了全新的方式,下面這篇文章主要給大家介紹了關(guān)于如何手把手教你創(chuàng)建vue3項目的最佳方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

如何創(chuàng)建vue3項目

創(chuàng)建vue3我們常用的有三種方式：

1、用vue cli創(chuàng)建

1.使用vue cli環(huán)境前提條件：
node -v
	v16.13.0
npm -v
	8.1.0
vue -V
	@vue/cli 4.5.15 
2.創(chuàng)建項目格式：
   vue create 項目名

vue cli底層用webpack搭建的,此種方式創(chuàng)建vue3適合新手過渡用

2、使用vite直接創(chuàng)建-------最快速創(chuàng)建

vite是下一代前端開發(fā)與構(gòu)建工具。Vite意在提供開箱即用的配置，同時它的插件API和JavaScript API 帶來了高度的可擴(kuò)展性，并有完整的類型支持。

npm init vite 回車
 
 npm init vite
Need to install the following packages:
  create-vite
Ok to proceed? (y) y
? Project name: … vue3_vite  //項目名稱
? Select a framework: ? vue  //選擇vue
? Select a variant: ? vue 
 
 
 cd vue3_vite  //進(jìn)入目錄
  npm install  //安裝依賴
  npm run dev  //運行項目

3、使用vue3官方推薦創(chuàng)建方式

vue3： 6大金剛

安裝命令：

npm init vue@3

步驟：

Need to install the following packages:
  create-vue@3
Ok to proceed? (y) y----------選Y
 
Vue.js - The Progressive JavaScript Framework
 
? Project name: … vue3_ok  //項目名稱
? Add TypeScript? … No / Yes  //是否使用TS
? Add JSX Support? … No / Yes  //是否支持JSX，除非你是搞React開發(fā)
? Add Vue Router for Single Page Application development? … No / Yes   //是否添加路由
? Add Pinia for state management? … No / Yes   //是否添加狀態(tài)管理 推薦pinia
? 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   //是否添加ESLint做代碼質(zhì)量檢查
? Add Prettier for code formatting? … No / Yes   //是否添加Perttier進(jìn)行代碼格式化

 
  cd vue3_ok   //cd 進(jìn)行目錄
  npm install   //安裝相關(guān)依賴   npm i
  npm run lint   //運行代碼修復(fù)
  npm run dev   //運行項目