跳到主要内容

二、Vue 开发前端的准备

2.0 Vue 官网

2.1 安装 Vue 工具

Vue.js开发的标准工具,Vue CLI是一个基于Vue.js进行快速开发的完整系统

npm install -g @vue/cli
cmd

验证是否安装成功

vue --version
cmd

2.2 VScode: 创建第一个 Vue 项目

##container##
Clip_2024-06-23_22-41-50.png

运行以下命令来创建一个新项目, 只能使用小写, 可以多个-连接

vue create vue-demo
cmd

Tip

温馨提示

在控制台中,可以用上下按键调整选择项 在控制台中,可以用空格(spacebar)选择是否选中和取消选中

可以选择默认项目模板,或者选"手动选择特性"来选取需要的特性。

##container##
Clip_2024-06-23_22-50-52.png ##w700##

2.3 运行项目

  • 第一步: 进入项目根目录cd vue-demo

  • 第二步: 运行npm run serve启动项目

大功告成:

##container##
Clip_2024-06-23_22-55-16.png ##w700##

2.4 安装Vue高亮插件

VSCode中安装vetur或者volar都可,前者针对Vue2版本,后者针对Vue3版本 (反正找个下载多的/或者你打开文件就会提示你安装相关插件了)

请作者喝奶茶:
Alipay IconQR Code
Alipay IconQR Code
本文遵循 CC CC 4.0 BY-SA 版权协议, 转载请标明出处
Loading Comments...