1. 創(chuàng)建項(xiàng)目

#創(chuàng)建項(xiàng)目
npm create vue

# 項(xiàng)目選項(xiàng)
? Project name: … fpf-big (項(xiàng)目名稱)
? Add TypeScript? … No （新手推薦先不用TS，簡化配置）
? Add JSX/TSX support? … No
? Add Vue Router for SPA development? … No （按需選擇，不影響配置）
? Add Pinia for state management? … No （按需選擇）
? Add Vitest for Unit Testing? … No
? Add an End-to-End Testing Solution? … No
? Add ESLint for code quality? … No （關(guān)鍵：先不選，后續(xù)手動(dòng)配置ESLint 9+）
? Add Prettier for code formatting? … No （關(guān)鍵：先不選，后續(xù)手動(dòng)整合）
? Add Vue DevTools 7 extension for debugging? … Yes


#安裝項(xiàng)目核心依賴
npm install

4.png

2. 創(chuàng)建目錄結(jié)構(gòu)

• src 文件中新建 api , assets , components , router , stores , utils , views
• 刪除src文件夾中assets、components、stores、views目錄下所有文件
• 清除App.vue、main.js中多余代碼.
• 創(chuàng)建router/index.js,在文件中的寫默認(rèn)路由.
• 創(chuàng)建assets/main.scss，可以在里面寫全局樣式.

7d69433b-a7bc-44f7-a7fd-96e037afbee1.png

作用:

• api api 文件
• utils 循環(huán)可使用的(封裝過的文件)
• assets 靜態(tài)資源(圖片，js，css）
• router 路由配置
• views 路由組件(主頁面)
• components 非路由組件(子頁面)
• stores | vuex（倉庫）
• App.vue | 加載的第一個(gè)組件（主入口文件）
• main.js | 全局文件
• public | public放不會(huì)變動(dòng)的文件 public建議放一些外部第三方