vue-cli3.0配置及使用注意事项详解

Vue-cli3.0是一个基于Vue.js进行快速开发的完整系统，它提供了从创建项目、配置到构建的全套解决方案。以下是从给定文件内容中提炼出的知识点： 1. Vue-cli3.0配置详解 在使用Vue-cli3.0创建项目时，系统提供了默认预设配置和用户自定义配置。用户在自定义配置完成后，系统会询问是否保存当前配置作为未来项目的预设值，这样用户在创建新项目时无需重新配置，提高了开发效率。 2. 新建项目流程 - 安装：首先需要通过npm安装Vue-cli3.0，使用命令`npm install -g @vue/cli`。 - 创建项目：使用`vue create my-project`命令创建新项目。 - 启动项目：使用`npm run serve`命令启动项目。 - 打包项目：使用`npm run build`命令对项目进行打包。 3. 功能配置 在创建项目的过程中，Vue-cli3.0允许用户选择以下功能： - Progressive Web App (PWA) Support：支持渐进式Web应用，可以提升应用的加载速度和可靠性。 - TypeScript：支持使用TypeScript语言进行开发，提高了代码的健壮性和可维护性。 - Router：内置Vue Router，用于构建单页面应用的路由管理。 - Vuex：提供状态管理，方便管理组件之间的数据流动。 - CSS Pre-processors：支持CSS预处理器，例如SASS、LESS等，便于CSS的模块化开发。 - Linter/Formatter：集成ESLint，对代码进行规范和格式化的检查。 - Unit Testing：内置对单元测试的支持，例如使用Jest等测试框架。 - E2E Testing：集成E2E测试，使用像Nightwatch这样的工具进行端到端测试。 4. 功能细节配置 - TypeScript：在选择了TypeScript后，系统会进一步询问更细节的配置，如是否使用class风格的组件语法，是否使用Babel做转译等。 - CSS Pre-processors：允许选择CSS预处理类型，并设置Linter/Formatter的规范类型和lint检查方式。 5. 自定义配置文件vue.config.js - baseUrl：项目的基本路径。 - outputDir：编译输出的文件目录，默认为"dist"。 - lintOnSave：是否在保存时使用eslint-loader进行代码检查，默认为true。 - compiler：是否使用包含编译器的完整构建版本。 - chainWebpack：链式配置Webpack。 - configureWebpack：自定义Webpack配置。 - vueLoader：vue-loader的配置项。 - productionSourceMap：生产环境下是否生成sourceMap文件，默认为true。 - css：css相关配置，包括是否提取css、sourceMap设置、css预处理器配置等。 - parallel：是否为babel&TS在生产构建中启用thread-loader，默认启用条件是机器核心数大于1。 - dll：是否启用dll。 6. 打包后的优化 Vue-cli3.0在打包后的文件中，对引用资源注入了预加载（preload/prefetch）技术，有利于资源加载的优化。同时，当启用PWA插件时，会注入manifest和icon链接，并引入webpack的runtime和chunkmanifest清单，以获得最佳的性能表现。 在掌握上述知识点的基础上，开发者可以更加高效地使用Vue-cli3.0进行Vue.js项目的创建、配置与构建工作。同时也需要注意，由于文档内容中某些部分可能由于扫描技术原因存在识别错误或遗漏，以上内容在使用时可能需要结合实际操作进行适当调整。