一、什么是腳手架？
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輸入指令，進行全局環境下載（建議下載全局）
|
1
|
npm install -g @vue/cli |
4.下載好以后查看版本指令
|
1
|
vue --version |
5.升級版本
|
1
|
npm update -g @vue/cli |
二、項目創建
創建項目
|
1
|
vue create myapp |
根據提示做各項選擇
步驟一：選擇安裝方式 - 自定義安裝
Default ([Vue 2] babel, eslint)
Default (Vue 3 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
步驟七：選擇測試模塊：任選
步驟八：端對端測試方案：默認
步驟九：項目的配置文件
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腳手架項目創建內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/qq_38980678/article/details/114572121
