VScode导入Vue项目

1、使用VScode打开文件夹

2、找到运行按钮

3、判断有没有默认的配置文件存在

4、若文件夹存在就检查配置文件是否存在

(1)打开launch.json,把如下代码粘贴到里面的"configurations": []列表中

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
// "console": "none", // 只输出到“调试控制台”
// "console": "externalTerminal", // 外部终端调试器
"console": "integratedTerminal", // 内部终端调试器,同时输出到“调试控制台”和内置“终端”
// "console": "internalConsole", // 新版本VScode的选项,仅出输出到“调试控制台”
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"args": [
"--inline",
"--progress",
"--config",
"build/webpack.dev.conf.js"
]
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
]
}

(2)运行项目

(3)停止/关闭项目

5、若文件夹不存在

(1)点击创建launch.json文件

(2)创建时会自动生成.vscode文件夹和launch.json文件

(3)打开launch.json,把如下代码粘贴到里面的"configurations": []列表中

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
// "console": "none", // 只输出到“调试控制台”
// "console": "externalTerminal", // 外部终端调试器
"console": "integratedTerminal", // 内部终端调试器,同时输出到“调试控制台”和内置“终端”
// "console": "internalConsole", // 新版本VScode的选项,仅出输出到“调试控制台”
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"args": [
"--inline",
"--progress",
"--config",
"build/webpack.dev.conf.js"
]
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
]
}

(4)运行项目

(5)停止/关闭项目

VScode导入Vue项目的更多相关文章

  1. VsCode调试vue项目

    VsCode调试vue项目 VsCode如何调试vue项目,VsCode需要安装插件以及配置launch.json文件. 找到"扩展"或者按快捷键"Ctrl+Shift+ ...

  2. VSCode搭建Vue项目

    在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm ...

  3. 团队协作统一vue代码风格,vscode做vue项目时的一些配置

    1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...

  4. 适用于小白:VSCode搭建Vue项目,最详细的搭建步骤哦

    在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm ...

  5. vscode 开发Vue项目

    写在开头 Vue作为前端项目,本身不依赖IDE,完全可以使用任何文本编辑器进行开发.我使用vscode仅是因为比较习惯,vscode几乎可以作为任何项目的开发IDE. 环境安装 安装nodejs,去官 ...

  6. VSCode 启动 Vue 项目 npm install 报错

    1.  报错后,查看了版本. 查看node版本:node -v 查看npm版本:npm -v 查看Augular版本:ng --version 2.  感觉 Augular CLI版本太低,使用以下方 ...

  7. vscode 中 vue项目使用eslint插件 检查代码

    前言 本文章项目由vue-cli3创建 vscode版本1.36.1 eslint1.9.0 在网上找了一大堆文章,不知是什么原因,没有一篇可以直接使用的 折腾了许久,直接按eslint插件的说明,竟 ...

  8. 折腾vue--使用vscode创建vue项目(二)

    1.安装webpack npm install -g webpack 2.安装sass npm install --save-dev sass-loader npm install --save-de ...

  9. 配置VSCode开发Vue项目

    一.安装VSCode.NodeJS VSCode:https://code.visualstudio.com/ NodeJS:https://nodejs.org/en/ 二.打开VSCode,安装常 ...

  10. vscode启动vue项目出错,给了管理员权限没用

    今天在安装vue环境测试项目的时候, 发现vscode调用终端异常,语句无法运行,百度上给的解决方法是给管理员权限 给了以后发现没用,怎么试都没用,然后想到了,重启大法,然后问题就完美解决了

随机推荐

  1. 617. 合并二叉树 Golang实现

    题目描述: 给你两棵二叉树: root1 和 root2 . 想象一下,当你将其中一棵覆盖到另一棵之上时,两棵树上的一些节点将会重叠(而另一些不会).你需要将这两棵树合并成一棵新二叉树.合并的规则是: ...

  2. JVM中的Hello World是如何运行的?

    每一个Java开发者都是通过Hello World敲开面向对象世界的大门.但是在一开始,我们考虑的只是这个语言是什么样的,我们如何更好的编码,却很少有人关心他内部是怎么运行的.看下面一个简单的hell ...

  3. 通向架构师的道路(第五天)之tomcat集群-群猫乱舞

    一.为何要集群 单台App Server再强劲,也有其瓶劲,先来看一下下面这个真实的场景. 当时这个工程是这样的,tomcat这一段被称为web zone,里面用spring+ws,还装了一个jbos ...

  4. Java Collections Framework的Fail Fast机制及代码导读

    本文章主要抽取了Java Collections Framework中的Collection接口.List接口.AbstractCollection抽象类.AbstractList抽象类和具体的Arr ...

  5. Jenkins之插件汇总

    Nodejs: 构建前端项目或Node项目 Build Name and Description Setter Publish over SSH: 远程执行shell命令 Blue Ocean   友 ...

  6. Ubuntu22.04安装cuda12.1+cudnn8.9.2+TensorRT8.6.1+pytorch2.3.0+opencv_cuda4.9+onnxruntime-gpu1.18

    说来话长,我想配一个一劳永逸的环境,方便以后复用.省的以后反复查教程重新装了 1. 安装miniconda+py3.10 cd /root wget -q https://repo.anaconda. ...

  7. openwrt交换机配置命令-swconfig

    swconfig swconfig 是交换接口 (switch) 配置命令. 交换机是二层设备,是我们用来配置vlan的必备利器. 使用swconfig list可以列出当前可用的 SWITCH 设备 ...

  8. Qt数据库应用11-通用数据生成器

    一.前言 有两种应用场景需要用到数据生成器,一种是需要测试数据库性能,比如在100万条和1000万条记录的时候对比查询或更新语句执行耗时,一种是随机模拟生成一堆数据,用来测试程序的性能,看下程序中到了 ...

  9. Qt编写安防视频监控系统46-视频存储

    一.前言 在整个视频监控系统的开发迭代升级过程中,遇到过各种奇奇怪怪的需求,都是客户提出来的,有些需求很合理,有些就不那么的自然了,牢记这客户是上帝的原则,能满足的尽量满足.相信各位同行的研发人员都会 ...

  10. FFmpeg中的色彩空间与像素格式2-RGB/YUV色彩空间

    cnblogs 网站将文本J:a:b渲染成了J️b.是否可通过设置博客后台解决此问题?有知道的同学请留言指点一下,谢谢. FFmpeg 中的色彩与像素系列文章如下: [1]. FFmpeg中的色彩空间 ...