当前位置：网站首页 > 技术分类 > 正文

Vue.js 环境配置（vue的环境搭建）

ztj100 2025-05-03 17:57 30 浏览 0 评论

说明：node.js 和 vue.js的关系：

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境；类比：Java的jvm(虚拟机)

vue.js 是渐进式JavaScript 框架（引用大神的话：“它给你提供足够的optional，但并不主张很多required，也不多做职责之外的事！这就是渐进式。”）；类比 ssm

所以先安装Node---------->使用Node的npm先安装Vue---------->安装vue-cli脚手架---------->最后通过vue-cli脚手架构建前端项目。

回到顶部

一、node.js 环境（Windows）

步骤一：下载node.js ，按步骤安装；

步骤二、测试：

在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口：

输入：

node -v

查看node 版本号；若显示则表示安装成果；

输入：

npm -v

查看npm(包管理器) 版本号；若显示则表示安装成果；

如图：

步骤三、环境配置：

①在E:\nodejs（安装nodejs的位置）中创建两个文件夹：【node_global】及【node_cache】；

②在控制台中输入指令来配置全局module安装位置和缓存位置；

npm config set prefix "E:\nodejs\node_global"

npm config set cache "E:\nodejs\node_cache"

③在【系统变量】下新建【NODE_PATH】，输入【E:\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【E:\nodejs\node_global】

④测试环境

输入：

npm install express -g     # -g是全局安装的意思

⑤、设置淘宝镜像：

控制台输入：

npm config set registry=http://registry.npm.taobao.org

回到顶部

二、vue.js环境

参考

1.控制台输入：

npm install vue

2.vue_cli

npm install -g @vue/cli

回到顶部

三、创建vue.js项目(官网方式)；

用旧版本的 vue init 功能创建项目

旧版本的 vue init 需要额外执行一条 npm install -g @vue/cli-init

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

文件目录为：

运行指令npm run dev;

结果：同最新方式创建。

vue init

上一篇：vue项目完整搭建步骤（vuecli项目搭建）
下一篇：vue 构建和部署（vue项目部署服务器）

Vue.js 环境配置（vue的环境搭建）

说明：node.js 和 vue.js的关系：

一、node.js 环境（Windows）

步骤一：下载node.js ，按步骤安装；

步骤二、测试：

步骤三、环境配置：

①在E:\nodejs（安装nodejs的位置）中创建两个文件夹：【node_global】及【node_cache】；

②在控制台中输入指令来配置全局module安装位置和缓存位置；

③在【系统变量】下新建【NODE_PATH】，输入【E:\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【E:\nodejs\node_global】

④测试环境

⑤、设置淘宝镜像：

二、vue.js环境

三、创建vue.js项目(官网方式)；

最新方式创建：

用旧版本的 vue init 功能创建项目

相关推荐

取消回复欢迎你发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

Vue.js 环境配置（vue的环境搭建）

说明：node.js 和 vue.js的关系：

一、node.js 环境 （Windows）

步骤一：下载node.js ，按步骤安装；

步骤二、测试：

步骤三、环境配置：

①在E:\nodejs（安装nodejs的位置）中创建两个文件夹：【node_global】及【node_cache】；

②在控制台中输入 指令来配置 全局module安装位置和缓存位置；

③在【系统变量】下新建【NODE_PATH】，输入【E:\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【E:\nodejs\node_global】

④测试环境

⑤、设置淘宝镜像：

二、vue.js环境

三、创建vue.js项目(官网方式)；

最新方式创建：

用旧版本的 vue init 功能创建项目

相关推荐

取消回复欢迎 你 发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

一、node.js 环境（Windows）

②在控制台中输入指令来配置全局module安装位置和缓存位置；

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起