Vue路由与node.js环境搭建2

简介: Vue路由与node.js环境搭建2

二. node.js环境搭建

1.官网下载地址

node.js中文官网

https://nodejs.org/zh-cn/download

2.下载好安装包

这里我们不选择安装程序安装,选择解压版安装

3.解压

下载好后到安装目录

解压后在当前解压的目录下新建node_global和node_cache这两个目录

新建目录说明

          node_global:npm全局安装位置

          node_cache:npm缓存路径

4.配置环境变量

新建一个环境变量,变量名输入NODE_HOME,变量值为安装的目录

编辑Path

%NODE_HOME%
%NODE_HOME%\node_global

5.测试是否安装成功

node -v

npm -v

打开cmd窗口,输出如下命令会输出NodeJs和npm的版本号,出现版本号时说明安装成功

6.配置npm全局模块路径和cache默认安装位置

打开cmd,分开执行如下命令:

     npm config set cache "D:\initPath\node-v10.15.3-win-x64\node_cache"
      npm config set prefix "D:\initPath\node-v10.15.3-win-x64\node_global"

框中修改为刚刚创建的两个目录下的路径

注意点

注1:将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来

注2:如果执行命令卡死,可以删除C:\Users\用户名\.npmrc 后重新执行。(用户名:为当前电脑的用户名)

注3:"D:\initPath\node-v10.15.3-win-x64\node_global",双引号不能少

7.修改npm镜像提高下载速度

7.1 --registry

        设置淘宝源

         npm config set registry https://registry.npm.taobao.org/

          查看源,可以看到设置过的所有的源

         npm config get registry

         注1:其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中

             registry=https://registry.npm.taobao.org

7.2 cnpm

         npm install -g cnpm --registry=https://registry.npm.taobao.org

         注1:cnpm安装完成后,以后就可以用cnpm命令代替npm命令, 此时npm还是会用官方镜像,cnpm会用国内镜像

        注2:如果要恢复成原来的设置,执行如下:

              npm config set registry https://registry.npmjs.org/


8.验证安装结果

查看淘宝镜像设置情况

         npm get registry

查看npm全局路径设置情况

        此步骤随便全局安装一个模块就可以测评

        npm install webpack -g

        以上命令执行完毕后,会生成如下文件

        %node_home%\node_global\node_modules\webpack

9.报错解决

npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_cacache npm ERR! errno -4048 npm ERR! Error: EPERM: operation not permitted, mkdir 'D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_cacache' npm ERR! [Error: EPERM: operation not permitted, mkdir 'D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_cacache'] { npm ERR! errno: -4048, npm ERR! code: 'EPERM', npm ERR! syscall: 'mkdir', npm ERR! path: 'D:\tools\nodejs\node-v18.16.1-win-x64\node_cache\_cacache', npm ERR! requiredBy: '.' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It's possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.
npm ERR! Log files were not written due to an error writing to the directory: D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_logs npm ERR! You can rerun the command with --loglevel=verbose to see the logs in your terminal

在运行 npm install webpack -g  命令时出现以上报错可能是权限问题,我们需要到node_cache和node_global文件夹中将权限修改全部加上,使用完全控制

选择完全控制

注意,不只是node_global需要修改node_cache也需要修改

9.node.js运行启动项目

9.1我们将准备好的前端项目解压到文件夹中

9.2 地址栏输入cmd进入cmd窗口

输入 npm -i 下载安装

9.3下载安装完成之后启动项目

输入 npm run dev 启动项目

启动完成后浏览器会自动弹出页面

今天的分享到这里就结束了,感谢各位大大的观看,各位大大的三连是博主更新的动力,感谢谢谢谢谢谢谢谢谢各位的支持!!!!!

目录
相关文章
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
41 4
|
2月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
51 3
|
2月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
2月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
905 0
|
2月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
224 1
|
1月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
93 0
|
2月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
82 0
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
29 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
107 2
|
1月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
21 0