vscode vue开发环境（vscode配置vue开发环境）

liuian 2025-06-18 22:20 12 浏览

一、npm、nodejs安装

1、安装Node.js

官网下载Node.js

双击下载文件，选择安装路径，安装。

#cmd下查看安装完后的版本
node -v
npm -v

2、配置npm的全局模块的存放路径以及缓存的路径

默认会将模块安装到C:\Users\用户名\AppData\Roaming\npm路径中。所以可以修改路径

在node.js的安装目录下新建两个文件夹node-cache和node_global

#创建目录
d:
mkdir software
cd software
mkdir Nodejs
cd Nodejs
mkdir node_global
mkdir node_cache

#设置缓存的路径，之后用npm install XXX -g安装以后模块就在这两个文件夹里。
npm config set prefix "D:\\software\\Nodejs\\node_global"
npm config set cache "D:\\software\\Nodejs\\node_cache"

3、安装cnpm

有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要npm的国内镜像—cnpm

npm install -g cpm

4、安装vue-cli脚手架

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

5、安装webpack

cnpm install -g webpack

6、用vue-cli构建项目

#初始化项目
vue init webpack my-first-vue
nit:初始化
webpack:构建工具，即整个项目基于webpack构建
MyVue:整个项目文件夹的名称

#运行项目
cd my-first-vue
npm run dev

二、npm源设置

#设置淘宝源
npm config set registry [<https://registry.npm.taobao.org>](<https://registry.npm.taobao.org/>)
#查看源地址
npm config get registry
#测试源
npm info underscore
#在命令行中指定源
npm --registry <https://registry.npm.taobao.org> install [name]
#修改~/.npmrc
registry = <https://registry.npm.taobao.org>

#使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install [name]

三、VScode设置

3.1、vscode语言设置

按下ctrl+p, 输入: > Config, 选择： “Configure Display Language"

3.2、安装vuetr插件

3.3、安装eslint插件（eslint：此时打开一个vue文件并编辑，保存时并不会自动进行格式化，这里还需要安装一些依赖和一些配置。）

3.3.1、vue安装：npm install -g eslint

3.3.2、vscode安装eslint插件

vue init

上一篇：vue项目完整搭建步骤（vue 项目搭建）
下一篇：Vue.js 环境配置（vue.js部署）

vscode vue开发环境（vscode配置vue开发环境）

一、npm、nodejs安装

二、npm源设置

三、VScode设置

相关推荐

Python实现人事自动打卡，再也不会被批评

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

vscode vue开发环境（vscode配置vue开发环境）

一、npm、nodejs安装

二、npm源设置

三、VScode设置

相关推荐

Python实现人事自动打卡，再也不会被批评

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