Vue CLI（Vue.js 的命令行工具）是 Vue.js 项目的标准构建工具，它提供了从项目初始化、开发到构建部署的一整套流程支持。以下是 Vue CLI 的基本使用方法： ### 一、安装 Vue CLI 在开始之前，请确保你的计算机上已安装了 Node.js 和 npm（Node.js 的包管理工具）。Vue CLI 的安装通过 npm 进行。 1. **全局安装 Vue CLI** 如果你之前安装过旧版本的 vue-cli（1.x 或 2.x），可能需要先卸载它，使用以下命令之一： ```bash npm uninstall vue-cli -g # 或者 yarn global remove vue-cli ``` 然后，安装 Vue CLI 3.x 或更高版本（Vue CLI 3 的包名称由 vue-cli 改成了 @vue/cli）： ```bash npm install -g @vue/cli # 或者 yarn global add @vue/cli ``` 安装完成后，你可以通过运行 `vue --version` 或 `vue -V` 来检查 Vue CLI 是否正确安装以及安装的版本。 ### 二、创建新项目 1. **使用 vue create 命令** 在命令行中，导航到你希望创建项目的目录，然后运行以下命令： ```bash vue create ``` 将 `` 替换为你希望的项目名称（注意文件名不支持驼峰命名，即不要包含大写字母）。 2. **选择预设或手动配置** 创建过程中，Vue CLI 会提示你选择一个预设（preset）或手动配置项目。预设是之前保存的项目配置模板，如果没有预设配置，你可以选择默认的 `default (babel, eslint)` 预设，或者选择 `Manually select features` 进行手动配置。 在手动配置中，你可以根据需要选择 Babel、TypeScript、Router、Vuex、CSS 预处理器、Linter/Formatter、单元测试等特性。 3. **完成创建** 选择完所有需要的特性和配置后，Vue CLI 会自动创建项目并安装依赖。创建完成后，你可以通过命令行进入项目目录，并启动开发服务器： ```bash cd npm run serve ``` 这将启动一个热重载的本地开发服务器，并在控制台中显示项目的本地访问地址。 ### 三、项目结构与开发 Vue CLI 创建的项目通常包含以下结构和文件： - **public/**：公共静态资源目录，如 `index.html` 入口文件。 - **src/**：源码目录，包含项目的所有源代码。 - **assets/**：资源目录，如图片、字体等。 - **components/**：Vue 组件目录。 - **router/**：Vue Router 路由配置文件目录。 - **store/**：Vuex 状态管理目录（如果项目中使用了 Vuex）。 - **views/**：页面组件目录（通常用于单页面应用）。 - **App.vue**：根组件。 - **main.js**：入口 JS 文件。 - **babel.config.js**：Babel 配置文件。 - **package.json**：项目基本信息和脚本配置。 - **vue.config.js**（可选）：Vue CLI 配置文件，用于自定义项目的构建和开发设置。 ### 四、开发与构建 在开发过程中，你可以使用 Vue CLI 提供的开发服务器进行热重载开发。当项目开发完成并准备部署时，你可以使用 `npm run build` 命令来构建生产版本的项目。构建完成后，生产版本的文件将生成在 `dist/` 目录中，你可以将这个目录部署到服务器上。 ### 五、注意事项 - 确保 Node.js 和 npm/yarn 的版本与 Vue CLI 的要求相匹配。 - 在创建项目时，根据项目的实际需求选择合适的预设或手动配置。 - 在开发过程中，注意遵循 Vue.js 和所选技术的最佳实践。 - 遇到问题时，可以参考 Vue CLI 的官方文档或社区资源。