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安装目录和环境变量

相关推荐
宁静致远202113 小时前
VSCode 开发 STM32 的 Keil工程 (Keil Assistant)
vscode·stm32·stm32cubeide
2301_322414280413 小时前
活力孕康复APP 47737- 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·mysql·微信小程序·idea·微信开发者工具
晴天1614 小时前
VSCodium 项目介绍
前端·javascript·vscode
专业程序开发源15 小时前
springbootLivehouse票务系统-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·django·课程设计·pygame
leoZ23115 小时前
2026-09-10-静态扫描连错三次-用运行环境当裁判
前端·javascript·vue.js·人工智能·opencv·机器学习·数据挖掘
卓怡学长15 小时前
w233基于vue和springboot的宠物管理系统的设计与实现
java·vue.js·spring boot·spring·intellij-idea
梨涡泥窝17 小时前
JavaWeb——基于 Spring Boot + Vue 的图书管理系统的设计与实现
vue.js·spring boot·后端
学习智者18 小时前
《玄》IDE v3.6.3重磅发布:全功能修复与性能飞跃
开发语言·c++·ide·算法·中文语言 玄
重生之小比特19 小时前
【Java SE】IDEA 调试 Debug 案例完整分析
java·ide·intellij-idea
huali19 小时前
vue-split-screen:让 Vue Router 的导航轨迹变成两个页面
前端·javascript·vue.js