vue项目搭建笔记

1、环境安装

windows环境:node(插件安装)+git(代码提交)+码云(线上代码管理)等等

2、vue创建单页面项目

基于Vue cli搭建的vue项目(新版Vue Cli3)

npm install -g @vue/cli

//创建一个项目
vue create myPorject

//可以用图形化界面创建和管理项目
vue ui

//vue插件安装vue add安装和调用vue cli插件
vue add @vue/eslint

3、单页面应用与多页面应用区别

单页面应用

优点：页面跳转交互好（由于是js渲染）

缺点：首屏加载慢（由于需要请求服务和数据请求）、seo不好（搜索引擎不识别js中的文档）

多页面应用

优点：首屏加载快、seo友好

缺点：页面跳转慢

4、移动端遇到的问题

1、移动端1px边框的问题解决border.css

2、移动端click300ms的延时解决fastclick

//安装fastclick
npm install fastclick --save

//使用main.js文件中
import fastClick from 'fastclick'
fastClick.attach(document.body)

3、px和rem的转化
逻辑像素：设备实际的分辨率
物理像素：UI设计稿的像素（例如：750的设计稿）
如果为方便计算定义750设计稿的1rem = 10px(逻辑像素) = 20rpx(物理像素)，此时设置font-size:10px，那么
设备宽度 / 375(对应750物理分辨率) = 实际font-size/10
实际font-size = 10*设备宽度/375 = 1rem
此时750设计稿 = 75rem
但由于chrome浏览器识别的最小font-size为12px> 实际font-size
所以设置2实际font-size = font-size = 1rem；
实际元素宽度 = 逻辑像素 /(2实际font-size) + ‘rem’