Vue框架学习(1:环境搭建)

  Vue.js 是用于构建用户界面的渐进式JavaScript框架,其核心关注视图层,采用声明式渲染和响应式数据绑定,让开发者只需描述数据与视图的关系,就能自动更新页面。Vue支持组件化开发,易于上手,也可以逐步集成到现有项目中,并借助Vue Router、Pinia等生态工具构建复杂应用。本文开始学习VUE的基本用法,同时后续找基于Vue+ASP.NET Core的前后端分离的项目源码学习。

  Vue.js目前版本为Vue 3,Vue 2已于2023.12.31日停止维护,最新版本的Vue (3.x)只支持原生支持ES2016的浏览器,且不支持IE11。Vue可以以一个单独 JS 文件的形式使用,也可以通过npm方式安装,后者需要安装或者升级nodejs到最新版本(已安装 ^22.18.0 || >=24.12.0 版本),可以在参考文献3中下载安装nodejs。

  安装vue分为全局安装及项目本地安装,前者安装到本机的npm目录下,使用npm list -g --depth=0命令可以查看安装版本,后者安装到当前项目下。如果需要卸载,将命令中的的install换为uninstall即可。项目开发时通常使用项目本地安装,每个项目可以独立选择Vue版本,不建议全局安装,以免不同项目之间因全局版本单一而互相干扰。

bash 复制代码
npm install vue       //项目本地安装
npm install  -g vue   // 全局安装

  同时Vue.js提供官方脚手架工具,可用于快速搭建由Vite构建的、预配置好的Vue 3应用。打开命令行,切换到工作文件夹,运行npm create vue@latest命令,会出现交互式的命令行向导,引导完成项目的初步配置,如下图所示。只需要根据提示选择项目名称和所需的功能特性,就会生成包含所有基础代码和配置的完整项目文件夹,省去了手动搭建的繁琐过程。

  根据命令行中的提示,运行npm install及npm run dev命令,即可启动项目,如下图所示。

参考文献:

1https://cn.vuejs.org/guide/quick-start.html

2https://www.bilibili.com/video/BV1VSaA6EE7E

3https://nodejs.org/zh-cn

相关推荐
我的div丢了肿么办6 小时前
element-plus表格使用:filter-method过滤导致出现无数据
前端·javascript·vue.js
贾公子7 小时前
AI 内容检测 API 接入实战——异步任务、幂等键与轮询的正确写法
vue.js
星光不问赶路人7 小时前
Vue 项目类型检查:深入理解 vue-tsc --build
前端·vue.js
WeiXin_DZbishe7 小时前
基于springboot装修风格选择系统的设计与开发-计算机毕设【课程设计】77964
java·vue.js·spring boot·后端·python·php·课程设计
雪碧聊技术8 小时前
Vue 一个页面中使用多个同类组件出现“串数据“现象?一个 key 就能解决
vue.js·v-show·一个页面使用多个相同组件·解决数据错乱·v-if、key
Java小卷11 小时前
Vue3 动态表单支持弹框组件
前端·vue.js·低代码
溪语流沙11 小时前
【Web全栈进阶】前端对接新契约:信封解包 + 统一错误处理
前端·vue.js·python·状态模式·fastapi
Q264336502311 小时前
【有源码】基于SpringBoot+Vue的居民健康体检与慢病干预管理系统-面向智慧医疗的体检预约与健康知识服务平台
java·vue.js·spring boot·mysql·毕业设计·javaweb·课程设计
雪芽蓝域zzs12 小时前
Vue导入方法三种方式对比
前端·javascript·vue.js