vue-cli 官方文檔：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create **** 下面演示創建項目`learn-vue3-cli`，步驟如下： **1. 安裝或升級`vue-cli`** ```shell ## 安裝或升級vue-cli > npm install -g @vue/cli ## 保證 vue-cli 版本在 4.5.0 及以上 > vue --version @vue/cli 5.0.3 ``` **2. 創建項目** ```shell ## 創建項目 learn-vue3-cli > vue create learn-vue3-cli ## 然后根據提示按照如下步驟走 * Please pick a preset - 選擇 Manually select features * Check the features needed for your project - 選擇上 TypeScript ，特別注意【點空格是選擇，點回車是下一步】 * Choose a version of Vue.js that you want to start the project with - 選擇 3.x (Preview) * Use class-style component syntax - 直接回車 * Use Babel alongside TypeScript - 直接回車 * Pick a linter / formatter config - 直接回車 * Use history mode for router? - 直接回車 * Pick a linter / formatter config - 直接回車 * Pick additional lint features - 直接回車 * Where do you prefer placing config for Babel, ESLint, etc.? - 直接回車 * Save this as a preset for future projects? - 直接回車 ``` **3. 啟動項目** ```shell > cd learn-vue3-cli > npm install > npm run serve ``` 訪問 http://localhost:8080 看到下面頁面說明項目創建并啟動成功了。  **4. 創建好項目后，默認的項目結構如下** ``` |—— projectName | |—— node_modules #npm加載的項目依賴模塊 | |—— public #公共資源目錄 | | |—— favicon.ico | | |—— index.html #首頁入口文件，你可以添加一些 meta 信息或統計代碼啥的 | |—— src #我們要開發的目錄，基本上要做的事情都在這個目錄里 | | |—— assets #放置一些圖片，如logo等 | | | |—— logo.png | | |—— components #目錄里面放了一個組件文件，可以不用 | | | |—— HelloWorld.vue | | |—— App.vue #項目入口文件 | | |—— main.ts #項目的核心文件 | | |—— shims-vue.ts | |—— .browserslistrc | |—— .eslintrc.js | |—— .gitignore | |—— .babel.config.js | |—— package.json #項目配置文件 | |—— README.md #項目的說明文檔，markdown 格式 | |—— tsconfig.json | |—— vue.config.js | |—— yarn.lock ```