Vue环境安装

Node.js安装与配置：全局模块与淘宝镜像cnpm

原创已于 2025-05-07 14:01:05 修改 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2022-09-06 09:54:59 首次发布

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细指导如何下载安装Node.js，配置环境变量，设置缓存路径，并介绍如何使用cnpm作为淘宝镜像源，包括全局模块的设置和常用包的安装步骤。

下载nodejs并安装（尽量不要安装在C盘）
cmd命令行中，输入 node –v 和 npm –v 查看版本，若显示相应的版本则安装成功
在nodejs安装路径下，新建node_global和node_cache两个文件夹
在cmd命令行中执行下面两个命令（设置缓存文件夹和设置全局模块存放路径）例如路径为D: \Program Files\nodejs\node_cache

npm config set cache "D:\Program Files\nodejs\node_cache"

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config get cache
D:\Program Files\nodejs\node_cache

5. 配置环境变量，在系统变量中新建一个名为NODE_PATH ，路径为：

D: \Program Files\nodejs\node_global\node_modules

如需安装淘宝镜像进行下列操作：

在cmd中执行npm install -g cnpm --registry=https://registry.npm.taobao.org
将cmd关闭重新再打开，输入 cnpm –v 可查看cnpm版本
配置环境变量，将 D:\nodejs\node_global 放到系统变量和环境变量名为Path的后面
在cmd中执行 cnpm install express –g
在cmd中执行 cnpm install vue –g
在cmd中执行 cnpm install vue-cli –g
在cmd中执行 cnpm install webpack –g
关闭cmd，重新打开cmd
进入要新建项目的文件夹
在cmd中执行 vue init webpack myproject
进入 myproject 中执行 cnpm install

在执行 cnpm run dev

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cyw8998

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue之环境安装

qq_50564231的博客

03-18

1062

随着前端技术的不断发展，掌握各种框架也越来越重要，很多人都开启了学习 Vue，本文就介绍了 Vue 的环境安装和项目创建，大家也可访问我之前的博客查看Vue基础知识点小结。

Vue环境安装(一)

qq_35673187的博客

08-20

390

Vue环境安装(一) 前言学习后端十几天了, 总是觉得用着springboot配套的thymeleaf不舒服, 仿佛回到了JSP时代, 现在正好赶上前后端分离, 也想试试自己能不能从零开始整这么一套. 说白了就是前端框架学习, 后端框架学习加上整合. 能跑起来就心满意足了. 写这个笔记只是为了记录学习过程. 现在的状态是Vue完全不了解, SSM懂个皮毛, 对如何从0开始搭建完全没有概念…不过还是要保持乐观! 接下来打算跟着https://www.bilibili.com/video/BV1EE411

参与评论您还未登录，请先登录后发表或查看评论

Vue安装环境教程

最新发布

zhou__wu的博客

09-05

339

Vue环境安装以及配置

青竹雾色间.的博客

10-13

2164

Vue.js 是一款非常流行的渐进式 JavaScript 框架，尤其适用于构建单页面应用程序（SPA）。本文将详细介绍如何在本地环境中安装 Vue 3 及其依赖项，并进行基本的项目配置。本文介绍了如何安装和配置 Vue 3 环境，希望这篇教程能够帮助你顺利开始你的 Vue 3 开发之旅！如果有任何问题，欢迎讨论和补充！

值得收藏的vuejs安装教程

Eric

08-21

625

本文为大家分享了vuejs安装教程，供大家参考，具体内容如下 1.安装nodejs，自带npm环境。地址：https://nodejs.org/en/download/，Node.js 历史版本下载地址：https://nodejs.org/dist/ 可自行选择适合自己操作系统的版本。安装过程参见：安装配置 2.安装淘宝镜像。 ...

vue环境安装

holler_00的博客

06-24

186

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 vue环境安装vue环境安装（详解） vue环境安装（详解） 1，首先要确定自己安装了node.js环境，进入官网下载对应操作系统的版本就好。npm -v查看npm版本，下载地址：https://nodejs.org/zh-cn/。 2，还要修改npm源，修改为淘宝镜像，因为使用npm下载是国外服务器可能会卡顿出现下载不成功。命令：1，npm get registry 获取默认的。 2，npm config set registry h

Vue环境安装、项目构建运行、打包部署详解

adminwxc的博客

02-27

2528

官网下载.msi格式安装包，，此处由于是64位计算机，所以选择如下。

前端开发之Vue环境安装

zxsdyyds的博客

02-18

