目錄
1、安裝最新node.js
2、打開命令行窗口
3、進入要保存項目的目錄下
4、安裝 Vue CLI
5、創建新項目，選擇功能
5.1 新建項目
5.2?Please pick a preset
5.3 Check the features needed for your project
5.4?Choose a version of Vue.js
5.5?Use history mode for router?
5.6 Pick a linter/formatter config
5.7 Save this as a preset for future projects?
5.8 Lint on save
5.9?In package.json
6、使用webstorm打開創建好的項目，進行編寫
7、啟動開發服務器
8、將應用發布到生產環境
9、Vue項目結構
1、安裝最新node.js
2、打開命令行窗口
- 快捷鍵：windows+R，輸入“cmd”，打開命令行窗口
3、進入要保存項目的目錄下
4、安裝 Vue CLI
- Vue CLI 是一個官方提供的工具，用于快速搭建和管理 Vue 項目
- 此命令執行一次就行了，不必每次創建新項目時都執行一次
npm install -g @vue/cli- ?檢查是否安裝成功
5、創建新項目，選擇功能
5.1 新建項目
vue create <project-name>
5.2?Please pick a preset
- 創建?Vue 3 項目，并且希望使用默認配置，選擇?
Default ([Vue 3] babel, eslint)。- 創建 Vue 2 項目，則選擇?
Default ([Vue 2] babel, eslint)。- 自定義配置，則選擇?
Manually select features，然后按照提示逐步選擇所需的功能和工具。
5.3 Check the features needed for your project
- 選項功能：
- (*) Babel: 使用 Babel 來轉譯 JavaScript 代碼，以確保你可以使用最新的 JavaScript 特性，并兼容不同的瀏覽器。
- ( ) TypeScript: 是否使用 TypeScript 作為項目的編程語言。TypeScript 是 JavaScript 的一個超集，添加了靜態類型檢查的功能。
- ( ) Progressive Web App (PWA) Support: 是否啟用漸進式 Web 應用（PWA）的支持，這允許你將網站轉變為一個可離線訪問的應用。
- ( ) Router: 是否使用 Vue Router 來實現單頁面應用（SPA）的路由功能，用于頁面之間的導航。
- ( ) Vuex: 是否使用 Vuex 來管理應用的狀態，特別是對于較大型的 Vue 應用程序。
- ( ) CSS Pre-processors: 是否需要支持 CSS 預處理器，如 Sass 或 Less，來增強 CSS 的編寫和管理能力。
- (*) Linter / Formatter: 是否啟用代碼規范檢查和格式化工具，如 ESLint。這有助于保持代碼風格的一致性，并捕捉一些常見的代碼錯誤。
- ( ) Unit Testing: 是否需要單元測試框架，用于測試應用程序中的各個單元（組件、函數等）。
- ( ) E2E Testing: 是否需要端到端（E2E）測試框架，用于模擬用戶在應用程序中的實際操作和場景。
如何選擇：
- 使用空格鍵選擇你需要的功能。
- 使用?
a?鍵來全選所有功能。- 使用?
i?鍵來反轉選擇，即未選擇的變為選擇，已選擇的變為未選擇。- 按下回車鍵（Enter）確認你的選擇并繼續設置下一步。
- 多數情況下，至少應該選擇 Babel 和 Linter / Formatter 來確保項目的基本質量和跨瀏覽器兼容性。其余的選擇則根據項目的規模、復雜性和開發團隊的技術棧來決定。
5.4?Choose a version of Vue.js
- 選擇vue3，最新版本
5.5?Use history mode for router?
是否使用歷史模式（history mode）來管理路由？（在生產環境中需要正確設置服務器以支持索引回退）
歷史模式（history mode） 和 哈希模式（hash mode） 是 Vue Router 提供的兩種不同的路由模式：
哈希模式：
- 默認模式，使用 URL 的 hash（#）來模擬一個完整的 URL，例如?
http://example.com/#/about。- 不需要特殊的服務器配置，可以直接在所有服務器環境中使用。
歷史模式：
- 使用 HTML5 History API 來管理路由，URL 看起來像正常的 URL，例如?
http://example.com/about。- 這種模式在視覺上更加清晰，但是在生產環境中需要服務器的支持。具體來說，需要服務器配置來確保當用戶刷新頁面或直接訪問某個 URL 時，服務器能夠正確地回退到你的應用的入口點（通常是?
index.html?文件），而不是返回 404 錯誤。服務器配置：
- 當你使用歷史模式時，服務器需要配置，以確保在任何路由路徑下刷新頁面時，能夠正確地加載你的單頁面應用（SPA）。這通常涉及配置服務器以將所有路徑都重定向到你的入口文件（例如?
index.html），然后讓前端路由接管處理頁面的加載和路由切換。
5.6 Pick a linter/formatter config
這些選項是關于代碼規范檢查和格式化工具 ESLint 的不同配置選項
ESLint with error prevention only:
- 這個選項只會配置 ESLint 來檢測并阻止可能導致錯誤的代碼模式，但不會強制統一的代碼風格或格式。
- 適用場景：適合對代碼風格沒有特別要求，但希望確保代碼質量和錯誤檢測的項目。
ESLint + Airbnb config:
- 使用 Airbnb 公司開發的 JavaScript 代碼風格和最佳實踐配置。Airbnb 的配置非常嚴格，包括了很多規則和約定，旨在提高代碼質量和可維護性。
- 適用場景：適合大多數項目，特別是團隊較大或者想要使用流行的標準化配置來確保代碼質量和一致性的項目。
ESLint + Standard config:
- 使用 Standard 配置，這也是另一種流行的 JavaScript 代碼風格和規范。Standard 風格比 Airbnb 更加簡潔，通常更容易上手。
- 適用場景：適合希望使用簡單、直接的代碼風格和規范的項目。
ESLint + Prettier:
- 這個選項會集成 ESLint 和 Prettier。ESLint 負責代碼質量和錯誤檢查，而 Prettier 負責代碼的格式化。
- 適用場景：適合希望代碼風格和格式化都能得到管理的項目。Prettier 提供了強大的自動格式化功能，能夠保持整個團隊的代碼風格一致。
5.7 Save this as a preset for future projects?
- 是否要保存為這個項目作為一個模板保存？
5.8 Lint on save
5.9?In package.json
創建成功
6、使用webstorm打開創建好的項目，進行編寫
7、啟動開發服務器
- 如果在
package.json的scripts中，dev腳本依賴于某些模塊或者工具，那么在第一次運行或者更新依賴后，確實需要運行npm install來確保依賴的包已經安裝到本地的node_modules目錄中。- 當你已經安裝了所有依賴，并且沒有新增或更新依賴時，通常直接運行?
npm run dev?就可以啟動開發環境了，因為依賴已經存在于本地的?node_modules?中。
npm run dev
訪問網址：http://127.0.0.1:5173/index
8、將應用發布到生產環境
- 當你運行?
npm build?時，Vue CLI 會啟動其構建服務，根據你項目中的配置（如?vue.config.js?文件）來進行構建，生成最終的構建文件供部署使用。- 此命令會在?
./dist?文件夾中為你的應用創建一個生產環境的構建版本。?把dist文件夾的東西復制粘貼到后端項目的resources/static目錄下，連接前后端……（此處涉及到前后端分離的知識，另說）
npm build
?
9、Vue項目結構
my-vue-app/
├── node_modules # 項目的所有依賴包
├── public/ # 靜態資源目錄
│ ├── index.html # 入口 HTML 文件
│ └── ...
├── src/ # 源代碼目錄
│ ├── assets/ # 靜態資源如圖片、字體等
│ ├── components/ # Vue 組件
│ ├── views/ # 頁面視圖組件
│ ├── router/ # 路由配置
│ ├── store/ # Vuex 狀態管理
│ ├── services/ # 后端 API 服務
│ ├── styles/ # 全局樣式
│ ├── utils/ # 工具函數
│ ├── App.vue # 根組件
│ └── main.js # 入口 JS 文件
├── tests/ # 測試文件目錄
├── .eslintrc.js # ESLint 配置文件
├── .babelrc # Babel 配置文件
├── .gitignore # 指定了 Git 在版本控制中忽略的文件和目錄
├── babel.config.js # 編譯器Babel的配置
├── package.json # npm 包管理文件
├── README.md # 項目說明文件
├── vue.config.js # 自定義 Vue CLI 的配置
)
)