开源项目renren-fast-vue开发环境部署(前端部分)
开源项目renren-fast-vue开发环境部署(前端部分)
说明:renren-fast是一个开源的基于springboot的前后端分离手脚架,当前版本是3.0
开发文档需要付费,官方的开发环境部署介绍相对比较简单,对于想尝试搭建个项目的新手而言不太友好,特此将自己搭建的过程记录如下
一、环境准备
构建vue项目我们需要使用npm命令,到node官网下载当前稳定版本并安装
按默认安装完后,命令行
node -v
、npm -v
查看版本信息
二、下载项目和所需组件
直接下载zip包或通过git克隆到本地仓库,如下:
git clone https://github.com/daxiongYang/renren-fast-vue.git
下载所需的vue相关组件,逐个执行以下命令
npm config set registry=http://registry.npm.taobao.org #配置淘宝的镜像
npm config list #查看当前npm的配置信息
下载必要的组件,执行以下命令
npm install vue -g
npm install vue-router -g
npm install vue-cli -g
#查看vue版本,V是大写
vue -V
更多的安装教程可以参考以下这篇博文,很详细,值得一看
三、下载依赖
进入项目文件夹/renren_fast_vue
npm install #下载依赖包,提前配置淘宝镜像,下载会快点
下载依赖时可能会出现以下报错:
问题1:如下图,Downloading https://chromedriver.storage.googleapis.com/2.27/chromedriver_win64.zip(明显是被墙了)
解决办法:
#指定淘宝的镜像重新下载
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver #下载后再次下载依赖
npm i
四、启动项目
启动前端,在前端目录下执行命令
npm run dev
启动时可能遇到的报错
问题2:启动前端时报错,如下图,node sass不支持当前环境,实质node-sass4.9.0安装失败
浏览器界面提示<% if (process.env.NODE_ENV === 'production') { %> <% }else { %> <% } %>
解决办法:
#清除当前的sass
npm uninstall node-sass
#重新安装sass,若没有报错,即可再次启动项目
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
#再次启动项目
npm run dev
再次在浏览器打开http://localhost:8001,成功打开前端项目,提前启动后端即可正常登陆,用户
admin/admin
至此前端项目开发环境部署就完成了
下一篇博文将继续介绍基于官方文档新建一个可增删改查的商品报表实战
开源项目renren-fast-vue开发环境部署(前端部分)的更多相关文章
- node vue 开发环境部署时,外部访问页面出现: Invalid Host header 服务器域名访问出现的问题
这是新版本 webpack-dev-server 出于安全考虑, 默认检查 hostname,如果hostname不是配置内的,将中断访问.顾仅存在于开发环境: npm run dev,打包之后不会 ...
- 开源项目renren-fast开发环境部署(后端部分)
开源项目renren-fast开发环境部署(后端部分) 说明:renren-fast是一个开源的基于springboot的前后端分离手脚架,当前版本是3.0 开发文档需要付费,官方的开发环境部署介绍相 ...
- 【原创】windows下搭建vue开发环境+IIS部署
[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安 ...
- windows下搭建vue开发环境+IIS部署
原创]win10下搭建vue开发环境 https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...
- Vue 生产环境部署
简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一. ...
- 面试官:自己搭建过vue开发环境吗?
开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...
- 十分钟上手-搭建vue开发环境(新手教程)
想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...
- Eclipse for Python开发环境部署
Eclipse for Python开发环境部署 工欲善其事,必先利其器. 对开发人员来说,顺手的开发工具必定事半功倍.自学编程的小白不知道该选择那个开发工具,Eclipse作为一个功能强大且开源免费 ...
- vue开发环境搭建及热更新
写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...
随机推荐
- InnoDB 存储引擎简介
InnoDB 核心特性 MVCC(Multi-Version Concurrency Control,多版本并发控制),事务处理,行级锁,热备份,自动故障恢复( Crash Safe Recovery ...
- Cron表达式在 定时执行专家 5.0 中的使用方式
在<定时执行专家 V5.0>程序内部使用了包含 6 位的 Cron表达式,第一个字段(second)没有使用.程序内部一直 second 位是 0.在 Cron表达式的界面上可以设置 5位 ...
- WebSocket All In One
WebSocket All In One WebSocket heartbeat WebSocket 心跳检测 ping pong refs xgqfrms 2012-2020 www.cnblogs ...
- API & YApi
API & YApi 接口管理服务 YApi http://yapi.demo.qunar.com/ https://ued.qunar.com/ build bug https://gith ...
- OTA development
OTA development OTA update OTA Over the Air / 无线下载 https://en.wikipedia.org/wiki/Over-the-air_progra ...
- vue-parent-child-lifecycle-order
vue-parent-child-lifecycle-order vue parent child lifecycle order live demo https://99kyx.csb.app/ h ...
- Typescript & readonly property
Typescript & readonly property https://www.typescriptlang.org/docs/handbook/classes.html#readonl ...
- NGK公链DeFi发力,Baccarat项目引爆流动性挖矿热潮
DeFi市值屡创新高,在这条康庄大道上,人们摩拳擦掌,就像90年代美国西部淘金热一般.DeFi带来的流动性挖矿构成了今年加密货币一道靓丽的风景线,而人们手握的不再是当年的锄头铲子,而是一串代码. 随着 ...
- Excel和CSV格式文件的不同之处
来源:https://blog.csdn.net/weixin_39198406/article/details/78705016 1.个人理解:为何选择使用csv来存储接口测试用例相关字段数据,而不 ...
- (转)IP协议详解之子网寻址、子网掩码、构造超网
原文网址:http://www.cnblogs.com/way_testlife/archive/2010/10/05/1844399.html 子网寻址 1. 从两级IP地址到三级IP地址 < ...