vscode与vue环境配置

一、下载并安装VScode

安装VScode 官网下载

二、配置node.js环境

  1. 安装node.js 官网下载
    会自动配置环境变量和安装npm包(npm的作用就是对Node.js依赖的包进行管理),此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号:
    在这里插入图片描述

  2. 配置系统变量
    因为在执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中,不方便管理且占用C盘空间,所以进行以下操作进行修改
    1)执行命令:(我的node安装目录是D:\nodejs)
    npm config set prefix “D:\nodejs\node_global”
    npm config set cache “D:\nodejs\node_cache”
    2)然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“D:\nodejs\node_modules”
    3)最后编辑用户变量里的Path,将相应npm的路径改为:D:\nodejs\node_global
    4)在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效(要以管理员身份进入cmd(在开始菜单中搜索命令提示符点击以管理员身份),否则会有权限问题)
    在这里插入图片描述
    webpack 也已安装成功,执行 npm webpack -v 可以看到所安装webpack的版本号

  3. 安装cnpm
    在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org
    完成后输入cnpm -v检查
    在这里插入图片描述

三、构建vue-cli脚手架

执行命令cnpm install -g vue-cli
执行命令cnpm install -g vue
执行命令cnpm install -g @vue/cli-init
通过vue -V查看版本号是否安装成功,如果不成功则检查vue安装目录和环境变量
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/487087.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot213大学生心理健康管理系统的设计与实现

大学生心理健康管理系统的设计与实现 摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理,然而,随着近些年信息技术的迅猛发展,让许多比较老套的信息管理模式进行了更新迭代,试卷信息因为其管理内容繁杂,管理…

套接字与套接字编程

对于刚刚学习计算机网络:自顶向下的同学们,在观看了中科大的视频---TCP Socket以及UDP Socket会感到些许疑惑,不过没事,在这篇小文章将会为你解开Socket的神秘面纱 什么是Socket?: Socket 是一套用于不同主机之间通信…

JAVA代码审计之XSS漏洞

Part1 漏洞案例demo&#xff1a; 没有java代码审计XSS漏洞拿赏金的案例。 所以将就看看demo吧 漏洞原理&#xff1a;关于XSS漏洞的漏洞原理核心其实没啥好说的&#xff0c;网上一查一大堆 反射性XSS漏洞 <% page language"java" contentType"text/html; c…

java——File类和字符集

目录 File类File类的常用操作&#xff1a;案例&#xff1a;文件搜索的实现案例&#xff1a;递归文件夹删除 字符集几种常见的字符集总结字符集的编码和解码 File类 File是java.io.包下的类&#xff0c;File类的对象&#xff0c;用于代表当前操作系统的文件&#xff08;可以是文…

ESP8266智能家居(4)——开发APP基础篇

1.前期准备 安装好Android studio 开发环境 准备一台完好的安卓手机 手机要处于开发者模式 设置 --->关于手机---> 一直点击版本号 &#xff08;不同手机进入开发者模式的步骤可能不太一样&#xff09; 进入开发者模式后&#xff0c;找到辅助功能&#xff0c;打开开…

厌倦了混乱的代码?掌握编写干净代码库的艺术

对于入门的开发人员来说&#xff0c;虽然克服了最初的障碍&#xff0c;学会了编程&#xff0c;找到了理想的工作。但其编程旅程并没有就此结束。他们面临真正的挑战&#xff1a;如何编写更好的代码。这不仅仅是为了完善功能&#xff0c;还要编写出经得起时间考验的优雅、可维护…

J7 - 对于ResNeXt-50算法的思考

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 J6周有一段代码如下 思考过程 首先看到这个问题的描述&#xff0c;想到的是可能使用了向量操作的广播机制然后就想想办法验证一下&…

基于springboot+vue的房屋租赁管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

flink内存管理,设置思路,oom问题,一文全

flink内存管理 1 内存分配1.1 JVM 进程总内存&#xff08;Total Process Memory&#xff09;1.2 Flink 总内存&#xff08;Total Flink Memory&#xff09;1.3 JVM 堆外内存&#xff08;JVM Off-Heap Memory&#xff09;1.4 JVM 堆内存&#xff08;JVM Heap Memory&#xff09;…

辩证易货模式做成App的可行性分析

随着科技的进步和移动互联网的普及&#xff0c;越来越多的传统业务模式开始寻求数字化转型&#xff0c;以适应市场的发展和满足用户的需求。易货模式&#xff0c;作为一种古老而又现代的交易方式&#xff0c;同样面临着这样的机遇和挑战。那么&#xff0c;将辩证易货模式做成Ap…

【Git】:标签功能

标签功能 一.标签操作二.推送远程标签 标签 tag &#xff0c;可以简单的理解为是对某次commit的⼀个标识&#xff0c;相当于起了⼀个别名。例如&#xff0c;在项⽬发布某个版本的时候&#xff0c;针对最后⼀次commit起⼀个v1.0这样的标签来标识⾥程碑的意义。这有什么⽤呢&…

胡夏爱意满满,浪漫尽显,心动不止。

♥ 为方便您进行讨论和分享&#xff0c;同时也为能带给您不一样的参与感。请您在阅读本文之前&#xff0c;点击一下“关注”&#xff0c;非常感谢您的支持&#xff01; 文 |猴哥聊娱乐 编 辑|徐 婷 校 对|侯欢庭 全网热议的胡夏暗恋文学&#xff0c;浪漫指数爆表&#xff01…