入门指南：Vue的安装配置和开发环境设置

背景：

这里想讲一讲为什么使用框架，而不使用原生的HTML、CSS、JavaScript写。原生开发虽然灵活，但在大型项目中可能导致代码重复、维护困难等问题，不符合软件工程的"高内聚低耦合"原则。例如，如果每个页面都需要编写导航，那么每个页面都需要复制相同的导航代码，当导航需要修改时，必须在每个页面都进行修改，这既繁琐又容易出错。为了解决这些问题，前端出现了诸如Vue、React以及Python的Web框架Flask、Django等，这些框架利于后期开发和维护，符合当前主流的软件工程思想。它们提供了组件化和模块化的开发方式，可以减少重复代码，提高开发效率，同时也更易于维护和扩展。通过使用这些框架，开发人员可以更好地遵循软件工程的最佳实践，从而构建出高质量、可维护的前端应用程序。

vue简介：

Vue是前端优秀框架，是一套用于构建用户界面的渐进式框架

官方文档：

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue具有以下特点：

响应式：Vue使用双向数据绑定和虚拟DOM来实现响应式更新，当数据发生变化时，视图会自动更新。
组件化：Vue将应用程序拆分为可重用的组件，每个组件具有自己的逻辑和视图，可以通过组合组件来构建复杂的用户界面。
模板语法：Vue使用类似HTML的模板语法，可以将模板与组件的数据进行绑定，以便动态生成视图。
生命周期钩子：Vue提供了一系列的生命周期钩子函数，可以在组件的不同阶段执行特定的操作，例如在组件创建、更新或销毁时执行相应的代码。
插件系统：Vue具有丰富的插件生态系统，可以通过插件扩展Vue的功能，例如路由管理、状态管理等。
虚拟DOM：Vue使用虚拟DOM来提高性能，通过比较虚拟DOM树的差异来最小化实际DOM操作的次数，从而提高页面渲染效率。

安装配置：

查看node版本：

复制代码

node -v

安装vue3：

复制代码

npm install @vue/cli -g

查看当前vue版本：

复制代码

vue -V
vue --version

安装webpack：

复制代码

cnpm install [email protected] -g
cnpm install webpack-cli -g

创建项目

复制代码

vue create hello-vue
npm init vue@latest (新创建方式 相当于上个面那个)

复制代码

  cd vue_cs
  npm install/ cnpm install 
  npm run dev

运行项目：

复制代码

npm run serve

开发环境：

vscode+volar插件