Vue项目启动过程全记录(node.js运行环境搭建)

这篇具有很好参考价值的文章主要介绍了Vue项目启动过程全记录(node.js运行环境搭建)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、安装node.js并配置环境变量

1、安装node.js

从Node.js官网下载安装包并安装。然后在安装后的目录(如果是下载的压缩文件,则是解压缩的目录)下新建node_global和node_cache这两个文件夹。

node_global:npm全局安装位置
node_cache:npm缓存路径

Vue项目启动过程全记录(node.js运行环境搭建),前端,Vue,vue.js,node.js,arcgis

2、配置环境变量

  1. 在系统变量里添加一个变量NODE_HOME,值为node.js的安装路径如:D:\Program Files\nodejs
    Vue项目启动过程全记录(node.js运行环境搭建),前端,Vue,vue.js,node.js,arcgis
  2. 在Path中添加两个变量:

%NODE_HOME%
%NODE_HOME%\node_global

Vue项目启动过程全记录(node.js运行环境搭建),前端,Vue,vue.js,node.js,arcgis

  1. 环境变量配置好后,打开cmd,输入node -v和npm -v,若显示出版本号,说明安装配置成功。

node -v
npm -v

Vue项目启动过程全记录(node.js运行环境搭建),前端,Vue,vue.js,node.js,arcgis

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

在此步骤中所有npm命令最好以管理员身份运行的cmd中执行并且都要切换到node.js的安装目录下执行,不然可能导致无法识别。
说明:这一步是将前面安装之后新建的两个文件夹node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
打开cmd,将执行目录切换到node.js的安装目录,分别执行以下命令,

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

Vue项目启动过程全记录(node.js运行环境搭建),前端,Vue,vue.js,node.js,arcgis
注意,路径用的引号是英文状态下的双引号,不是单引号,也不是中文的双引号。

4、修改npm镜像并安装cnpm

使用npm的官网镜像下载依赖包速度太慢,为了提高速度,这里我们使用npmmirror镜像,同样是在cmd中,将执行目录切换到node.js的安装目录,执行以下命令

npm install -g cnpm --registry=https://registry.npmmirror.com

Vue项目启动过程全记录(node.js运行环境搭建),前端,Vue,vue.js,node.js,arcgis

5、安装vue-cli脚手架

以上都设置好后,重新打开cmd,执行以下命令,然后等待安装完成就行。

npm install -g @vue/cli

Vue项目启动过程全记录(node.js运行环境搭建),前端,Vue,vue.js,node.js,arcgis
只要执行结果中没有出现 ERR! 都算执行成功了

二、启动Vue项目

说明:能正常运行的Vue项目的目录里都有一个名为node_modules的文件夹,里面存放了运行这个vue项目需要的所有依赖包,一般来讲,从网上直接clone来的别人的项目目录里是不会包含node_modules文件夹的,因为占得内存太大。所以要想运行别人的项目,必须先重新给它下载依赖包。

  1. 在Vue项目目录下打开cmd,执行cnpm install命令,等待npm安装完成(因为前面已经设置好了cnpm,所以这里可以直接用cnpm替换npm进行安装)

cnpm install

npm安装完成后,项目目录下就会出现node_modules文件夹了

  1. 然后执行cnpm run dev,运行vue项目

cnpm run dev

出现以上就代表项目成功运行,在浏览器中输入http://localhost:8088即可看到项目主界面(本项目因为端口号是8088,因此此端口为8088,这里的端口按项目实际端口号而定)。

注意:在执行命令时可能存在以下报错问题,可通过以下链接解决
创建vue项目时, 无法加载文件 D:\Program Files\nodejs\node_global\cnpm.ps1,因为在此系统上禁止运行脚本,解决方法。文章来源地址https://www.toymoban.com/news/detail-825598.html

