快速了解vue-cli 3.0 新特性

vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。 vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了，但是不可能在本文中列举所有的内容，这篇文章作为一个对比 2.0 升级功能的导读，让你快速了解 3.0 更新的内容。 一.创建项目： 创建项目命令的变化。 vue create my-project 3.0 版本包括默认预设配置 和 用户自定义配置。 自定义功能配置包括以下功能： TypeScript Progressive Web App (PWA) Support Router V Vue CLI 3.0 是 Vue 官方团队推出的重大更新，带来了许多改进和新特性，旨在简化 Vue 项目的构建过程并提升开发效率。相比于 2.0 版本，3.0 引入了更多开箱即用的功能，并优化了用户体验。 创建项目时的命令发生了变化。在 3.0 版本中，使用 `vue create` 命令创建项目，可以选取默认预设配置或进行用户自定义配置。这些自定义选项包括： 1. **TypeScript** - 支持使用 TypeScript 进行类型检查，提高代码质量。 2. **Progressive Web App (PWA) Support** - 提供 PWA 支持，帮助开发者构建离线优先的应用。 3. **Router** - 集成 Vue Router，方便管理应用的路由。 4. **Vuex** - 集成 Vuex，便于状态管理。 5. **CSS Pre-processors** - 选择 SCSS/SASS、LESS 或 Stylus 等 CSS 预处理器。 6. **Linter / Formatter** - 配置 ESLint 和代码格式化工具，如 Airbnb、Standard 或 Prettier。 7. **Unit Testing** - 添加单元测试框架，如 Jest。 8. **E2E Testing** - 支持端到端测试，如 Cypress。 在创建项目过程中，用户可以选择保存配置为预设，方便后续项目快速使用相同设置。 3.0 版本的项目目录结构有所调整。主要改动包括： 1. 移除了 `config` 和 `build` 文件夹，减少不必要的配置文件，使得项目结构更加简洁。 2. 删除了 `static` 文件夹，取而代之的是新的 `public` 文件夹，其中包含 `index.html` 文件，这样可以更直观地管理静态资源。 3. 在 `src` 文件夹中新增了 `views` 文件夹，用于区分视图组件和公共组件，增强了代码组织性。 此外，Vue CLI 3.0 通过移除配置文件目录，引入了一个名为 `vue.config.js` 的新文件，用于自定义项目配置。开发者可以在这个文件中导出一个对象，配置包括但不限于基础 URL (`baseUrl`)、输出目录 (`outputDir`)、是否开启 lint-on-save 等。同时，还可以通过 `configureWebpack` 和 `chainWebpack` 选项来调整内部的 webpack 配置，添加自定义插件或修改现有插件的参数。`chainWebpack` 选项利用 webpack-chain 库，提供了更灵活且安全的方式来修改配置，虽然需要对 webpack-chain API 有一定了解。 Vue CLI 3.0 的新特性显著提升了开发者的生产力，简化了配置流程，增强了项目的可维护性。无论是 TypeScript 的支持，还是 PWA 功能的集成，都展示了 Vue 社区对现代前端开发趋势的积极响应。同时，自定义配置的便利性和项目结构的优化，使得开发者能够更加专注于实际的开发工作，减少了与构建工具的交互成本。