初识Vue

Vue (发音为 /vju:/,类似 view)是一款用于构建用户界面的JavaScript 框架。它基于标准 HTML、CSS 和JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

Vue 是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点,Vue 的设计非常注重灵活性和"可以被逐步集成"这个特点。

vue 开发准备

构建工具让我们能使用 Vue 单文件组件 (SFC)。Vue 官方的构建流程是基于 Vite 的,一个现代、轻量、极速的构建工具 。

1.创建项目

利用快捷键 win+R 输入cmd 进入命令行

在命令行中输入:npm init vue@latest 来创建项目(要求node.js版本大于15.0)

复制代码
npm init vue@latest

在命令行输入后会出现创建项目名称提示

在"请输入项目名称:"后输入你的项目名称(以vue-***的格式书写,不能有大写字母)。

输入项目名称后会出现提示是否开启某个功能,初期可以全部点否。

提示全部点击完了后,需要在创建的vue项目文件下输入npm inatall 来下载项目

复制代码
npm install

下载成功后,可以输入npm run dev来运行项目。

复制代码
npm run dev

运行成功后会出现以下信息

可以在浏览器上粘贴Local后面的值来访问运行页面。

注意:如果是利用VScode 开发的话需要下载名叫Vue - Official 的插件

相关推荐
恋猫de小郭2 小时前
Flutter 3.35 发布,快来看看有什么更新吧
android·前端·flutter
chinahcp20083 小时前
CSS保持元素宽高比,固定元素宽高比
前端·css·html·css3·html5
gnip4 小时前
浏览器跨标签页通信方案详解
前端·javascript
gnip5 小时前
运行时模块批量导入
前端·javascript
hyy27952276845 小时前
企业级WEB应用服务器TOMCAT
java·前端·tomcat
逆风优雅5 小时前
vue实现模拟 ai 对话功能
前端·javascript·html
若梦plus6 小时前
http基于websocket协议通信分析
前端·网络协议
不羁。。6 小时前
【web站点安全开发】任务3:网页开发的骨架HTML与美容术CSS
前端·css·html
这是个栗子6 小时前
【问题解决】Vue调试工具Vue Devtools插件安装后不显示
前端·javascript·vue.js
姑苏洛言6 小时前
待办事项小程序开发
前端·javascript