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. 《深入理解Java虚拟机》读书笔记：HotSpot的算法实现

    HotSpot的算法实现 HotSpot的算法实现概要 1.枚举根节点 由于目前的主流Java虚拟机使用的都是准确式GC(这个概念在第1章介绍Exact VM对Classic VM的改进时讲过),所以 ...

  2. Openstack之工作流程

    组件 OpenStack的核心部件即包括Nova(用于计算).Keystone(用于身份服务).Neutron(用于网络和地址管理).Cinder(块存储).Swift(对象存储).Glance(镜像 ...

  3. CentOS8 / CentOS7 yum源最新修改搭建 2022.3.1

    Part I CentOS 8 源更新 ========================================== 2022年过完后,发现公司里面的所有服务器yum都不能用了,一直报错 按照 ...

  4. web 报表工具如何自适应

    现在的报表用户已经不再将报表作为一个单纯的报表工具看待了,有时候也会当作页面工具来使用,这时为了页面显示工整美观,就需要报表能够自适应宽度.下面我们就基于润乾报表来讲一下是如何做到自适应展现报表. 产 ...

  5. mysql 必知必会整理——mysql 介绍[一]

    前言 对mysql 进行简介. 正文 mysql 是一种数据库,那么什么是数据库呢? 数据库是一个以某种有组织的方式存储的数据集合. 也就是说数据有某种组织规律的就叫做数据库. 数据库(databas ...

  6. 重走py 之路 ——普通操作与函数（三）

    前言 本节主要介绍函数,但是函数是由操作组成的.那么就分为两部,一部分为操作一部分为函数. 正文 py世界中的操作. 操作 if: 在学习任何一门语言中,关系if,要关系另外一件事,那就是if是否只能 ...

  7. 重新整理数据结构与算法(c#)——算法套佛洛伊德算法[三十二]

    前言 佛洛伊德算法和迪杰斯特拉算法非常像,但是它求的是任何一个点到其他点之间的距离. 假设有一张图: 转换为矩阵为: 他们的前驱为: 可能上面表述前驱不清楚,举个例子. 看下图: 这第二种图表示,从A ...

  8. Java入门02：IDEA安装教程

    Java入门02:IDEA安装教程 下载IDEA 首先进入官网进行下载,地址:https://www.jetbrains.com/idea/download/#section=windows 我这里选 ...

  9. 微软自带的Hyper-V虚拟机使用、VMware16安装Win10虚拟机介绍

    一.首先介绍VMware虚拟机. 安装WIN10统虚拟机推荐用VMware16. 1.镜像网址: MSD网址传送门1:https://msdn.itellyou.cn MSD新网址传送门2:https ...

  10. SpringCloud做的微服务项目--外卖订餐系统

    本项目用到的组件技术可以参考我上一篇博客,来学习. 项目需求: 客户端:针对普通用户,用户登录,用户退出,菜品订购,我的订单 后台管理系统:针对管理员,管理员登录,管理员退出,添加菜品,查询菜品,修改 ...