使用vscode运行Vue项目

已于 2022-12-16 10:17:56 修改
阅读量2.7w 收藏 203
点赞数 20
文章标签： vue.js vscode 前端
于 2022-08-31 14:42:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/someday____/article/details/126623381
版权

目标

使用vscode运行别人工程里的vue项目

工作

  1. 安装node

  2. 检查安装情况：打开cmd，依次输入node -v 和 npm -v，查看到版本号，则安装成功。

  3. 用vscode打开vue项目

  4. 使用快捷键Ctrl+shift+Y呼出控制台，在控制台点击终端输入npm install 或者 npm i 添加包依赖。
    在这里插入图片描述
    运行结果如下所示：
    在这里插入图片描述

  5. 最后执行npm run dev代表开始运行项目，这条命令会自动在浏览器上运行项目，运行结果如下图所示，代表配置成功了。
    在这里插入图片描述

  6. 点击(ctrl+点击)网址http://localhost:80/，可得运行结果

_Shanene
关注
使用VSCode配置Vue项目
HackCyberX的博客
09-26 1550
在VSCode中配置Vue项目可以提供一个方便的开发环境，让开发者可以更轻松地编写和调试Vue应用程序。你可以使用Vue CLI创建项目，使用VSCode进行开发和调试，并根据需要扩展和修改Vue组件。你可以在VSCode中的文件资源管理器中导航到Vue项目的源代码文件（通常位于"src"文件夹中），并开始编辑和编程。完成后，Vue CLI将在当前文件夹中创建一个名为"my-vue-app"的新项目。在VSCode的终端中，确保你的当前工作目录是Vue项目的根目录（"my-vue-app"文件夹）。
VS code上创建Vue项目详细化教程1-配置VScode与Vue
Charles_Clark的博客
06-06 5462
VS code上创建Vue项目详细化教程1-配置VScode与Vue
简单上手入门级创建vue项目，vscode打开vue项目，vue使用element-ui组件
weixin_48128217的博客
03-25 2987
如果运行有报错则将 packeage.json下的 "@vue/cli-plugin-eslint": "~5.0.0",删除。等待完成后再次进入创建好的文件vue01，输入npm run serve开始运行。然后cd到vue01目录下npm run serve运行。然后打开 http://localhost:8080/在D盘创建文件vs，在vs下创建vuedemo。输入以上命令进入到vuedemo创建vue01。点击文件，选择打开文件夹，打开刚刚创建的项目。快捷键ctrl+c终止批处理操作。
在 VSCode 中运行 Vue.js 项目
最新发布
Nicky's blog
05-16 1467
本文详细介绍了如何在 VSCode 中运行 Vue.js 项目。首先，需要安装 Node.js 和 Vue CLI，并确保 VSCode 已安装。接着，通过 Vue CLI 创建新项目，并安装项目依赖。在 VSCode 中打开项目后，安装推荐的插件以提升开发体验。最后，通过 npm run serve 启动开发服务器，并在浏览器中访问项目。文章还提到项目调试和自动刷新的功能，帮助开发者更高效地进行前端开发。通过本文的步骤，读者可以轻松在 VSCode 中运行和调试 Vue.js 项目。
新手起步指南：VSCode与Vue项目的安装与运行
weixin_35390379的博客
04-29 1380
简介：本手册为前端开发新手提供了一份详细的指南，涵盖了安装Visual Studio Code编辑器、配置Vue项目支持、安装Node.js环境、获取Vue项目代码以及启动和运行Vue项目的整个过程。通过本指南，新手可以快速掌握Vue.js框架的开发入门，以及如何利用VSCode进行高效的前端开发。
详解VSCode配置启动Vue项目
01-21
下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。 1、vetur插件的安装 该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选项->设置 打开设置界面，在设置界面右侧添加配置 emmet.syntaxProfiles: { vue-html: html, vue: html } 2、eslint插件的安装 eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗
VS code运行vue项目
各类程序设计成品、文档、学习资料
10-25 2万+
请注意，以上步骤假设您的Vue项目已经配置好了相应的构建脚本（如package.json中的"scripts"字段）。命令时出现"无法将'npm'项识别为cmdlet、函数、脚本文件或可运行程序的名称"的错误消息，这可能是因为您的计算机上没有正确安装Node.js和npm，或者系统环境变量配置不正确。2.在VS Code的侧边栏中，选择您的Vue项目文件夹，或者使用菜单中的“文件”->“打开文件夹”选项来打开项目文件夹。3.打开终端（菜单中的“视图”->“终端”），确保终端位于您的Vue项目文件夹下。
VSCode打开已有vuejs项目
Yoryky的专栏
10-19 5万+
今天公司培训使用VSCode来编写vuejs项目，拿了一个范例来展示，讲的比较快，没怎么听清楚。于是下来自己动手配置一下。下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。1、vetur插件的安装该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选
vscode运行vue项目
代上老码的专栏
04-08 7313
通过以上步骤，你应该能够在VSCode中成功运行和开发Vue项目。记得利用VSCode的扩展市场来安装一些有用的扩展，比如Vetur或Volar，它们可以提供语法高亮、代码片段、格式化和Linting等功能，以提高你的开发效率。： 在VSCode中，打开项目根目录后，你会看到一个提示，要求你安装项目依赖。： 使用VSCode打开你的Vue项目。你可以通过VSCode的“文件”菜单选择“打开文件夹...”，然后导航到你的Vue项目目录。默认情况下，你的Vue应用将在。，你应该能够看到你的Vue项目正在运行。
VSCode搭建Vue项目的方法
10-15
VSCode搭建Vue项目的知识点: 一、基础知识准备 ...以上内容整合了VSCode搭建Vue项目的详细步骤、必备知识、实践方法与进阶学习方向，希望对有志于使用VSCode开发Vue项目的开发者提供有价值的参考和指导。
VSCode搭建Vue Element Admin的项目环境
04-11
### VSCode搭建Vue Element Admin的项目环境 #### 版本说明 - **Node**: v18.20.2 - **NPM**: 10.5.0 - **Git**: 2.19.1 - **Vue Element Admin**: [官网链接]...
vs code怎么启动一个vue项目
还在活水泥的未来包工头
10-27 3629
请注意，上述步骤假设你已经正确配置了 Vue CLI，并且在项目目录中有一个有效的 package.json 文件。要在 VS Code 中启动一个 Vue 项目，你需要先确保已经安装了 Node.js 和 Vue CLI。这样，你就能够使用 vue 命令来创建和管理 Vue 项目了。现在，你应该能够在浏览器中看到你的 Vue 项目正在运行。
VSCode如何运行Vue项目
m0_46627730的博客
11-10 1万+
前言 以前都是用webstorm编写前端代码，最近开始尝试使用VSCode来写，目前还是有些懵逼的，一步步将使用流程写下来便于之后自己再次配置。 具体流程： 1：首先还是需要我们利用vue-cli脚手架搭建空vue项目，这个我就不赘述了 2：打开VSCode下载vetur插件 点击左侧圈起来的图标打开拓展插件，在顶部搜索框搜索vetur插件进行下载安装即可。 下载安装完后就会在扩展列表那看到，例如我的是0.29.1版本的 之后需要打开setting.json文件进行配置： "emmet.syntaxPr
VSCode导入Vue项目入门部署与启动
m0_54230514的博客
03-04 1万+
PS：没有node.js的需要下载，官网提供的版本过高，下载安装后容易出现一些问题导致不能运行，建议下载与项目适配的版本，node.js历史版本可参考以下博客。后者需要将npm下载镜像，使用淘宝镜像- 命令就改为了cnpm，会加快项目的启动速度。@后的数字可以更改为想要的版本 若不加上@6 就默认下载最新版本的镜像cnpm。设置全局模块的安装路径到 “node_global” 文件夹，配置npm的全局模块的存放路径 以及 cache缓存的路径。与idea导入项目一致，选择前端项目的文件夹进行导入。
【新手如何用vsCode运行vue项目】
weixin_47370955的博客
07-14 8069
适合新手从零开始用vscode跑一个vue项目
用VScode运行Vue项目详细全过程（node.js环境的配置）
热门推荐
D_gloria的博客
07-13 7万+
在用VScode运行Vue项目前，我们需要先配置node.js环境，就类似于使用eclipse前需要配置Java环境的这个过程。 一、安装node.js并配置环境变量 1、安装 从官网下载安装包，解压到指定位置，就相当于安装完成了。然后在解压后的目录下新建node_global和node_cache这两个文件夹。 node_global：npm全局安装位置 node_cache：npm缓存路径 2、配置环境变量 ......
使用VS Code如何启动vue项目
2301_81873206的博客
09-23 1326
3、在终端输入npm run dev，回车，之后即可看到访问地址。1、安装好软件和配置好环境后执行下属操作。
在vscode中运行vue项目
11-20
在Visual Studio Code (VSCode) 中运行Vue.js项目通常需要安装几个插件并设置好项目的启动配置。以下是基本步骤： 1. 安装Node.js和npm：确保你已经安装了Node.js，因为Vue.js项目依赖于它。 2. 创建或打开Vue项目：可以使用Vue CLI创建新项目，也可以直接导入现有的Vue项目。 3. 安装必要的VSCode插件： - Vue Language Support：提供Vue语法高亮和自动补全支持。 - Live Server：允许你在浏览器中实时预览代码更改。 - Path Intellisense：帮助管理路径，特别是处理相对路径。 4. 配置VSCode启动任务（launch.json）： - 打开`File > Preferences > Settings`，搜索`tasks.json`，然后点击"Edit in settings.json"。 - 添加一个新的任务，例如： ```json { "version": "2.0.0", "configurations": [ { "type": "node", "request": "launch", "name": "Serve with Live Server", "program": "${workspaceFolder}/node_modules/.bin/vue-cli-service", "args": ["serve"], "port": 8080, "cwd": "${workspaceFolder}", "stopOnEntry": false, "preLaunchTask": "npm: watch" } ] } ``` 这里启动的是`vue-cli-service serve`命令，监听8080端口。 5. 启动项目： - 使用快捷键`Ctrl + Shift + F5`（Windows/Linux）或`Cmd + Shift + F5`（Mac），或者点击左下角任务栏中的"Run Task"，选择"Serve with Live Server"。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值