Vue腳手架學習之專案建立方式
一、什麼是腳手架？
1.vue CLI
Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供：
- 通過 @vue/cli 實現的互動式的專案腳手架。
- 通過 @vue/cli + @vue/cli-service-global
- 實現的零配置原型開發。
- 一個執行時依賴 (@vue/cli-service)，該依賴：
- 可升級；
- 基於 webpack 構建，並帶有合理的預設配置；
- 可以通過專案內的配置檔案進行配置； 可以通過外掛進行擴充套件。
- 一個豐富的官方外掛集合，集成了前端生態中最好程式設計客棧的工具。
- 一套完全圖形化的建立和管理 Vue.js 專案的使用者介面。
Vue CLI 致力於Vue生態中的工具基礎標準化。它確保了各種構建工具能夠基於智慧的預設配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結程式設計客棧配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需eject
2.特點：
- 快速，自動，建立模板專案
- 自動安裝環境，配置環境
3.安裝方式
注意：在擁有npm工具的前提下
開啟終端，cmd輸入指令，進行全域性環境下載（建議下載全域性）
npm install -g @vue/cli
4.下載好以後檢視版本指令
vue --version
5.升級版本
npm update -g @vue/cli
二、專案建立
建立專案
vue create myapp
根據提示做各項選擇
步驟一：選擇安裝方式 - 自定義安裝
Default ([Vue 2] babel,eslint)
Default (Vue http://www.cppcns.com3 Preview) ([Vue 3] babel,eslint)
Manually select features
步驟二：選擇要安裝的模組
◉ Choose Vue version — 選擇檢視版本
◉ Babel — 解析js
◯ TypeScript — 解析ts
◉ Progressive Web App (PWA) Support — 漸進式支援
◉ Router — 路由
◉ Vuex — 狀態管理
◉ css Pre-processors — 樣式處理
◉ Linter / Formatter — 程式碼格式化
◉ Unit Testing — 測試外掛
◉ E2E Testing — 測試外掛
步驟三：選擇路由模式（任選後期可調）
history — http://localhost:81/ 後端支援
hash — http://localhost:81/#/ 不需要後端支援
步驟四：選擇什麼方式處理css（此處選擇node環境的scss）
sass/scss - node
步驟五：程式碼校驗規則 - 標準規則：Standard
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
步驟六：什麼時候校驗：儲存時
◉ Lint on save
◯ Lint and fix on commit
步驟七：選擇測試模組：任選
步驟八：端對端測試方案：默qkXrfU認
步驟九：專案的配置檔案
package.json
步驟十：是否儲存當前配置：不儲存
等待建立結束即可完成專案架構
三、專案目錄介紹
1.根目錄
+ node_modules --- 專案的依賴包
+ public --- 基本的頁面結構及靜態資源
+ src --- 工作區，開發環境
+ tests --- 測試
.browserslistrc --- 瀏覽器配置
.editorconfig --- 編輯器配置
.eslintrc --- 程式碼格式化配置
.gitignore --- git忽略的檔案配置
babel.config.js程式設計客棧 --- babel的配置
cypress.json --- 測試相關外掛
package.json --- 專案依賴的描述
README.md --- 說明檔案
2.src目錄
+ assets --- 靜態資源
+ components --- 元件
+ router --- 路由
+ store --- 狀態管理器
+ views --- 頁面
App.vue --- 主頁面結構
main.js --- 程式的入口
總結
到此這篇關於Vue腳手架學習之專案建立方式的文章就介紹到這了,更多相關Vue腳手架專案建立內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！