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

相关推荐
FlyWIHTSKY1 天前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
ruanno_top2 天前
能点,但 Tab 不到:两个组件把「可操作」做了一半
vue.js
爱吃烧烤的技术渣2 天前
别再手写 CRUD 了:我把 Element Plus 的工作量压缩成一份列 schema
前端·vue.js
徐小夕2 天前
万字长文!DeepSeek Super-agent × 企业知识库架构深度拆解与落地实践
前端·vue.js·github
ruanno_top3 天前
倒计时该用 deadline 还是每秒减一?我把两种写法都跑了一遍
vue.js
徐小夕3 天前
下载量超 30 万的开源智能体 Prime Agent:它把自己从 TypeScript 重写成了 Rust
前端·vue.js·github
toooooop83 天前
CRMEB 故障排查笔记:安全网关只放行 GET/POST 怎么办
前端·javascript·vue.js·thinkphp6·crmeb
软件技术NINI3 天前
基于SpringBoot和Vue的项目评审系统
javascript·vue.js·spring boot·后端·spring·毕业设计·毕设
FRing033 天前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
Java小卷3 天前
JuanForm vs FormCreate!Vue3 表单引擎联动配置 PK!
vue.js·低代码