项目开发中一些注意与问题小记

希望有兴趣的一起加入一起更新。问题无大小，是问题就小记一下。希望大家一起分享问题，共同进步。

1. 在config文件下的index.js中有webpack的一些配置
   如: useEslint: false 默认为true，设置可以先去除检测开发，最后完成进可用npm run lint 自动整理 不能完全整理有的需要手动去处理。
   

2. 做移动端的页面首先要准备一些配置：
   

1. 添加meta标签并添加属性name=‘viewport’ 一般脚手架会默认有，
   我们再完善补充一下：
   (在initial-scale=1.0 ，后加上 minimum-scale=1.0 , maximum-scale=1.0 , user-scalable=no )
   这样配置是要求客户手指放大缩小屏幕是无效的，让页面的比例始终是1：1 .
   
2. 一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟
   先命令行运行 npm install fastclick --save 再引入这个fastClick就可以解决这类问题
   再去绑定到document.body上: fastClick.attach(document.body) 这样就正确的使用了click事件
   说明: --save：不管我们在开发环境或者是打包生成的线上代码都需要使用这个依赖
   
3. 重置统一化样式(因为不同手机的浏览器中会有不一样的样式区别)

 - 可以借助第三方的工具库 包管理下载( npm install --save reset-css || npm install --save normalize.css ) 再全局引入 <br>

4. 处理移动端1像素边框的问题意思是说有的手机屏幕分辩高可能是二倍或三倍屏, 这样在页面上写border 1px 这样写的1px,实际上指的是css像素但是到了二倍屏上去看实际上对应的就是不是一个物理像素大小了，而是二个或三个物理像素的大小了

- 项目中有个border.css这个文件是一个整理好的文件(用了transform-origin)专门处理这个问题

3. 创建一个项目的开始，可以先去码云账号创建一个项目开始管理项通过公私钥打通线上线下的接口，
   （码云账号找到如何生成SSH公钥 ）进入链接 查看指令: window系统的操作如下:
   右键 git bash （相当进入linux 终端一样,前提是已经安装了git ）
   然后运行命令: ssh-keygen -t rsa -C "xxxxx@xxxxx.com"
   再回车+回车+回车 ： 再运行 ：cat ~/.ssh/id_rsa.pub 查看到公钥复制回码云账号上去对接就可以了，
   再回到准备发的项目项中去克隆地址(git@gitee.com:tanxuedong/PetShop.git)
   再回电脑上在准备开始的文件目录下 git bash 运行命令: git clone +刚复制的地址(git@gitee.com:tanxuedong/PetShop.git)
   注意一下，这儿说的是ssh密钥的方式拉取git项目管理，还有一种是直接克隆http:的地址，
   运行完后会在文件目录下多出码云账号上刚创建好的项目文件，
   可以连接好后就可以去下载Vue的脚手架创建项目工程了。
   确认好cli的依赖是否安装好( 没有的话运行：npm install --global vue-cli )
   在去准备项目文件目录下创建基于webpack打包的项目
   目录下运行: vue init webpack my-project
   注意:my-project的意思是项目在放在的位置也是就准备好的项目文件夹名字
   然后就创建一个名字项目名字不可包含大写字母,再选择好配置如:(vue-router/Eslint/npm…)等等这样就开始下载依赖了
   

4. git 分支的创建

• 先码云账号项目中，新建分支名(见名之意命名如index-swiper 可做首页轮播图的分支)
• 也可以用命令 git branch 分支名 再git checkout 新分支名 ( git checkout -b 分支名 这是前二命令的合并)
• 这只是在线上创建了分支本地还没有，所以再去本地项目的目录下运行cmd。
  输入git pull 会把线上的新创建分支拉到本地 ，
  再输入git checkout 新分支名(index-swiper) 这样本地所在的分支就是新建的分支上了，
  然后git status 可以查看一下确定好就可以在这个分支上开发代码的了，
  

5. 提交代码的git操作:

• git的官网地址
  git add . ：把本地的修改提交到本地的缓存区
  再git commit -m 'project init ’ 意思就是说把本地缓存区的内容提交到本地的仓库中，-m的意思是这是一个project init的操作
  再git push 推送线上仓库完成
  

6. 可以将浏览器切换成3G网速来调试效果, 当网速变慢到3G页面中的图片等会被延迟加载使得页面出现抖动效果:
   这样就需要先将这个区域撑起来：给区域一个父元素，在给父元素一些如下样式 :
   overflow hidden
   width 100%
   height 0
   padding-bottom 31.25% // 这儿的百分比是指图片的宽高比
   background #eeeeee // 这儿是指图片还没出现时所显示的背景颜色
   注意:一定在确认图片统一一致的比例，不然导航的小圆点就会被挤出去
   

7. Vue中name的意思:
   1,当我们做递归组件的时候会用到
   2，当我们在页面上想对某个页面取消缓存的时候( … )
   3,给组件一个name名可以在调试工具中很容易理解
   

8. 对Vuex的总结: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 采用 集中式 存储管理应用 的所有组件的状态，
   并以相应的规则保证状态以一种 可预测的方式发生变化 把组件的共享状态抽取出来，以一个全局单例模式管理呢？
   在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
   另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。
   Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
   开始：每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
   Vuex 和单纯的全局对象有以下两点不同：
   1，Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
   2，你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
   这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
   

9. 首页轮播图：借助第三方轮播插件( vue-awesome-swiper)
   

• 其中安装注意 npm install vue-awesome-swiper@2.6.7 --save
  加入@2.6.7 这样就是说指定安装2.6.7版本 这样做是因为老的版本会稳定一些
  

10. 图标字体引入 iconfont的定义和使用 先去iconfont官网上注册并发起一个项目。

• 官方图标库 -->选择所需要的图标加入购物车 --> 下载至本地 --> 在下载文件夹中
  选择字体文件( .woff/ .ttf / .svg / .eot ) 放入styles/iconfont文件夹中 + iconfont.css 放入styles中
  再去iconfont.css中查看字体文件的url设置修改一下(./iconfont/…)，
• 或者直接放到一个iconfont的文件中，这样可以不需要修改路径，修改路径只是为了项目包的统一性
• 如果命名不习惯用也可以去掉， 这样文件就整理好了，就可以去使用了 ，
  使用
• 1，先main.js入口文件引入(import ‘styles/iconfont.css’)
• 2，  说明  就十六进制的串 这个在购物车中可以复制过来
  

11. 像目录层级使用比较多的路径可以去统一取一个别名用来

• 如 styles代表静态文件目录 和 默认配置@代表src目录意思一样，，
• webpack中alias 一般意思是别名配置 不同的框架有不同配置位置
• 找到build/webpack.base.conf.js文件中，resolve: { … alias: { 中增加一个属性 styles : resolve( ‘src/assets/styles’ ) } }

12. 像修改了webpack的配置项时要重新启动运行项目

13. 路由就是根据网址的不同，返回不同的内容给用户

14. router-view: 显示的是当前路由地址所对应的内容