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. 避免代码冗余,使用接口和泛型重构Java代码

    本文由 ImportNew - ImportNew读者 翻译自 michaelbrameld.如需转载本文,请先参见文章末尾处的转载要求. [感谢 李云涛(@平等的黑)的热心翻译.如果其他朋友也有不错 ...

  2. golang之浮点数处理库decimal

    decimal库包是用来解决float类型对象之间运算不准确的问题的.所以,如果你想使用decimal库包,你必须先把float类型对象通过decimal.NewFromFloat()函数转成deci ...

  3. Python之常见问题

    一.问题出现:使用Pycharm设置虚拟环境后,打开终端出现如下报错:无法加载文件-\venv\Scripts\activate.ps1,因为在此系统上禁止运行脚本. 解决方式已管理员的身份打开pow ...

  4. 《HelloGitHub》第 104 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. github.com/521xueweihan/HelloG ...

  5. Android开发重要知识点

    一.网络 1.https原理 2.tcp/ip协议 三次握手:https://www.cnblogs.com/cenglinjinran/p/8482412.html 四次挥手:https://www ...

  6. redis 使用lua 生成流水号

    在实际的业务场景中,我们会用到流水号. 之前的流水号做法是,使用redis的全局锁.然后对数据库进行更新,数据库更新 这个也会有一些问题,比如对于同一个流水号,多个线程去更新,由于事务比较长,那么就会 ...

  7. Java 设计模式——从冰雪经济看设计模式的综合运用(工厂、单例、策略、观察者)

    当冬季的寒风拂过大地,冰雪经济如同一颗璀璨的明珠,在寒冷中散发着炽热的魅力.滑雪场.冰雕展.冰雪主题酒店等各类冰雪产业蓬勃发展,其背后的运营逻辑和策略,与 Java 设计模式有着奇妙的相似之处,为我们 ...

  8. 了解URLSearchParams对象

    URLSearchParams对象用于处理URL中查询字符串,即?之后的部分. 1.语法 其实例对象的用法和Set数据结构类似.实例对象本身是可遍历对象.但是不是遍历器. var paramsStri ...

  9. uView的DatetimePicker组件在confirm回调中取不到v-model的最新值

    前情 uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验非常棒,公司项目就是主推uni-app,在uniapp生态中u ...

  10. 【分块】LibreOJ 6279 数列分块入门3

    题目 https://loj.ac/p/6279 题解 将 \(n\) 个元素的数组 \(a\) 按块长 \(\sqrt{n}\) 进行分块处理.为每个块设置一个懒添加标记 \(add[i]\),代表 ...