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

背景:

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

vue简介:

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

官方文档:

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

Vue具有以下特点:

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

安装配置:

查看node版本:

复制代码
node -v

安装vue3:

复制代码
npm install @vue/cli -g

查看当前vue版本:

复制代码
vue -V
vue --version

安装webpack:

复制代码
cnpm install webpack@4.42.0 -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插件

相关推荐
库拉镜像AI牛牛9 分钟前
短剧内容自动化生产:知漫剧工作室落地教程
大数据·服务器·前端·人工智能·语音识别
律宏阔11 分钟前
Flutter 列表图片内存优化:CachedNetworkImage 与 ClipRRect 的取舍
前端·flutter
行者全栈架构师11 分钟前
【鸿蒙心迹】相册文搜图工程化落地:HarmonyOS 7.0 端侧 AI 检索全链路实战与 5 个踩坑解法
前端
律宏阔21 分钟前
Dart 3 Record:解决 Future.wait 异构返回值的类型问题
前端·flutter
Seraphina3631 分钟前
DVWA(XSS Reflected/Stored High,CSRF Low)
前端·xss·csrf
默_笙1 小时前
🍔 中间件不只是打日志:四个钩子、一次短路,和自带的工具
前端·javascript
程序员老赵2 小时前
Docker 部署 Dolibarr:轻松搭建开源 ERP/CRM 平台
运维·前端·后端
星禾元亨2 小时前
同一件事有三份资料,AI 该信哪一份?冲突判定、优先级链与处置流程
前端·人工智能
Dovis(誓平步青云)2 小时前
家里设备越来越多,如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑
穆梓兰煊2 小时前
TS5.7 vs 裸JS:AI应用少3坑
前端