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 启动项目

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

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

目录
相关文章
|
17天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
36 6
|
2天前
|
JavaScript
vue启动报错解决Syntax Error: Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
vue启动报错解决Syntax Error: Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
|
4天前
|
JavaScript
vue中watch监听路由传来的参数变化问题
vue中watch监听路由传来的参数变化问题
5 0
|
5天前
|
缓存 JavaScript
在 Vue 组件中使用计算属性和侦听器来响应路由变化
Vue Router 中,计算属性和侦听器常用于根据路由变化更新组件状态。计算属性缓存依赖,当路由参数改变时自动更新,如示例中的 `userId`。侦听器则监听 `$route` 变化,执行相应操作,例如在 `currentUserId` 示例中响应 `userId` 更新。计算属性适合简单变化,而异步操作或复杂场景可选用侦听器。Vue 3 中,`watchEffect` 减少了部分侦听场景的复杂性。总之,它们用于组件内部响应路由变化,而非直接处理路由逻辑。
12 4
|
13天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
13天前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
18天前
|
JavaScript 前端开发
vue3+ts+element home页面侧边栏+头部组件+路由组件组合页面教程
这是一个Vue.js组件代码示例,展示了带有侧边栏导航和面包屑导航的布局。模板中使用Element Plus组件库,包含可折叠的侧边栏,其中左侧有 Logo 和导航列表,右侧显示更具体的子菜单。`asideDisplay`控制侧边栏宽度。在`script`部分,使用Vue的响应式数据和生命周期钩子初始化路由相关数据,并从localStorage恢复状态。样式部分定义了组件的颜色、尺寸和布局。
19 1
|
3天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
12 0
|
3天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
3天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
12 0