1. 開發環境
- 操作系統：windows 10 X64
- 軟件及版本：
- Node.JS 14.8.0
- npm 6.14.8
- @vue/cli 4.5.4
注：webpack 4.0+ 和 vue-cli 4.x 版本構建，需要 Node.js 8.9 或更高版本，相關知識可以自行進官網進行了解
2. 開始創建項目
@vue/cli 4.5.4 安裝成功后，如果想在D:\Code2Vue目錄下創建demo2項目，可以打開資源管理器，進入D:\Code2Vue目錄，然后在資源管理器地址欄上輸入cmd（此時打開的cmd窗口的打開的目錄就是D:\Code2Vue目錄，如下圖），在打開的cmd窗口模式下輸入下面的命令，啟動創建新項目：
# demo2 是項目名稱
vue creat demo2
注：vue creat命令在哪個目錄下運行vue在哪個目錄下創建目錄。
3. 創建項目方式
輸入vue creat命令后，顯示如下圖，可以選擇使用系統預先定好的模板還是手動選擇模塊方式來創建項目。
由於默認模板中選中的模塊較少，僅提供 babel 和 eslint 支持，所以我們選擇手動添加需要的配置。在下圖中使用鍵盤的上下鍵移動光標到:Manually select features（選中后，選項變藍色）。然后回車進入下一步。
4. 選擇項目中所需要的模塊
這里我們在默認的模塊基礎上增加Router、Vuex。用鍵盤的上下鍵移動光標，用空格鍵來選中所需要的模塊。選擇完畢后回車進入下一步。
Choose Vue version 選擇Vue版本
Babel 將es6 語法轉換成兼容的 js
TypeScript 支持使用 TypeScript 語法來編寫代碼
Progressive Web APP(PWA) Support PWA 支持
Router vue 路由配置插件
Vuex vue 程序狀態管理
CSS Pre-processors css 預處理
Linter / Formatter 代碼風格檢查和格式化
Unit Testing 單元測試
E2E Testing E2E 測試
創建項目后可以通過其他方式增加刪除模塊。
5. 選擇Vue.js版本
由於Vue 3還沒有正式發布，建議非嘗鮮項目暫時還是選擇 Vue 2.x。
6. 選擇是否使用歷史模式
在這里我們選擇使用Vue的歷史模式，切記創建項目后，需要對項目進行修改配置。具體修改方式見： 官方文檔
7. 選擇格式化代碼方式
一般選擇 ESlint + Prettier。
8. 選擇代碼規則檢測方式
一般會選擇保存就檢測 Lint on save。
9. 選擇Babel,PostCSS,ESLint配置存放的位置。
10. 選擇是否記錄當前項目配置
下次創建項目可直接使用當前配置方式。
11. 創建新項目
當上面選擇結束后，@vue/vli會自動下載相關模塊並自動生成相應文件及文件夾
當生成如下圖最下面的藍色字體表明項目創建成功。
12. 驗證
進入項目創建的新目錄，輸入下面命令：
npm run serve
瀏覽器地址欄輸入：localhost:8080，出現下圖則表示創建運行成功。
13. 關閉服務
在運行窗口下，連續按“Ctrl+V”，即可終止服務。
14. 項目目錄結構
新創建項目的目錄結構如下：
├── public # 靜態資源
│ ├── favicon.ico # favicon圖標
│ └── index.html # html模板
├── src # 源代碼
│ ├── components # 全局公用組件
│ ├── router # 路由
│ ├── store # 全局store管理
│ ├── views # views所有頁面
│ ├── App.vue # 入口頁面
│ ├── main.js # 入口文件 加載組件 初始化等
├── .borwserslistrc # 瀏覽器兼容相關
├── .env.xxx # 環境變量配置
├── .eslintrc.js # eslint 配置項
├── .gitignore # git忽略文件設置
├── .babel.config.js # babel-loader 配置
├── package.json # package.json
└── vue.config.js # vue-cli 配置
當需要自定義 webpack 相關配置的時候,需要在項目根目錄中創建vue.config.js文件，它會被@vue/cli-server自動加載，
配置內容見官網相關章節
作者：快樂隨行
出處：https://www.cnblogs.com/jddreams/p/13560691.html
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明原文作者及出處。