amber 写手机端遇到的问题

1、基础命令

前端vue打包,自动生成dist文件
在终端输入：npm run build

打包项目静态文件
新项目在根目录添加vue.config.js文件



linux打包命令在当前目录下

zip -r ./dist.zip ./* -r
解压
unzip xx.zip



新项目没权限需要获取
chmod 777 项目文件夹/node_modules/.bin/vue-cli-service

下载国际插件翻译双语言
npm install vue-i18n --save

2、vue 格局布局语法

位置距离顶部直接的距离80px
padding-top: 80px; 

属性用于在元素框架上添加阴影效果
box-shadow: inset -1px -1px 0 0 rgba(205, 208, 207, 0.2); 
rgb颜色计算器
rgba(205, 208, 207, 0.2)

为一个元素设置一个或者多个背景图像
background-image: radial-gradient(closest-side at 50% 70%,#bfc7c6,#899796);
创建一个图像并设置为浅颜色
radial-gradient(closest-side at 50% 70%,#bfc7c6,#899796);

指定一个元素如何在flex容器中布局的
flex-direction: row-reverse;
正向/反向布局
row/row-reverse;


将所有直接子节点上的align-self值设置为一个组
align-items: flex-end;
包装到容器开头/末端/中心
flex-start/flex-end/center

设置flex属性
display: flex;

设置属性的位置
position: relative;
上/下/左/右
top/buttom/left/right
底部/右部
fixed/relative

格式布局宽度总和为2
flex: 1

设置沿着弹性盒子布局
align-content: space-around;





home页面布局介绍
背景颜色设置
background-image: radial-gradient(farthest-side at 50% 50%,#e29c0f,#101092);

定义图片太大无法放入区域
overflow: hidden;

定义图片大小高度
 box-sizing: border-box;
  width: 160px;
  height: 160px;
  padding: 10px;

边框颜色大小
border: 1px solid rgba(247, 7, 27, 0.1);
设置元素的外边框圆角角度
 border-radius: 90px;
 
 
 设置元素距离底部距离
 margin-bottom:10px;

3、关键问题解决网站

 https://blog.csdn.net/weixin_43908123/article/details/108370373
 px转rem移动端适配插件安装

 https://blog.csdn.net/weixin_27038261/article/details/113580494
 一个Vue项目同时包含PC端页面和移动端页面
 https://juejin.cn/post/6844903904459636744

html5手机端页面缩放问题的解决
 https://blog.csdn.net/ynlflixin/article/details/81038128
 <meta name="viewport" content="width=device-width, initial-scale=0.30, minimum-scale=0.25, maximum-scale=5.0, user-scalable=yes" />
 自使用表格
https://juejin.im/post/5eb907d46fb9a0432f0ffac3


快速上手BootstrapVue
https://juejin.cn/post/6844903840278380552#heading-11

 
 ant-design 组件
 https://www.antdv.com/components/layout-cn/