Vue环境搭建(node安装,环境配置,运行项目)

2024-05-18 09:59:27

Vue环境搭建(node安装,环境配置,运行项目)

一、安装node

1、去官网下载node之后，推荐安装稳定版本（LTS）node官网下载地址

2、查看node安装成功否

node -v 查看node版本
npm -v 查看npm版本
where node 查看node安装位置

注意:node 版本号大于npm版本号，基于之前安装版本过低，后面会报错。

3、在node安装目录下新建node_global和node_cache文件夹，分别存放package包和缓存。

更新npm配置路径为新建目录路径，如：D:\nodejs
npm config set prefix “D:\nodejs\node_global”

npm config set cache “D:\nodejs\node_cache”

npm config set registry https://registry.npm.taobao.org（npm 运行慢，配置国内淘宝镜像包）后续包安装命令 npm 即可改为 cnpm

4、配置node的环境变量
我的电脑(属性)->高级系统设置->环境变量编辑-保存

编辑path环境变量，新增node安装路径

增加环境变量NODE_PATH 配置的内容为node_modules 路径

**以上已配置好node环境------------------------------------------------------------------

二、下面开始安装vue相关依赖**

1、安装vue
npm install vue -g

npm install vue-router -g

-g是指安装到node_global全局目录

2、安装vue-cli脚手架
npm install vue-cli -g

三、运行项目

1、从命令符进入项目所在目录，执行cnpm或npm install 安装相关包

2、然后执行cnpm run server 或 npm run 打包启动项目

运行完成后访问以下地址即可在浏览器成功访问该vue项目

可能出现的问题：

在执行cnpm install安装过程中可能出现安装失败的情况，例如：各个包可能存在停止使用的情况或版本对应错误问题

当出现依赖停止使用或版本不合适的情况时，首先在node_modules目录中找到该包，然后删除，再重新选择版本进行安装。
例如：

修改package.json中的存在问题版本号

"devDependencies": {"@vue/cli-plugin-babel": "^4.1.0","@vue/cli-plugin-eslint": "^4.1.0","@vue/cli-service": "^4.1.0","babel-eslint": "^10.0.3","babel-plugin-component": "^1.1.1","eslint": "^5.16.0","eslint-plugin-vue": "^5.0.0","node-sass": "^6.0.1",/node-sass版本/"sass-loader": "^10.0.1",/sass版本对应/"svg-sprite-loader": "4.1.3","svgo": "1.2.2","vue-template-compiler": "^2.6.10"},

最后再次执行cnpm或npm install 安装，即可安装成功。

Vue环境搭建(node安装,环境配置,运行项目)相关推荐

uni-app（1）— 环境搭建（安装编辑器，创建项目，项目运行）
此文为uni-app总结笔记(1)- 环境搭建 (安装编辑器 – 创建项目 – 运行到浏览器,微信开发者工具) 一: 安装编辑器HbuilderX [下载地址] : https://www.dclou ...
【前端开发环境安装、配置、项目搭建全教程】
前端开发环境安装.配置.项目搭建全教程 1.Node环境安装简单的说 Node.js 就是运行在服务端的 JavaScrip,基于 Chrome JavaScript 运行时建立的一个平台,Node ...
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
Vue3安装配置.开发环境搭建(组件安装卸载)(图文详细) 本文目录: 一.vue的主要安装使用方式二.node.js安装和配置 1.支持运行 Node.js的平台 2.Node.js 版本开发发布 ...
【鸿蒙 HarmonyOS】HarmonyOS 开发环境搭建 ( Node.js 安装 )
文章目录一.下载 Node.js® 安装包二.安装 Node.js 三.验证 Node.js 鸿蒙 HarmonyOS 开发环境 DevEco Studio 安装 , 参考博客 : [鸿蒙 Har ...
html怎么在服务器环境,如何搭建node服务器环境？
Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用来方便快速地搭建易于扩展的网络应用.Node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量又高效,非常适合运行 ...
如何在 Windows 10 中搭建 Node.js 环境？
2019独角兽企业重金招聘Python工程师标准>>> [编者按]本文作者为 Szabolcs Kurdi,主要通过生动的实例介绍如何在 Windows 10 中搭建 Node.js ...
java开发环境安装原理,java开发环境搭建 java开发环境的完整搭建过程
想了解java开发环境的完整搭建过程的相关内容吗,Rosalh在本文为您仔细讲解java开发环境搭建的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:java开发环境搭建步骤,java开发环 ...
SLAM导航机器人零基础实战系列：（五）树莓派3开发环境搭建——1.安装系统ubuntu_mate_16.04...
SLAM导航机器人零基础实战系列:(五)树莓派3开发环境搭建--1.安装系统ubuntu_mate_16.04 摘要通过前面一系列的铺垫,相信大家对整个miiboo机器人的DIY有了一个清晰整体的认 ...
pybullet机器人仿真环境搭建 1.安装pybullet，测试官方示例，基础环境搭建
pybullet机器人仿真环境搭建 1.安装pybullet 前言安装测试官方示例基础环境搭建导入pybullet 创建服务端 (可选)配置图形GUI 添加资源路径设置重力加载模型迭代运 ...

最新文章

热门文章