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

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

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

目录
相关文章
|
26天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
34 3
|
1月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
1月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
619 0
|
1月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
177 1
|
24天前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
56 0
|
1月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
37 0
|
1月前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
87 0
|
4天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
4天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
4天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
下一篇
无影云桌面