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,因为代码能力真的很强悍,后面会展示。
常用快捷键
Tab:自动填充
Ctrl+K:编辑代码
Ctrl+L:回答用户关于代码和整个项目的问题,也可以编辑代码(功能最全面)
Ctrl+i:编辑整个项目代码(跨文件编辑代码)
cursor编辑vue
运行vue
打开文件夹,找到你生成的vue项目
找到终端
输入命令
npm run serve
项目成功启动
使用cursor修改vue项目
接下来我让他完成一些任务,展示它的强大.
任务一:帮我把vue项目的端口改成8088
ctrl+c 终止vue项目, 重启一下项目
可以看到,确实已经改成了8088
任务二:帮我生成科研管理系统,使用elementui组件库,包含登录和注册界面
遇到问题直接发给cursor
提示我们没有安装路由和element-ui
我们结束vue项目,然后再去安装这两个依赖,如果npm下载不下来可以试试cnpm命令
安装完成后启动vue
可以看到,他完成任务了