QShop商城-快速开始-前端

工具准备

NodeJs

前端环境为NodeJs，下载地址：http://nodejs.cn/download/current/ 。 默认会用版本为Node 16,如找不到我已分享: https://pan.baidu.com/s/1yM2TysvkH0pD7NdAAeXcag 提取码: y9c5

visual studio code

下载最新版的vs code，用来作为前端的开发工具。

打开项目

打开目录3_PcAdmin双击zQShop.code-workspace,使用vsCode打开项目

修改配置

设置后端接口地址 打开 .env.dev ,部署时应该修改 .env.prod .如下图

安装依赖

安装依赖 终端=>新建终端=>输入npm install

运行前端

安装依赖后继续输入 npm run dev

启动后端,请查看上一章[快速开始(后端)]

启动成功后，使用浏览器访问http://localhost:8888/即可打开界面

部署前端

安装依赖后继续输入npm run build,生成dist文件

宝塔面板创建网站,将dist内文件上传至网站根目录即可,如下图

QShop商城-快速开始-前端的更多相关文章

  1. m_Orchestrate learning system---七、如何快速学好前端

    m_Orchestrate learning system---七.如何快速学好前端 一.总结 一句话总结:看视频啊,系统看视频啊 1.如何解决单词数字太长超出边界的问题? word-wrap 把编辑 ...

  2. Turtle Online：致力于打造超接地气的PC前端架构，组件+API，快速搭建前端开发

    架构创作初衷 每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……, ...

  3. 使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架

    一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是 ...

  4. H5商城，纯前端静态页面

    发布时间:2018-09-28   技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit   概述 纯手写H5商城,2年 ...

  5. 基于serverless快速部署前端项目到腾讯云

    腾讯云 COS 组件,可以快速部署静态网站页面到对象存储 COS 中,并生成域名供访问. 安装 首先要安装 serverless 组件 npm install -g serverless 在项目的根目 ...

  6. vue-element-admin改造接入后台，搭建有来商城youlai-mall后台前端管理平台

    一. 前言 本篇基于有来商城youlai-mall微服务项目,搭建后台前端管理平台,技术选型希望通过本篇文章你可以,技术解决方案选择了vue-element-admin.希望通过本篇文章你可以vue- ...

  7. 用 Docker 快速配置前端开发环境

    来源于:http://dockone.io/article/1714 今天是你入职第一天. 你起了个大早,洗漱干净带着材料去入职. 签了合同,领了机器,坐到工位,泡一杯袋装红茶,按下开机键,输入密码, ...

  8. 夺命雷公狗---DEDECMS----5快速入门之商城快速搭建实现快递方式和支付方式的显示

    我们现在用dedecms快速搭建一个商场,方法如下所示: 如此类推.写多几个栏目,效果 如下所示: 然后我们添加几个商品,记得要刷新下页面噢,不见见不到商品 添加成功后去看看效果如何: 出来了,但是如 ...

  9. 淘淘商城之springmvc前端控制器

    一.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&qu ...

  10. 快速了解前端开发HTML的正确姿势

    摘要:web前端开发(也称为客户端开发)主要是通过html,CSS和JavaScript等前端技术,实现网站在客服端的正确显示及交互功能. 一.web标准介绍 web标准: w3c:万维网联盟组织,用 ...

随机推荐

  1. 【中秋国庆不断更】XML在HarmonyOS中的生成，解析与转换（下）

    一.XML解析 对于以XML作为载体传递的数据,实际使用中需要对相关的节点进行解析,一般包括解析XML标签和标签值.解析XML属性和属性值.解析XML事件类型和元素深度三类场景. XML模块提供Xml ...

  2. identity4 系列————用户数据持久化篇[六]

    前言 前面的例子已经将各种情形下的例子已经介绍了一遍,那么后面就是用户数据持久化该如何处理了. 正文 例子位置: https://github.com/IdentityServer/IdentityS ...

  3. nginx 学习的前提

    前言 在nginx 中,需要学会的是如何安装.基础的命令.看懂配置那么这时候才是一切的刚刚开始. 正文 安装可以去看菜鸟驿站的: https://www.runoob.com/linux/nginx- ...

  4. centos 虚拟机修改mac和ip地址

    前言 因为网上过于零散,故而整理.在此我用的是vm虚拟机. 正文 在我们安装好vm虚拟机后,我们会获得两个虚拟网卡. 那么我们获得两个虚拟网卡后,这两个网卡到底是什么呢?那么我们打开vm的虚拟网络编辑 ...

  5. TypeScript 中泛型的理解？应用场景？

    一.是什么 泛型程序设计(generic programming)是程序设计语言的一种风格或范式 泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型,在实例化时作为参数指明这些类型 ...

  6. 牛客网-SQL专项训练24

    ①下列选项关于游标的作用叙述正确的是(D) 解析: 游标是一种从包括多条数据记录的结果集中每次提取一条记录以便处理的机制,可以看做是查询结果的记录指针.游标与视图类似,也是基于基表的临时表对象,也能够 ...

  7. Go原生插件使用问题全解析

    简介: 本人在设计和落地基于Go原生插件机制的扩展开发产品时踩到了很多坑,由于这方面相关资料很少,因而借此机会做一个非常粗浅的总结,希望能对大家有所帮助.本文只说问题和解决方案,不读代码. 作者 | ...

  8. RocketMQ 端云一体化设计与实践

    简介:本文首先介绍了端云消息场景一体化的背景,然后重点分析了终端消息场景特点,以及终端消息场景支撑模型,最后对架构和存储内核进行了阐述.我们期望基于 RocketMQ 统一内核一体化支持终端和服务端不 ...

  9. 实践探讨Python如何进行异常处理与日志记录

    本文分享自华为云社区<Python异常处理与日志记录构建稳健可靠的应用>,作者:柠檬味拥抱. 异常处理和日志记录是编写可靠且易于维护的软件应用程序中至关重要的组成部分.Python提供了强 ...

  10. SAP集成技术（八）成熟度模型

    成熟度模型的目的在于使用模型和标准来评估当前的集成能力,并确定必须建立哪些能力,以达到期望的成熟度级别. 成熟度级别描述了一个特定主题复杂性对于某种方法或模型的成熟度.基于定义的需求和标准的分类,得出 ...