1313

它提供了交互式的项目脚手架，旨在将Vue生态中的工具基础标准化，确保各种构建工具能够基于智能的默认配置即可平稳衔接。Vue CLI通过@vue/cli实现的交互式项目脚手架，使得开发者能够快速搭建Vue开发环境以及对应的webpack配置。此外，它还支持零配置原型开发，提供了一个丰富的官方插件集合，集成了前端生态中最好的工具，以及一套完全图形化的创建和管理Vue.js项目的用户界面。Vue CLI的这些功能使得开发者可以专注于撰写应用，而不必花费大量时间在配置问题上。

Vue详细安装以及环境配置教程

qq_42552600的博客

06-03

4318

打开DOS窗口（按住键盘上的Win+R），输入CMD 在DOS窗口里输入以下两串命令符如果都显示了版本号，安装成功了 node_cache 做缓存用 node_global 做全局安装的目录使用如果不知道怎么用管理员打开，就按住键盘上的WIN+S，在出现的搜索栏中输入CMD，右击 “以管理员身份运行” 用以下命令修改路径我这里出现了很多提醒，是提醒我有新的版本可用，我们不管修改Path中的以下路径修改前修改后我的是：E:\SoftwareDp\WebDp\Tool\NodeJs\node_g

Vue开发环境的安装

hudou_k的专栏

07-29

625

本文主要内容面向在Vue教学过程中的环境安装，要求学生要求这一流程将相关的开发环境安装完成，如遇到问题要求学生能够学会查找资料解决相关的内容。

vue篇1 vue环境安装

bluewelkin的专栏

04-16

1202

vue与nodejs 环境安装

vue 环境安装

u013078295的博客

03-06

2783

1 安装node.js 环境，下载地址 https://nodejs.org/en/download/

Vue 环境安装

hy313161875的博客

01-02

147

一、window环境安装 1.安装vue npm install -g vue //安装vue npm install -g @vue/cli // 全局安装vue/cli 2.环境验证. 3.创建项目. vue create my-project //vue项目创建 4.项目启动. cd my-vue-test npm run serv...

vue 环境安装

zona

07-04

509

vue 环境搭建

安装vue环境

05-16

### 安装 Vue 环境并配置开发依赖 #### 前置条件在开始安装 Vue 环境之前，需要确保已安装以下工具： - **Node.js**: Vue CLI 和其他依赖项的运行需要 Node.js 提供支持。推荐安装 LTS 版本[^1]。 - **Visual Studio Code (VSCode)** 或其他代码编辑器：用于编写和管理项目文件[^2]。 - **Git**: 方便进行版本控制和协作开发[^2]。 #### 安装 Vue CLI 工具 Vue CLI 是官方提供的脚手架工具，可以帮助快速搭建 Vue 项目。如果尚未安装 Vue CLI，可以通过以下命令全局安装最新版： ```bash npm install -g @vue/cli ``` 验证安装是否成功，可运行以下命令查看当前版本： ```bash vue --version ``` 如果提示 `vue` 命令不存在，可能是之前的安装出现问题，可以尝试卸载后再重新安装： ```bash npm uninstall -g @vue/cli npm install -g @vue/cli ``` 此过程有助于解决潜在路径或权限问题[^3]。 #### 创建新项目使用 Vue CLI 初始化一个新的 Vue 项目，执行以下命令： ```bash vue create my-vue-project ``` 在此过程中，可以选择默认预设或手动选择特性（如 Babel、Router、Vuex 等）。完成后进入项目目录： ```bash cd my-vue-project ``` #### 启动开发服务器在项目根目录下运行以下命令以启动本地开发服务器： ```bash npm run serve ``` 默认情况下，开发服务器会在 `http://localhost:8080/` 上运行。如果有端口占用或其他需求，可通过修改 `package.json` 文件中的 `scripts` 部分来指定不同的模式或端口[^4]。例如，在生产环境下运行时，可以添加自定义模式： ```json "scripts": { "dev": "vue-cli-service serve --mode development", "build": "vue-cli-service build" } ``` #### 环境变量配置为了更好地管理和切换不同环境下的 API 请求地址，可以在 `.env`, `.env.development`, `.env.production` 文件中分别定义对应的环境变量。例如： ```plaintext # .env.development VUE_APP_BASE_URL=http://api.dev.example.com # .env.production VUE_APP_BASE_URL=http://api.prod.example.com ``` 这些变量可以通过 `process.env.VUE_APP_BASE_URL` 访问。 --- ####