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. HarmonyOS课程体验官招募（第四期），寻找乐于分享，精益求精的伙伴

      华为开发者联盟HarmonyOS课程体验官(第四期)活动,开始招募啦! 如果你精益求精.乐于分享:如果你愿意为学堂课程优化改进出谋划策,那就快来加入我们吧!学堂期待与你共同成长.一起进步! [活动 ...

  2. 实训篇-Html-注册页面【简单】

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 代码写错分支，如何提交到另一个分支上【Git把当前分支上的修改转移到另一个分支上】

    Git把当前分支上的修改转移到另一个分支上: 1.先在当前分支commit 2.获取本次commit的ID(会获取到一个长id如:ae71cfaf9e865682e2c008aa867e8fbef7a ...

  4. swing 聊天窗体，支持图文模式

    package com.*.test; import java.awt.EventQueue; import java.awt.HeadlessException; import java.awt.T ...

  5. 8k中英双语文本嵌入模型效果初探

    一 模型介绍 向量模型用于生成向量表示,被广泛应用于检索.分类.聚类或语义匹配等传统的自然语言处理任务.到了大模型时代,由于上下文长度的限制,需要压缩.存储和查询大量的信息,这就需要用到向量模型对输入 ...

  6. Java面试题：为什么HashMap不建议使用对象作为Key?

    HashMap 是一种基于哈希表的动态数据结构,它允许使用任意不可变对象作为键(key)来存储和检索数据.然而,在某些情况下,使用对象作为 HashMap 的键可能会遇到一些问题. 首先,我们需要明确 ...

  7. 剑指offer42(Java)-连续子数组的最大和（简单）

    题目: 输入一个整型数组,数组中的一个或连续多个整数组成一个子数组.求所有子数组的和的最大值. 要求时间复杂度为O(n). 示例1: 输入: nums = [-2,1,-3,4,-1,2,1,-5,4 ...

  8. 深度解读 MongoDB 最全面的增强版本 4.4 新特性

    MongoDB 在今年正式发布了新的 4.4 大版本,这次的发布包含众多的增强 Feature,可以称之为是一个维护性的版本,而且是一个用户期待已久的维护性版本,MongoDB 官方也把这次发布称为「 ...

  9. 阿里云容器服务差异化 SLO 混部技术实践

    ​简介:阿里巴巴在"差异化 SLO 混合部署"上已经有了多年的实践经验,目前已达到业界领先水平.所谓"差异化 SLO",就是将不同类型的工作负载混合运行在同一节 ...

  10. WPF 切换主题使用 luna 复古版本

    本文告诉大家如何在 WPF 里面使用 luna 等复古主题 今天在 lsj 说他准备优化 WPF 的程序集时,准备删除 luna 等程序集时,找到了一段有趣的注释,发现在 WPF 里面可以通过一些有趣 ...