到了这里,关于Vue项目启动过程全记录(node.js运行环境搭建)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue路由的使用及node.js下载安装和环境搭建

    目录 一、Vue路由 1.1 简介 ( 1 )  特点 ( 2 )  作用 1.2 实例 ( 1 )  引入 ( 2 )  组件 ( 3 )  关系 ( 4 )  路由 ( 5 )  事件 ( 6 )  锚点 二、nodeJS 2.1  下载 2.2  安装 2.3  环境搭建 新增 添加 测试 配置 运行 Vue路由是Vue.js框架中用于管理页面 导航的插件 。它允许开发者通过定义路由规

    2024年02月07日
    浏览(42)
  • node.js版本过高,导致vue2 版本的项目无法正常启动

    node.js版本过高,导致vue2 版本的项目无法正常启动 node的版本是18 ,vue版本是2 ;npm install 失败 1、未采取提示的方式,而是利用了npx命令; 使用npx指定npm的版本 npx -p npm@6 npm i --legacy-peer-deps 注意:如果这不能立即起作用,也许可以先删除node_modules和package-lock.json。它们将被重

    2024年02月08日
    浏览(47)
  • nvm对node版本进行管理及疑难解决,vue项目搭建与启动

    nvm安装 1、nvm地址:https://github.com/coreybutler/nvm-windows/releases 2、无需配置安装包,nvm-setup-v1.1.10.zip 解压后双击nvm-setup.exe,选择安装路径,一路next即可 打开dos窗口输入nvm version查看安装是否成功 node版本管理 1、nvm可配置国内镜像 2、nvm管理node版本 PS:若无法切换node版本,或者

    2024年02月20日
    浏览(28)
  • 【Node.js】一文带你开发博客项目之接口(处理请求、搭建开发环境、开发路由)

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,也会涉及到服务端 📃 个人状态: 在校大学生一枚,已拿 offer(秋招) 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2Vue3项目实战 🥝Node.js 内容 参考链接 Node.js(一) 初识 Node.js DNS 解析,建

    2023年04月21日
    浏览(42)
  • vue3+vite+ts项目集成科大讯飞语音识别(项目搭建过程以及踩坑记录)

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源码可以找我免费领取 🔥 前端

    2023年04月09日
    浏览(34)
  • 【Vue篇】mac上Vue 开发环境搭建、运行Vue项目(保姆级)

    首先,了解一下,Vue 的整体开发环境。 Homebrew :Mac 系统下的包管理器,类似于 Linux 下的 apt-get,Windows 的控制面板 - 安装删除程序 Node.js : JavaScript 运行环境(runtime),不同系统之间不能直接运行各种编程语言,Runtime类似于各国会议上的同声传译 npm : Nodejs 下的包管理器

    2024年02月05日
    浏览(31)
  • App测试环境搭建全过程,包含JAVA JDK配置、Android SDK、、Appium、Node.js、模拟器配置【究极保姆级】还不会我吃奥利给

    目录 一、环境搭建  1、Windows的java jdk的配置 (1)下载Java的jdk,我建议用Java的1.8版本,比较稳定,我选择的也是1.8版本         JDK下载链接和网盘链接           下图是通过网址下载的步骤, (2)下载完毕,安装java的jdk步骤                 一定要注意细节,

    2024年02月02日
    浏览(34)
  • 【解决】运行vue项目,启动报错 in ./node_modules/@intlify/core-base/dist/core-base.cjs

    我的处理方式: 一开始查了好多方法,删除node_modules,重新安装,切换node版本等,但是发现并没有用 之后来发现是安装依赖包的时候有些包安装失败导致的,只要有针对性的重新安装依赖就可以了 例如: in ./node_modules/@intlify/ core-base /dist/core-base.cjs 如果在项目启动的时候遇到

    2024年02月08日
    浏览(28)
  • Node.js -- JavaScript的运行环境

    HTML : 骨架 CSS :外观 JS : 灵魂 JavaScript可以在浏览器中被执行的原因是浏览器里面都有一个JavaScript的解析引擎 浏览器 解析引擎 Chrome V8 Firefox OdinMonkey (奥丁猴) Safri JSCore IE Chakra(查克拉) 每个浏览器都内置了DOM、BOM这样的API函数。 V8引擎负责解析和执行JavaScript代码 内置

    2023年04月10日
    浏览(25)
  • 【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)

    H5 项目基于 Web 技术,可以在智能手机、平板电脑等移动设备上的浏览器中运行,无需下载和安装任何应用程序,且H5 项目的代码和资源可以集中在服务器端进行管理,只需更新服务器上的代码,即可让所有顾客访问到最新的系统版本。 本系列将以肯德基自助点餐页面为模板

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包