Vue前端项目安装及相关问题解决

目录

安装

以人人开源前端项目安装为例,安装部署及安装过程中的问题的解决思路。开源地址如下:

人人开源

 下载代码到本地

安装visial studio code(即VSCode)作为前端开发工具,使用前端前必须安装node.js作为让js运行在服务端的开发平台。

到官网下载node.js,注意下载的版本,版本选取有误可能导致后序安装出现异常。我们这里安装了V12,这里可以看到支持的npm版本,要保持一致。

下载安装完成,在VSCode打开终端,查看版本:

Vue项目的开始与安装也可以参考开源文档:Getting started · renrenio/renren-fast-vue Wiki · GitHub

使用VSCode导入项目

设置镜像,https://registry.npm.taobao.org 已经过期, 使用命令更新为如下镜像:

npm config set registry https://registry.npmmirror.com

这里是阿里镜像,也可以更新为清华、中科院相关的镜像库。

初始化:

npm install

启动项目:

npm run dev

运行成功后,就可以打开访问页面了:

问题解决

  • 安装错误,提示pm ERR! chromedriver@2.27.2 install: `node install.js`

找不到chromedriver包,可以手动下载一个放在临时目录下

安装时指定此目录:

npm install chromedriver --chromedriver_filepath=F:\code\workspace\renren-fast-vue\tmp\chromedriver_win32.zip

  • 安装中如果出现了sass错误提示
  • 执行命令:

     
    npm install --save node-sass

    • gyp ERR! stack Error: Could not find any Visual Studio installation to use

    yp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
    gyp ERR! find VS looking for Visual Studio 2015
    gyp ERR! find VS - not found
    gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
    gyp ERR! find VS
    gyp ERR! find VS **************************************************************
    gyp ERR! find VS You need to install the latest version of Visual Studio
    gyp ERR! find VS including the "Desktop development with C++" workload.
    gyp ERR! find VS For more information consult the documentation at:
    gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
    gyp ERR! find VS **************************************************************
    gyp ERR! find VS
    gyp ERR! configure error
    gyp ERR! stack Error: Could not find any Visual Studio installation to use
    gyp ERR! stack     at VisualStudioFinder.fail (F:\code\workspace\renren-fast-vue\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
    gyp ERR! stack     at F:\code\workspace\renren-fast-vue\node_modules\node-gyp\lib\find-visualstudio.js:74:16
    gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (F:\code\workspace\renren-fast-vue\node_modules\node-gyp\lib\find-visualstudio.js:351:14)    
    gyp ERR! stack     at F:\code\workspace\renren-fast-vue\node_modules\node-gyp\lib\find-visualstudio.js:372:16
    gyp ERR! stack     at F:\code\workspace\renren-fast-vue\node_modules\node-gyp\lib\util.js:54:7
    gyp ERR! stack     at F:\code\workspace\renren-fast-vue\node_modules\node-gyp\lib\util.js:33:16
    gyp ERR! stack     at ChildProcess.exithandler (child_process.js:315:5)
    gyp ERR! stack     at ChildProcess.emit (events.js:314:20)
    gyp ERR! stack     at maybeClose (internal/child_process.js:1022:16)
    gyp ERR! System Windows_NT 10.0.19042

    • Downloading Python failed. Error: Error: certificate has expired

    https://www.python.org/ftp/python/2.7.15/python-2.7.15.amd64.msi 下载安装,如果还不生效,就关闭SSL验证

 npm config set strict-ssl false

  • 提示用powershell执行脚本

Starting installation...
Please restart this script from an administrative PowerShell!

以管理员身份打开powershell,执行命令,运行成功

npm install --global --production windows-build-tools

ERR! stack Error: `gyp` failed with exit code: 1
    //删除 .node-gyp/  rm -rf .node-gyp///执行npm i -g node-gyp//删除 项目名称/node_modulesrm -rf proName/node-modules执行npm i -d//最后重新installnpm install

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/739334.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 生成SO - 基础工程创建

最近需要给小伙伴扫盲一下如何使用Android Studio 生成一个SO文件,网上找了很多都没有合适的样例,那只能自己来写一个了。 原先生成SO是一个很麻烦的事情,现在Android Studio帮忙做了很多的事情,基本只要管好自己的C代码即可。 …

【梳理】k8s使用Operator搭建Flink集群(高可用可选)

文章目录 1. 架构图2. helm 安装operator3. 集群知识k8s上的两种模式:Native和Standalone两种CR 4. 运行集群实例Demo1:Application 集群Demo2:Session集群优劣 5. 高可用部署问题1:High availability should be enabled when sta…

3.1_2 覆盖与交换

3.1_2 覆盖与交换 (一)覆盖技术 早期的计算机内存很小,比如IBM 推出的第一台PC机最大只支持1MB大小的内存。因此经常会出现内存大小不够的情况。 后来人们引入了覆盖技术,用来解决“程序大小超过物理内存总和”的问题。 覆盖技术的…

DevOps-Jenkins-CI持续集成操作

创建项目 创建个web项目 我这里直接用Spring Web自动生成的demos 启动项目,访问展示如下默认页面信息 项目新增Docker构建配置 在项目下新建docker目录,新增Dockerfile、docker-compose.yml文件 Dockerfile文件,将mytest.jar 复制到容器的…

移动硬盘无法读取怎么修复?分享三个简单方法

移动硬盘作为现代数据存储的重要工具,一旦出现故障,往往会让我们感到焦虑和困惑。当移动硬盘无法读取时,我们需要冷静分析并采取适当的措施来修复它。本文将为您介绍三种有效的修复方法。 一、检查物理连接与驱动程序 当移动硬盘无法读取时&…

LiveGBS流媒体服务器中海康摄像头GB28181公网语音对讲、语音喊话的配置

LiveGBS海康摄像头国标语音对讲大华摄像头国标语音对讲GB28181语音对讲需要的设备及服务准备 1、背景2、准备2.1、服务端必备条件(注意)2.2、准备语音对讲设备2.2.1、不支持跨网对讲示例2.2.2、 支持跨网对讲示例 3、开启音频开始对讲4、搭建GB28181视频…

动手学深度学习-注意力机制Transformer

注意力机制 1. 注意力提示 1.1. 生物学中的注意力提示 **自主性提示(随意线索):收到认知和意识的控制,有主观意愿的推动。**如下图,所有纸制品都是黑白印刷的,但咖啡杯是红色的。 换句话说,这…

【办公类-21-09】三级育婴师 视频转文字docx(等线小五单倍行距),批量改成“宋体小四、1.5倍行距、蓝色字体”

作品展示: 背景需求: 一、视频处理 1、育婴师培训的现场视频 2、下载视频,将视频换成考题名称 二、音频 视频用格式工厂转成MP3音频 3、转文字doc 把音频放入“网易云见外工作台”转换为“文字" 等待5分钟,音频文字会被写…

Python元组(Tuple)深度解析!

目录 1. 什么是元组? 2. 创建元组 3.访问元组 4.元组的运算 5.修改元组不可行 6.元组的应用场景 前面的博客里,我们详细介绍了列表(List)这一种数据类型,现在我们来讲讲与列表相似的一种数据类型,元组…

【Python】【Matplotlib】fig, ax = plt.subplots() 返回的fig和ax是什么?

【Python】【Matplotlib】fig, ax plt.subplots() 返回的fig和ax是什么? 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&a…

求职干货!如何自信地进行自我介绍和面试问答!

面试在求职过程中扮演着至关重要的角色。它不仅是雇主评估候选人能力和适应性的关键环节,也是候选人展示自我、展示技能和经验的绝佳机会。通过面试,雇主可以更直接地了解候选人的沟通能力、解决问题的能力以及团队合作精神,这些都是成功工作…

ChatGPT GPT4科研应用、数据分析与机器学习、论文高效写作、AI绘图技术

原文链接:ChatGPT GPT4科研应用、数据分析与机器学习、论文高效写作、AI绘图技术https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247596849&idx3&sn111d68286f9752008bca95a5ec575bb3&chksmfa823ad6cdf5b3c0c446eceb5cf29cccc3161d746bdd9f2…

实例成员、静态成员

一、静态成员先于实例成员存在 类被加载到内存时,静态变量分配内存空间,静态方法分配入口地址 只有创建对象之后,实例变量分配内存空间,实例方法分配入口地址 当再创建对象时,实例方法不再分配入口地址,…

【Java从发入门到精通】Java StringBuffer 和 StringBuilder 类

Java StringBuffer 和 StringBuilder 类 当对字符串进行修改的时候,需要使用 StringBuffer 和 StringBuilder 类。 和 String 类不同的是,StringBuffer 和 StringBuilder 类的对象能够被多次的修改,并且不产生新的未使用对象。 在使用 Stri…

蓝桥杯[OJ 3412]-最小化战斗力差距-CPP-贪心

目录 一、问题描述: 二、整体思路: 三、代码: 一、问题描述: 二、整体思路: 首先每个值都有可能为min(b),那么对于每个可能为min(b)的值,要使得max(a)尽可能小,因此枚举所有相差最…

高颜值抓包工具Charles,实现Mac和IOS端抓取https请求

Hi,大家好。在进行测试的过程中,不可避免的会有程序报错,为了能更快修复掉Bug,我们作为测试人员需要给开发人员提供更准确的报错信息或者接口地址,这个时候就需要用到我们的抓包工具。 常见的抓包工具有Fiddler、Char…

【NR技术】 3GPP支持无人机服务的关键性能指标

1 性能指标概述 5G系统传输的数据包括安装在无人机上的硬件设备(如摄像头)收集的数据,例如图片、视频和文件。也可以传输一些软件计算或统计数据,例如无人机管理数据。5G系统传输的业务控制数据可基于应用触发,如无人机上设备的开关、旋转、升…

Oracle之ADG与DG的区别?

在上云后的Oracle数据灾备场景中,我们经常听到DBA迁移工程师讲到“在这个项目中用ADG进行数据实时备份,ADG比DG更好!”。究竟ADG作Oracle数据灾备的优势在什么地方? 一、ADG主要解决了DG时代读写不能并行的问题 DG时代的数据同步…

c# winform部门管理系统

c# winform部门管理系统 数据库SQL语句脚本代码 CREATE TABLE Department(DepartmentID INT PRIMARY KEY IDENTITY(1,1),Name NVARCHAR(50) NOT NULL ); SELECT * FROM Department -- 插入部门数据 INSERT INTO Department (Name) VALUES (人力资源部); INSERT INTO Departmen…

【c 语言 】移位操作符详解

🎈个人主页:豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:C语言 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步&…