基于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,欢迎下载! QQ交流群: ①群:699050440 ②群:824313640