cursor从0开始搭建并运行vue项目

vue项目搭建教程

安装node.js包管理工具–> nvm

nvm(Node Version Manager)是一个用于管理Node.js版本的工具,也可以用来管理npm等相关工具的版本,通过它可以方便地切换Node.js版本。

在 Linux 或 macOS 上安装 nvm

  1. 安装或更新 curl:
    打开终端,运行以下命令来安装或更新 curl:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

或者,如果你使用的是 wget,可以使用:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  1. 关闭并重新打开终端:
    安装完成后,你需要关闭并重新打开终端,以便 nvm 命令可以被识别。
  2. 验证安装:
    输入以下命令来检查 nvm 是否安装成功:
nvm --version

在 Windows 上安装 nvm

  1. 下载 nvm for Windows:
    访问 nvm-windows的 GitHub 页面,下载最新版本的安装程序。
    在这里插入图片描述

  2. 运行安装程序:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  3. 验证安装:
    打开命令提示符或 PowerShell,输入以下命令来检查 nvm 是否安装成功

nvm version

在这里插入图片描述

使用nvm安装node.js

安装完 nvm 后,你可以使用以下命令来安装 Node.js 的特定版本:

nvm install 16.14.2 # 安装特定版本的 Node.js 推荐使用这种
nvm install node # 安装最新版本的 Node.js

切换到特定版本的 Node.js:

nvm use 16.14.2 # 切换到版本 14.17.0

列出所有已安装的 Node.js 版本:

nvm list

在这里插入图片描述

安装vue-cli

Vue CLI 是用于快速搭建 Vue.js 单页面应用的脚手架工具.
对于脚手架的解释就是,它能帮助开发者快速搭建项目的基本框架。这包括创建标准的目录结构(如存放组件的文件夹、放置样式的文件夹等),配置好开发环境所需的基本设置(如 Webpack 等构建工具的配置),还可以自动引入一些必要的库和插件。这样一来,开发者无需从头开始构建这些基础部分,能够把精力集中在业务逻辑和功能开发上,大大提高开发效率。
这里注意:安装vue-cli对node.js的版本是有要求的
在这里插入图片描述

npm install -g @vue/cli //这个是从国外下载的比较慢
cnpm install -g @vue/cli //这个是从镜像源下载

如果提示cnpm未安装,可以通过命令安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

在这里插入图片描述
在这里插入图片描述
通过命令查看是否安装成功

vue --version

在这里插入图片描述

创建vue项目

新建存放工程项目的文件,输入cmd 打开终端
在这里插入图片描述
在这里插入图片描述
通过命令创建vue项目

vue create vue01

在这里插入图片描述
这里我们可以直接使用模版创建vue2项目 Default ([Vue 2] babel, eslint)
在这里插入图片描述
如果需要自定义的vue项目的同学,可以参考这篇文章
在这里插入图片描述
到这一步我们就建好了vue项目
之后启动项目只需要输入

npm run serve

cursor下载与安装

cursor直接在官网下载安装即可,并且注册账号,在第一次打开cursor时输入账号信息即可。

下载地址

在注册完成后,你会有一个专属账号,每个账号的模型调用次数是有限的,其中GPT4和Claude3.5的免费调用次数为500次,其它比较弱的模型的调用次数无上限

cursor使用

安装好后,点击最上面的框,输入>language,可以配置简体中文。
在这里插入图片描述
cursor内置了很多LLMs,包括最先进的GPT4s、Claude3.5s和openai最新发布的推理模型o1-preview和o1-mini,在右上角的设置中即可打开相应的模型进行辅助编程。平时用的最多的还是Claude3.5和GPT4,因为代码能力真的很强悍,后面会展示。
在这里插入图片描述
在这里插入图片描述

常用快捷键

Tab:自动填充
Ctrl+K:编辑代码
Ctrl+L:回答用户关于代码和整个项目的问题,也可以编辑代码(功能最全面)
Ctrl+i:编辑整个项目代码(跨文件编辑代码)

cursor编辑vue

运行vue

打开文件夹,找到你生成的vue项目
在这里插入图片描述

找到终端
在这里插入图片描述
输入命令

npm run serve

项目成功启动
在这里插入图片描述

在这里插入图片描述

使用cursor修改vue项目

接下来我让他完成一些任务,展示它的强大.

任务一:帮我把vue项目的端口改成8088

在这里插入图片描述

在这里插入图片描述
ctrl+c 终止vue项目, 重启一下项目
3.png)
可以看到,确实已经改成了8088

任务二:帮我生成科研管理系统,使用elementui组件库,包含登录和注册界面

遇到问题直接发给cursor
在这里插入图片描述

在这里插入图片描述
提示我们没有安装路由和element-ui
我们结束vue项目,然后再去安装这两个依赖,如果npm下载不下来可以试试cnpm命令
在这里插入图片描述
在这里插入图片描述
安装完成后启动vue
在这里插入图片描述
可以看到,他完成任务了
在这里插入图片描述
在这里插入图片描述

任务三:添加 项目管理,论文管理,成果统计,个人信息管理模块

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值