vscode搭建vue项目,vscode编写vue项目需要配置什么

　　首先，列出我们在vscode上运行vue项目需要的东西。

　　1.下载并安装vscode。

　　2.node.js环境(npm包管理器)

　　3.vue-cli脚手架搭建工具

　　4.cnpm npm的淘宝图片

　　I .下载并安装vscode。在我的上一篇博客中，我写下了附呈的地址：

　　https://blog.csdn.net/m0_46698214/article/details/118354958

　　其次，配置node.js环境并安装Node.js。

　　1.从node.js官网下载安装Node(https://nodejs.org/en/)

　　一般点击下一步选择安装位置，我一般安装在d盘。

　　对于其他所有内容，请单击“下一步”,直到安装完成。

　　安装成功。文件夹结构如下。在上面的安装过程中，已经自动配置了环境变量，并且已经安装了npm软件包。此时，您可以执行node -v和npm -v来分别检查node和npm的版本号：

　　这里说明一下，Node.js的新版本已经自带了npm，在你安装Node.js的时候会一起安装，npm的作用是管理Node.js所依赖的包，也可以理解为安装/卸载Node.js需要安装什么。

　　2.配置节点环境变量。

　　3.配置系统变量。

　　因为在执行npm install webpack -g等全局安装时，模块会默认安装在C:\ Users \ username \ AppData \ Roaming路径下的npm和npm_cache中，不方便管理，而且占用c盘空间，如下图所示：

　　执行命令：

　　npm配置集前缀" D:\ development \ nodeJS \ node _ global "

　　npm配置集缓存" D:\ development \ nodeJS \ node _ cache "

　　执行成功。然后在环境变量-系统变量中新建一个名为“NODE_PATH”的变量，值为“d:\ development \ nodejs \ NODE _ modules”，如下图所示：

　　最后，编辑用户变量中的路径，并将相应npm的路径更改为：D:\ development \ nodejs \ node _ global，如下所示：

　　变更前：

　　在cmd命令下执行npm install webpack -g，然后安装成功后，可以看到两个自定义文件夹已经生效：

　　webpack也已成功安装，通过执行npm webpack -v可以看到安装的webpack的版本号：

　　三。安装cnpm。在命令行中输入NPM Install-g CNPM-registry=http://registry.npm.taobao.org，然后等待。安装完成，如下图所示。

　　错误报告：

　　原因：

　　问题所在的cnpm文件夹与npm文件夹不在同一个文件夹中(npm全局下载的所有包都在D:\ development \ nodejs \ node _ global \ node _ modules目录中)

　　Cnpm文件夹：d:\ development \ nodejs \ node _ global \ node _ modules

　　npm的文件是：d:\ development \ nodejs \ node _ modules。

　　解决：

　　将cnpm文件夹移动到npm所在的文件夹，然后将cnpm和cnpm.cmd文件移动到npm和npm.cmd所在的文件夹即可解决问题。

　　移动cnpm文件夹之前：

　　cnpm文件夹移动后的目录：

　　移动前的Cnpm和cnpm.cmd文件：

　　移动cnpm和cnpm.cmd文件后

　　要验证cnpm是否安装成功，可以查看版本：cnpm -v V。

　　四。构建vue-cli脚手架并执行命令cnpm install -g vue-cli

　　美国总统之行政命令

　　npm/cnpm安装-g vue

　　npm/cnpm install -g @vue/cli-init

　　第二个是cnpm，不然慢。

　　错误报告vue不是内部命令或外部命令。

　　检查vue所在的路径。

　　看看vue.cmd是否存在。

　　配置环境变量

　　再次打开cmd命令提示行并输入vue - version。

　　创建vue空项目

　　在命令行上运行命令vue init webpack firstVue。

　　这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目都是基于webpack的。FirstVue是整个项目文件夹的名称，它将在您指定的目录中自动生成。

　　项目未成功创建：

　　错误报告：

　　vue init命令需要安装一个全局插件。

　　请运行yarn global add @vue/cli-init并重试。

　　执行命令：cnpm install -g @vue/cli-init

　　执行命令：

　　vue init webpack firstVue成功。

　　声明：本博客部分内容参考了以下两位作者的博客，特此致谢。

　　https://blog.csdn.net/antma/article/details/86104068

　　https://www.cnblogs.com/weiwei-python/p/9754384.html

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。