Vue-cli3.0快速入门与配置详解

Vue CLI 3.0 是 Vue.js 的一个命令行工具，用于快速搭建 Vue.js 项目。相比于之前的版本，Vue CLI 3.0 提供了更快的初始化速度、更简洁的配置以及更强大的功能。以下是关于 Vue CLI 3.0 使用和配置的详细说明： ### 安装 Vue CLI 3.0 首先，确保全局安装 Vue CLI 3.0。在终端中运行以下命令： ```bash npm install -g @vue/cli ``` 或者使用 Yarn： ```bash yarn global add @vue/cli ``` 安装完成后，可以通过 `vue --version` 检查是否成功安装。 ### 创建项目 使用 `vue create` 命令创建一个新的项目，例如创建名为 `my-project` 的项目： ```bash vue create my-project ``` 在创建过程中，CLI 会提示你选择预设配置或手动选择特性。如果这是你第一次使用 3.0 版本，你可能只会看到手动选择特性的选项。这里建议选择手动配置，以便自定义项目设置。 ### 配置选择 在手动配置阶段，你可以选择以下特性： - **TypeScript**: 是否启用 TypeScript 支持。 - **Class-style components**: 是否使用类风格的组件语法。 - **Babel**: 是否使用 Babel 进行转义，以支持旧浏览器的 polyfill。 - **CSS Pre-processors**: 选择 CSS 预处理器，如 SCSS, Less 或 Stylus。 - **Linter/Formatter**: 选择代码风格检查器和格式化器，如 ESLint 或 Prettier。 - **Lint on save / lint and fix on commit**: 是否在保存或提交时执行代码检查。 - **Testing**: 选择 Unit 测试（Jest 或 Mocha）和 E2E 测试（Puppeteer 或 Cypress）框架。 根据需求选择相应的配置，然后确认选择。例如，如果你需要 TypeScript 和 Less，可以选择对应的选项。 ### 更深入的配置 - **CSS Pre-processor**: 在选择预处理器后，可以指定具体的语言，如 Less。 - **Code formatter**: 选择代码格式化工具，如 Prettier，它可以帮助保持代码的一致性。 - **Save config for future projects**: 如果希望保存当前配置，方便以后创建新项目时复用，可以选择保存配置。 - **Placement of config files**: 选择配置文件的位置，通常推荐将它们放在单独的文件中，而不是放在 `package.json` 中。 ### 后续步骤 项目创建完毕后，你可以进入项目目录并启动开发服务器： ```bash cd my-project npm run serve ``` 这将启动一个热重载的本地开发服务器。 ### 配置文件 Vue CLI 3.0 的配置文件通常位于项目的根目录下，包括 `vue.config.js`、`.eslintrc.js`、`.prettierrc.js` 等。在这些文件中，你可以自定义各种构建和开发选项，比如修改端口号、设置公共路径、添加额外的 webpack 配置等。 ### 总结 Vue CLI 3.0 提供了更加灵活和高效的项目初始化和配置方式，使得开发者能够快速搭建符合自己需求的 Vue 项目。通过了解并熟练运用这些配置，你可以更好地管理和优化你的 Vue 应用。