vscode怎么打不开vue项目(vscode如何打开vue项目)

在VScode中npm,cnpm,vue提示无法识别

先是两张报错的信息

原本是提示 vue无法识别,但是通过一顿自己都忘记了的操作之后变成了缺少组件,但是后面的方法对无法识别是适用的

图二的解决方案网上提供的方法有两种

一种是通过终端输入 npm/cnpm install commander 对缺少的组件安装

另一种是通过终端输入 vue init webpack 进行初始化

如果两种方法都不行,就是跟第一种情况一样是路径的问题了

然而,路径问题也要注意有两个

首先是去我们的环境变量的 Path 里查看我们的路径是不是对应 nodejs 安装时选择的路径,如果没有就加上去

这是网上提供的第一个方法,只要是路径设置好了,基本上是可以使用的。但是如果进到 VS Code 之后发现 npm 指令不能使用,那么就要通过设置 VS Code 的兼容性来解决

通过上面几个步骤基本上就可以解决 VS Code 不能使用 node、npm 的问题

接下来就是 cnpm、vue-cli 等全局安装之后无法使用的问题

全局安装cnpm: npm install -g cnpm --registry==

全局安装vue-cli: cnpm/npm install -g vue-cli

顺序执行了两个指令之后,使用 cnpm 安装 vue脚手架,提示 cnpm 无法识别,就算使用 npm 安装 vue-cli 成功之后,输入 vue 指令也会提示无法识别(黑人问号问号问号问号...)

于是观察一下安装过程,在进行全局安装 vue脚手架以及在安装 cnpm 的时候很容易会发现一个路径,这个就是你安装的一个路径,相信有人会跟我一样,安装的路径和 nodejs 的安装路径不一致

注意:这个是安装 vue-cli(脚手架)出现的提示信息,是已经安装成功的,但是我在使用的时候提示不是内部或外部指令。cnpm安装的时候也会有类似的显眼的路径信息,这里就不放出来,自己注意找一下就行

解决方法

通过终端输入 npm config ls 查看配置信息

prefix 是安装路径,这个时候会发现这个路径并不是你安装 nodejs 的路径,所以我们需要修改这个安装路径

终端输入 npm config set prefix ( nodejs 的安装路径)

再次终端输入 npm config ls 查看配置信息,就修改成功了

最后再重新进行全局安装 cnpm 和 vue-cli 就可以进行使用了

总结起来就是:

1、环境变量中 Path 中的路经检查是否正确,如果没有就添加上去

2、若1满足,则对 VS Code 兼容性进行修改

3、cnpm 或 vue 还是不能使用的话,考虑安装路径问题,终端输入 npm config ls 进行配置信息查看,检查是否正确。若不正确,终端输入 npm config set prefix ( nodejs 的安装路径) 进行修改;若正确,emmmmmmmmmmm,那就说明这篇笔记不是很适合你的错误哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

好嘞,记录完毕【伸懒腰】

VSCode调试vue项目

先决条件

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。

在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool 属性。将其更新为:

如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性:

进入Debugger视图,添加Chrome配置,将内容替换成以下内容

设置断点

此处response返回数据

启动调试

在终端使用如下命令开启这个应用

进入Debug视图,选择‘vuejs:chrome’配置,然后按F5或点击绿色的play按钮

随着一个新的 Chrome 实例打开 ,你的断点现在应该被命中了。

vscode导入vue组件重复

打开vscode-------文件---------打开文件夹---------选择工程文件夹--------确定查看----终端或者使用“Ctrl+~”调出终端从终端中输入命令进入程序目录,输入npminstall安装vue插件初始化项目,完成后执行npmrundev启动项目,就可以在浏览器中打开页面了,在终端ctrl+c来停止运行。

isualStudioCode(简称“VSCode”)是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于MacOSX、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器。

vscode调试Vue提示:crbug/1173575, non-JS module files deprecated.

参考其他的博客使用如下命令,但是不起作用。

使用npm 其他命令则可以成功运行,命令如下

运行成功之后显示如下,之后就可以正常在chrome中调试。

我用新建项目测试时,npm run serve 之后也会提示crbug/1173575, non-JS module files 。这个暂时不清楚是什么原因。但是过了一会之后,关闭终端,之后打开重新执行该命令却又好了。这个有时间才查具体原因吧。。。留个问题。

一、npm run 背后的操作

npm run serve,执行该命令实际是执行package.json 的script中key为serve后面的值。所以执行哪个命令,是由package.json中的key 决定的。

vscode为啥重复引入vue组件

vscode本身是一个源代码编辑器,本身并不具备运行前端应用的功能。

正确的做法是:

首先用本地git客户端将vue项目从github克隆到本地,用vscode打开,完成编辑。

然后在vscode里新打开一个命令行终端,在终端窗口里使用vue对应的脚手架命令启动项目。

注意,这种方式只适用于vue项目开发流程。

361知讯网

本文链接:http://pdidw.com/vs/5886.html

发表评论

评论列表

还没有评论,快来说点什么吧~