基于vue实现的移动端商品展示页,可以web-view的方式嵌入到小程序中,布局简约、大气,减少初学者或开发者不必要的工作量。后台维护采用的springboot+shiro的方式,为广大爱好者提供展示模板,方便快速构建属于自己的商户展示平台。

采用的技术如下:

1、前端使用vue-cli脚手架创建前端项目,采用axios前后端请求,store存储登陆状态等信息

//vue-cli脚手架 运行流程
1、npm run dev 
      执行的是package.json 中scripts部分中key(上述命令是dev,即dev中对应的命令)对应的value
      //"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
      webpack-dev-server  一种node.js的服务器  --inline代表会将webpack-dev-server客户端加入到webpack入口文件的配置中。
       --progress 代表是否显示滚动条   --config 指定一个新的配置文件
     scripts部分除了上述的dev 还包括
     start: 是命令yarn start的入口, npm与yarn殊途同归,区别不大 任选。
     lint:值“eslint --ext .js,.vue src”,代表执行npm run lint命令时,直接该脚本,是为了检查代码是否符合ESlint的规范。
     build:"node build/build.js",打包生产命令 当运行npm run build时执行。
    package.json中其他部分
        1、项目依赖:dependencies  npm run build 时候构建项目的包。这些包的代码会被打包添加到实际的应用代码之中
    依赖的几种写法:

(1)"vue": "2.5.2", 表示固定版本,只依赖2.5.2版,之后有新版也不会更新

(2)"vue": "~2.5.2", 表示只安装 2.5.X 系列版本的最新版,而 2.6.X 的或其他的不会更新

(3)"vue": "^2.5.2", 表示安装当前库的最新版

2、
开发依赖:devDependencies 与dependencies  区别是:开发依赖里面的东西不会添加到生产环境中,
        只是在开发阶段辅助编译开发等功能。比如:autoprefixer,babel-core 等,他只是在编译的时候给CSS样式添加一些浏览器兼容的前缀,
        和把ES6 转译成ES5。当打包结束时就会被抛弃,并不会添加到打包的结果中。

3、engines 主要是规定开发时候的环境的node.js 和 npm 的版本不能太低
        4、browserslist

一个阈值。表示是否要去兼容某些浏览器,如果小于阈值的部分在ES6的转译时可能将会忽略。
        5、main: 代表入口js

//webpack  模块化管理、打包工具

//vue学习心得
vue-cli脚手架创建项目
1、3.0的vue create project-name
2、2.9 vue init webpack project-name  (出来的目录结构是有区别的)

二、后台搭建采用springboot框架,集成shiro控制权限。采用maven的方式打包发布

1、mvn clean
2、mvn install -Dmaven.test.skip=true

前端代码存在码云,访问地址:https://gitee.com/lxming/private_warehouse,欢迎下载!

前端基于vue,后台采用springboot+shiro的方式搭建的一个移动端商品展示平台的更多相关文章

  1. 基于Vue+Spring MVC+MyBatis+Shiro+Dubbo开发的分布式后台管理系统

    本文项目代码: 服务端:https://github.com/lining90567/dubbo-demo-server 前端:https://github.com/lining90567/dubbo ...

  2. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  3. 前端基于VUE的v-charts的曲线显示

    目录 前端基于VUE的v-charts的曲线显示 1. 应用背景 2. 分析数据生产者生成 3. 取出数据消费者 4. 前端显示 4.1 安装V-charts插件 4.2 引入veline曲线插件 4 ...

  4. 基于Vue、web3的以太坊项目开发及交易内幕初探 错误解决总结

    基于Vue.web3的以太坊项目开发及交易内幕初探 本文通过宏观和微观两个层面窥探以太坊底层执行逻辑. 宏观层面描述创建并运行一个小型带钱包的发币APP的过程,微观层面是顺藤摸瓜从http api深入 ...

  5. 基于vue+leaflet+echart的足迹分享评论平台

    (其实题目是随便取的,目的只是用来证明Vue+leaflet+springboot技术栈的可行性) 效果 小专栏不支持上传视频?想看的话可以去我的知乎看最新的文章,那个应该可以.在这里 主要功能描述 ...

  6. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  7. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  8. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  9. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件(四)

    基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...

随机推荐

  1. 解释为什么.net 第一次请求比较慢

    通过这个图可以很好的解释为什么第一次请求比较慢,为了提高访问速度,也便有了预编译. 关于ASP.NET网站:每个页面都编译成一个.dll文件 用Assembly.GetExecutingAssembl ...

  2. ABAP中SPLIT关键字 当分隔符位于字符串首尾时

    使用SPLIT关键字将一个字符串按某个分隔符拆分,如果分隔符穿插在字符串中间(即首尾字符均不是分隔符的情况),我们很容易知道拆分后的结果,但如果分隔符恰好位于字符串首或者末尾呢? 如下面的代码所示,在 ...

  3. JS数据结构第三篇---双向链表和循环链表之约瑟夫问题

    一.双向链表 在上文<JS数据结构第二篇---链表>中描述的是单向链表.单向链表是指每个节点都存有指向下一个节点的地址,双向链表则是在单向链表的基础上,给每个节点增加一个指向上一个节点的地 ...

  4. Nodejs操作MySQL - 增删改查

    先安装npm模块项目 npm init 安装mysql npm install mysql --save Nodejs 连接msyql // 导入mysql const mysql = require ...

  5. string类总结第二部分实战练习

    第二部门:实战练习 昨天由于时间原因,这个部分应该在同一个文章中的,无奈只能今天再开一个了,今天主要是讲一些面试题 一:equals和==的区别 最简单的面试题,也是最基础的,我估计每个学习java的 ...

  6. 【设计模式】行为型08状态模式(status Pattern)

    状态模式(status Pattern)       定义:允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类.其别名为状态对象(Objects for States).与命令模式 ...

  7. git的基本指令

    更多详情请看廖雪峰官方网站 http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 1.删 ...

  8. 苹果二代TWS无线耳机AirPods调研

    产品介绍 苹果AirPods二代自从2018年9月份上市以来,到现在将近一年的时间了,据江湖传闻,苹果AirPods的总售卖个数,已经超过了5000W部,这样价格的TWS耳机,能够卖那么多的量,估计也 ...

  9. Ceph RGW Multisite 数据同步流程图

  10. vue中v-model的数据双向绑定(重要)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...