使用Visual Studio Code 导入并运行vue项目

一、安装并配置node.js

详见CSDN

查看node版本:

二、修改编辑器的语言(切换为中文)

打开VSCode, 快键键Ctrl+Shift+P ,搜索 Configure Display Language,选择安装其他语言,安装完成选择zh-cn,重启就变成中文了。

 三、vue插件的安装(方便开发)(Ctrl+shift+X)

eslint插件:eslint智能错误检测插件,在具体开发中作用很大,能够及时的帮我们发现错误。

Auto Close Tag 自动闭合HTML/XML标签

Auto Rename Tag 自动完成另一侧标签的同步修改

四、打开vue项目

文件右键,打开文件夹,然后导入项目

  打开控制台(Ctrl+shift+Y),选择终端,在控制台终端输入npm install添加包依赖 ,可能会出现报错,如下。

可能是环境变量有问题,解决办法如下:

1.首先看自己的有没有安装cnpm(查看命令: npm list --depath=0 -g),我本地是已经安装了的

  2.如果没有我们就安装cnpm(查看命令:npm i cnpm -g)

 3.如果安装成功还是报错请看自己的安装路径 (查看命令:npm config get prefix)

  4.我们再打开我的电脑(右键)->属性->高级->环境配置->添加自己的npm安装路径 ,就是以上第3步获取的路径,一路确定即可

   5.重启VSCode,重新进去终端指令窗口执行 npm install

  五:同样在终于执行npm run dev代表开始运行项目,这条命令会自动在浏览器上运行项目,运行结果如下图所示,代表配置成功了。

 六:输入地址 http://127.0.0.1:5173/,运行结果如下:

 完结!若有问题,欢迎指正!!!

### 如何在VSCode运行Vue项目 为了在Visual Studio Code (VSCode) 中成功启动运行一个Vue项目,确保环境配置得当至关重要。这不仅涉及安装必要的依赖包,还涉及到利用合适的工具来简化开发流程。 #### 安装Node.js和npm 由于Vue CLI和其他许多构建工具都是基于Node.js的,因此首先需要确认计算机上已经安装了最新版本的Node.js以及附带的npm(Node Package Manager)[^1]。 #### 创建新的Vue项目或打开现有项目 如果要创建一个新的Vue应用,则可以借助`@vue/cli`命令行工具快速搭建基础结构;对于已有项目而言,在VSCode内通过文件菜单选择打开文件夹即可加载整个工程[^1]。 #### 使用终端执行必要指令 一旦项目被正确导入编辑器当中之后,就可以切换至集成终端(Integrated Terminal),依次输入如下所示的关键命令完成后续操作: ```bash # 更新本地模块缓存 npm install # 启动本地服务器,默认监听8080端口 npm run serve ``` 上述过程会自动编译源码,开启热重载功能以便于实时预览更改效果[^2]。 #### 配置launch.json支持调试模式 为了让开发者能够更方便地排查错误信息,可以在`.vscode/launch.json`里添加特定设置项实现断点跟踪等功能。下面给出了一种常见的配置方案供参考: ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/*" } } ] } ``` 此部分设定允许用户直接从浏览器内部触发断点机制,从而提高效率[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值