vue学完脚手架学什么

在学习完Vue CLI脚手架后，建议你重点关注以下几个方面：1、状态管理（Vuex）；2、路由管理（Vue Router）；3、组件库（如Element UI或Vuetify）；4、单元测试（Jest或Vue Test Utils）；5、服务端渲染（Nuxt.js）；6、性能优化；7、项目部署。这些知识点将帮助你更全面地掌握Vue.js，并能在实际项目中更高效地应用。

一、状态管理（Vuex）

在构建复杂的Vue应用时，管理应用的状态变得十分重要。Vuex是Vue.js官方提供的状态管理模式，主要用于集中式存储和管理应用的所有组件的状态。

集中式存储：Vuex提供了一个集中式的存储库，用于存储应用的所有状态，这样可以避免组件之间的状态传递。
单向数据流：通过Vuex管理状态，可以确保数据流的单向性，使得应用的状态变得更可预测。
调试工具：Vuex自带的调试工具可以帮助你更方便地追踪和调试状态的变化。

二、路由管理（Vue Router）

在单页应用（SPA）中，路由管理是一个非常关键的部分。Vue Router是Vue.js官方提供的路由管理库，它可以帮助你轻松地实现页面导航和路由管理。

声明式路由：通过声明式的方式定义路由，使得路由配置更加清晰和可维护。
动态路由：支持动态路由匹配，可以根据不同的参数加载不同的组件。
导航守卫：可以在导航过程中进行一些权限验证或其他操作，确保应用的安全性和正确性。

三、组件库（如Element UI或Vuetify）

为了提高开发效率和用户体验，使用成熟的组件库是一个不错的选择。Element UI和Vuetify是两个非常流行的Vue组件库，分别基于Element和Material Design设计规范。

丰富的组件：提供了大量常用的UI组件，如表单、按钮、对话框等，减少了重复造轮子的工作。
良好的文档：详细的文档和示例代码，可以帮助你快速上手和掌握每个组件的使用方法。
高可定制性：支持根据项目需求进行定制，满足各种不同的UI需求。

四、单元测试（Jest或Vue Test Utils）

单元测试是保证代码质量的重要手段之一。Jest和Vue Test Utils是Vue.js生态中常用的测试工具，它们可以帮助你编写和运行单元测试。

自动化测试：通过编写测试用例，可以自动化地验证代码的正确性，减少了手动测试的工作量。
回归测试：确保代码修改不会引入新的bug，提高代码的稳定性和可维护性。
测试覆盖率：可以生成测试覆盖率报告，帮助你了解哪些代码没有被测试到，进一步完善测试用例。

五、服务端渲染（Nuxt.js）

Nuxt.js是一个基于Vue.js的服务端渲染框架，可以帮助你构建高性能的服务端渲染应用。

SEO优化：通过服务端渲染，可以提高搜索引擎的抓取和索引效率，提升SEO效果。
性能优化：服务端渲染可以减少客户端的渲染时间，提高页面的加载速度和用户体验。
开发体验：Nuxt.js提供了许多开发工具和最佳实践，使得开发和部署服务端渲染应用更加方便和高效。

六、性能优化

性能优化是构建高质量Web应用的关键。以下是一些常用的性能优化技巧：

懒加载：通过懒加载技术，按需加载组件和资源，减少初始加载时间。
代码分割：将应用代码拆分成多个小模块，按需加载，减少单个文件的体积。
缓存：利用浏览器缓存和服务端缓存，提高资源的加载速度和命中率。
优化图片：压缩和裁剪图片，减少图片的体积，提高页面的加载速度。

七、项目部署

将开发好的项目部署到生产环境是最后一步。以下是一些常见的部署方式：

静态托管：将静态文件部署到静态托管服务，如GitHub Pages、Netlify等。
云服务：利用云服务平台，如AWS、Azure、Google Cloud等，部署和管理项目。
容器化部署：使用Docker等容器技术，将应用打包成容器，方便部署和管理。

总结来说，学习完Vue CLI脚手架后，进一步学习状态管理、路由管理、组件库、单元测试、服务端渲染、性能优化和项目部署，将帮助你更全面地掌握Vue.js，并能在实际项目中更高效地应用。建议你在学习过程中，多动手实践，结合实际项目进行应用，加深对这些知识点的理解和掌握。