Node.js和Vue的安装与配置(超详细步骤)

2024-03-15 1195阅读

温馨提示:这篇文章已超过380天没有更新,请注意相关的内容是否还可用!

目录

    • 一、下载
    • 二、安装
    • 三、配置
    • 四、安装配置vue
    • 五、构建运行Vue项目

      一、下载

      Node.js官网下载

      大家根据自己的系统进行下载安装包(我的电脑是windows10-64位,所以下载第一个)

      Node.js和Vue的安装与配置(超详细步骤)

      二、安装

      点击下载的安装包进行安装

      Node.js和Vue的安装与配置(超详细步骤)

      点击Next

      Node.js和Vue的安装与配置(超详细步骤)

      打勾并点击Next

      Node.js和Vue的安装与配置(超详细步骤)

      默认安装路径是C:\Program Files\nodejs\,我这里选择在D:\Program Files\nodejs\目录下安装,点击Next

      Node.js和Vue的安装与配置(超详细步骤)

      点击Next

      Node.js和Vue的安装与配置(超详细步骤)

      点击Next

      Node.js和Vue的安装与配置(超详细步骤)

      点击Install

      Node.js和Vue的安装与配置(超详细步骤)

      安装完成点击Finish

      Node.js和Vue的安装与配置(超详细步骤)

      安装完成后Node.js会自动将node配置到环境变量中,我们打开Windows的cmd窗口输入node -v,查看node版本

      Node.js和Vue的安装与配置(超详细步骤)

      输入npm -v,看到npm版本

      Node.js和Vue的安装与配置(超详细步骤)

      三、配置

      在cmd窗口输入npm root -g,查看全局安装的模块所在目录

      Node.js和Vue的安装与配置(超详细步骤)

      在安装的目录下新建两个文件夹node_cache和node_global

      Node.js和Vue的安装与配置(超详细步骤)

      打开cmd命令窗口,配置全局安装的模块路径(注意"D:\Program Files\nodejs\node_global"是我电脑上的安装路径,你们以自己电脑实际安装路径进行替换)

      npm config set prefix “D:\Program Files\nodejs\node_global”

      Node.js和Vue的安装与配置(超详细步骤)

      配置缓存路径(注意路径)

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

      Node.js和Vue的安装与配置(超详细步骤)

      在cmd窗口输入npm root -g,即可看见全局安装的模块路径已经切换成我们配置的路径了

      Node.js和Vue的安装与配置(超详细步骤)

      为了之后使用npm下载东西时速度快一些,需要配置镜像站,这里选择淘宝镜像,打开cmd输入

      npm config set registry=http://registry.npm.taobao.org
      

      Node.js和Vue的安装与配置(超详细步骤)

      输入npm config get registry,输出http://registry.npm.taobao.org/即表示配置成功

      Node.js和Vue的安装与配置(超详细步骤)

      现在配置一下Node.js的环境变量,设置环境变量的目的是在任何目录都可以执行node和vue命令。

      windows10可以使用搜索功能搜索环境变量,点击编辑系统环境变量

      Node.js和Vue的安装与配置(超详细步骤)

      点击环境变量

      Node.js和Vue的安装与配置(超详细步骤)

      找到Path,点击编辑

      Node.js和Vue的安装与配置(超详细步骤)

      点击新建,我电脑的node_global路径是"D:\Program Files\nodejs\node_global",配置完成后点击确定,关闭环境变量配置的所有窗口

      Node.js和Vue的安装与配置(超详细步骤)

      四、安装配置vue

      输入npm info vue,查看是否能够获取vue信息,这里报下图的错误话需要使用windows PowerShell管理员模式

      Node.js和Vue的安装与配置(超详细步骤)

      右键左下角的windows图标选择windows PowerShell(管理员),输入npm info vue即可

      Node.js和Vue的安装与配置(超详细步骤)

      Node.js和Vue的安装与配置(超详细步骤)

      输入npm install vue -g 开始安装vue

      Node.js和Vue的安装与配置(超详细步骤)

      输入npm i @vue/cli -g 开始安装Vue-cli脚手架

      Node.js和Vue的安装与配置(超详细步骤)

      五、构建运行Vue项目

      我在D盘创建了一个demo目录,在命令行使用cd D:\demo进入到了demo目录,准备构建第一个vue项目

      Node.js和Vue的安装与配置(超详细步骤)

      输入vue create first,出现下面的提示,让选择创建Vue3还是Vue2的项目,我这里选择Vue3直接回车

      (注意这里可能出现“vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。”的问题,解决方案请参考我的这篇文章https://blog.csdn.net/qq_35156196/article/details/127576640?spm=1001.2014.3001.5502)

      Node.js和Vue的安装与配置(超详细步骤)

      这张图片是vue项目已经构建好了

      Node.js和Vue的安装与配置(超详细步骤)

      输入cd first,再输入npm run serve,即可成功运行vue项目

      Node.js和Vue的安装与配置(超详细步骤)

      打开浏览器输入http://localhost:8080/即可访问vue的页面了

      Node.js和Vue的安装与配置(超详细步骤)

VPS购买请点击我

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

目录[+]