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

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

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

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
57 3
|
6天前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
2月前
|
JavaScript API
vue 批量自动引入并注册组件或路由
vue 批量自动引入并注册组件或路由
|
9天前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
14 1
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
|
2天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
12 4
|
6天前
|
JavaScript 网络架构
|
9天前
|
JSON JavaScript 数据格式
Vue路由params、query参数丢失解决
该文章介绍了在Vue中使用`params`和`query`进行路由参数传递时,如何通过`sessionStorage`或`localStorage`解决参数丢失的问题。
15 2
|
9天前
|
JavaScript
Vue3基础(20)___Vue3配置错误路由重定向写法
本文介绍了Vue 3中配置错误路由重定向的正确写法,包括使用参数和自定义正则表达式来定义通配符路由。
24 0
Vue3基础(20)___Vue3配置错误路由重定向写法
|
9天前
|
JavaScript 应用服务中间件 Linux
宝塔面板部署Vue项目、服务端Node___配置域名
本文介绍了如何使用宝塔面板在阿里云服务器上部署Vue项目和Node服务端项目,并配置域名。文章详细解释了安装宝塔面板、上传项目文件、使用pm2启动Node项目、Vue项目打包上传、以及通过Nginx配置域名和反向代理的步骤。
23 0
宝塔面板部署Vue项目、服务端Node___配置域名
|
9天前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
12 0
vue配合axios连接express搭建的node服务器接口_简单案例
下一篇
无影云桌面