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 ```