开源项目renren-fast-vue开发环境部署(前端部分)

说明:renren-fast是一个开源的基于springboot的前后端分离手脚架,当前版本是3.0

开发文档需要付费,官方的开发环境部署介绍相对比较简单,对于想尝试搭建个项目的新手而言不太友好,特此将自己搭建的过程记录如下

一、环境准备

  1. 构建vue项目我们需要使用npm命令,到node官网下载当前稳定版本并安装

  2. 按默认安装完后,命令行node -vnpm -v查看版本信息

二、下载项目和所需组件

  1. 直接下载zip包或通过git克隆到本地仓库,如下:

    git clone https://github.com/daxiongYang/renren-fast-vue.git
  2. 下载所需的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

    更多的安装教程可以参考以下这篇博文,很详细,值得一看

    https://www.cnblogs.com/lgx5/p/10732016.html

三、下载依赖

  1. 进入项目文件夹/renren_fast_vue

    npm install 	#下载依赖包,提前配置淘宝镜像,下载会快点
  2. 下载依赖时可能会出现以下报错:

四、启动项目

  1. 启动前端,在前端目录下执行命令

    npm run dev
  2. 启动时可能遇到的报错

    • 问题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
    1. 再次在浏览器打开http://localhost:8001,成功打开前端项目,提前启动后端即可正常登陆,用户admin/admin

至此前端项目开发环境部署就完成了

下一篇博文将继续介绍基于官方文档新建一个可增删改查的商品报表实战

开源项目renren-fast-vue开发环境部署(前端部分)的更多相关文章

  1. node vue 开发环境部署时,外部访问页面出现: Invalid Host header 服务器域名访问出现的问题

    这是新版本 webpack-dev-server  出于安全考虑, 默认检查 hostname,如果hostname不是配置内的,将中断访问.顾仅存在于开发环境: npm run dev,打包之后不会 ...

  2. 开源项目renren-fast开发环境部署(后端部分)

    开源项目renren-fast开发环境部署(后端部分) 说明:renren-fast是一个开源的基于springboot的前后端分离手脚架,当前版本是3.0 开发文档需要付费,官方的开发环境部署介绍相 ...

  3. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  4. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  5. Vue 生产环境部署

    简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一. ...

  6. 面试官:自己搭建过vue开发环境吗?

    开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...

  7. 十分钟上手-搭建vue开发环境(新手教程)

    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...

  8. Eclipse for Python开发环境部署

    Eclipse for Python开发环境部署 工欲善其事,必先利其器. 对开发人员来说,顺手的开发工具必定事半功倍.自学编程的小白不知道该选择那个开发工具,Eclipse作为一个功能强大且开源免费 ...

  9. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

随机推荐

  1. InnoDB 存储引擎简介

    InnoDB 核心特性 MVCC(Multi-Version Concurrency Control,多版本并发控制),事务处理,行级锁,热备份,自动故障恢复( Crash Safe Recovery ...

  2. Cron表达式在 定时执行专家 5.0 中的使用方式

    在<定时执行专家 V5.0>程序内部使用了包含 6 位的 Cron表达式,第一个字段(second)没有使用.程序内部一直 second 位是 0.在 Cron表达式的界面上可以设置 5位 ...

  3. WebSocket All In One

    WebSocket All In One WebSocket heartbeat WebSocket 心跳检测 ping pong refs xgqfrms 2012-2020 www.cnblogs ...

  4. API & YApi

    API & YApi 接口管理服务 YApi http://yapi.demo.qunar.com/ https://ued.qunar.com/ build bug https://gith ...

  5. OTA development

    OTA development OTA update OTA Over the Air / 无线下载 https://en.wikipedia.org/wiki/Over-the-air_progra ...

  6. vue-parent-child-lifecycle-order

    vue-parent-child-lifecycle-order vue parent child lifecycle order live demo https://99kyx.csb.app/ h ...

  7. Typescript & readonly property

    Typescript & readonly property https://www.typescriptlang.org/docs/handbook/classes.html#readonl ...

  8. NGK公链DeFi发力,Baccarat项目引爆流动性挖矿热潮

    DeFi市值屡创新高,在这条康庄大道上,人们摩拳擦掌,就像90年代美国西部淘金热一般.DeFi带来的流动性挖矿构成了今年加密货币一道靓丽的风景线,而人们手握的不再是当年的锄头铲子,而是一串代码. 随着 ...

  9. Excel和CSV格式文件的不同之处

    来源:https://blog.csdn.net/weixin_39198406/article/details/78705016 1.个人理解:为何选择使用csv来存储接口测试用例相关字段数据,而不 ...

  10. (转)IP协议详解之子网寻址、子网掩码、构造超网

    原文网址:http://www.cnblogs.com/way_testlife/archive/2010/10/05/1844399.html 子网寻址 1. 从两级IP地址到三级IP地址 < ...