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

最新推荐文章于 2025-04-24 09:52:40 发布

夜已深w

最新推荐文章于 2025-04-24 09:52:40 发布

阅读量7.1k

点赞数 32

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_46680395/article/details/144680740

版权

vue项目搭建教程

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

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

在 Linux 或 macOS 上安装 nvm

安装或更新 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

关闭并重新打开终端：
安装完成后，你需要关闭并重新打开终端，以便 nvm 命令可以被识别。
验证安装：
输入以下命令来检查 nvm 是否安装成功：

nvm --version

在 Windows 上安装 nvm

下载 nvm for Windows：
访问 nvm-windows的 GitHub 页面，下载最新版本的安装程序。
运行安装程序：
验证安装：
打开命令提示符或 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，因为代码能力真的很强悍，后面会展示。
在这里插入图片描述