前端笔记系列:Vue学习笔记(三)

一. 状态管理 Vuex

1. Vuex使用

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.

(1)state:单一状态树 ,每个应用将仅仅包含一个 store 实例。

this.$store.state.状态名字
...mapState(["title"])

(2)getters:可以从store 中的 state 中派生出一些状态,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

*可以认为是 store 的计算属性
*this.$store.getters.计算属性名字
*...mapGetters(["getFilms"])

(3)mutations:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

*常量的设计风格
 [SOME_MUTATION] (state) {
    // mutate state
   }
         *必须是同步函数
 *this.$store.commit("type","payload");

(4)actions:

Action 提交的是 mutation,而不是直接变更状态。
 Action 可以包含任意异步操作。
         this.$store.dispatch("type","payload")

(5)

const store = new Vuex.Store({
              state: {
                count: 0
              },
              mutations: {
                increment (state ,payload) {
                    
                }
              },
              actions: {
                increment (context, payload) {
                  context.commit('increment')
                }
              }
            })

(6 ) 模块分割

2. 注意

(1)应用层级的状态应该集中到单个 store 对象中。

(2)提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

(3)异步逻辑都应该封装到 action 里面。

3. vue chrome devtools

4. vuex在项目中的使用

  1. 复杂非父子通信**
  2. 异步数据快照**

5. vuex持久化

https://github.com/robinvdvleuten/vuex-persistedstate

二. 组件库

1. 使用第三方插件

https://github.com/vuejs/awesome-vue#components--libraries

集合了来自社区贡献的数以千计的插件和库。

2. 使用第三方UI框架

1.饿了么UED团队推出的vue 前端框架

(1) PC框架:(element UI)

http://element.eleme.io/#/

https://github.com/ElemeFE/element

  • 从0开始的话,可以通过以下命令

  • 项目已经写了, 通过 cnpm i --save element-ui

(2) 移动端框架:(mint UI) 好久不更新维护了

https://mint-ui.github.io/docs/#/

https://github.com/ElemeFE/mint-ui

2. 有赞技术团队推出的vue移动端框架

移动端框架:(vant)

https://youzan.github.io/vant/#/zh-CN/

(1) 安装

(2) 正在加载

(3)无限滚动

(4) IndexBar 索引栏

 

三. 项目实战

1. betterScroll

主要完成的功能需要包含Better-Scroll实现页面中拖动滚动、拉

动属性等功能

https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

(1) 初始化

//html
  <div class="kerwin" >
    <ul >
      <li v-for="item in datalist">{{item}}</li>
    </ul>
    <div class="loading-wrapper"></div>
  </div>
​
//js
import BScroll from 'better-scroll'
this.$nextTick(()=>{
    var myscroll = new BScroll('.kerwin',
        {
            pullDownRefresh: {
              threshold: 50,
              stop: 20
            },
            scrollbar: {
              fade: true,
              interactive: false // 1.8.0 新增
            },
            pullUpLoad: {
              threshold: 50
            }
        })
})
​
//css
.kerwin{
    height: 300px; //设置高度
    overflow:hidden; //溢出隐藏
   position: relative; //修正滚动条位置
  }

(2) 下拉刷新

myscroll.on('pullingDown',()=>{
        console.log("下拉了")
        setTimeout(() => {
          myscroll.finishPullDown() // 自动调用 .refresh()
        }, 1000)
     })

(3) 上拉加载

myscroll.on('pullingUp',()=>{
        console.log("到底了")
        setTimeout(() => {
          myscroll.finishPullUp() // 自动调用 .refresh()
        }, 1000)
     })

 

2. 移动端事件相关

(1)click事件300ms延迟

解决:

  • 设置meta viewport
  • fastclick

 

(2)Hammer.js

HammerJS是一个优秀的、轻量级的触屏设备手势库

 

3. Git 复习

(1). 复习git的基本使用

git pull 拉取并merge代码

git add .; //添加 暂存区

git commit -m 'zhu shi'// 提交到本地仓库并加上注释

git push origin master //往远程仓库推送代码

(2). 多人协作方式

a) 分支的构建

git branch -a 查看所有的分支

git checkout -b aaa 创建新的分支aaa

git checkout aaa 切换到aaa分支

git push origin aaa 推送aaa 分支到远程仓库aaa分支

git push origin master:aaa 推送master 到远程的aaa 分支

git branch -d 删除一个分支

b) 冲突的产生与解决

两人同时修改同一个文件,一个人上传远程仓库成功, 另一个人再上传会失败。

(1)git pull, (拉取服务器的代码, 会造成自动合并失败,需要手动合并)

(2) 手动合并代码(小乌龟等可视化git工具 进行代码对比)

 

4.经典web服务器nginx介绍

Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器;同时也是一个IMAP、POP3、SMTP代理服务器;Nginx可以作为一个HTTP服务器进行网站的发布处理,另外Nginx可以作为反向代理进行负载均衡的实现。

(1)正向代理

正向代理最大的特点是客户端非常明确要访问的服务器地址;服务器只清楚请求来自哪个代理服务器,而不清楚来自哪个具体的客户端;正向代理模式屏蔽或者隐藏了真实客户端信息。

(2) 反向代理

客户端是无感知代理的存在的,反向代理对外都是透明的,访问者并不知道自己访问的是一个代理。因为客户端不需要任何配置就可以访问。

反向代理,"它代理的是服务端",主要用于服务器集群分布式部署的情况下,反向代理隐藏了服务器的信息。

(3) nginx的基础配置(代理等)

nginx -c kerwin.conf 加载kerwin.conf 并启动服务器
​
   nginx -s 
   {
        stop       — fast shutdown 
        reload     — reloading the configuration file(每次修改完kerwin.conf后 ,都通过此方法 重新加载一次)
​
   }
静态文件serve
​
location / {
            root   html;//是当前文件夹下有个html文件夹
            index  index.html index.html
        }
​
location /frontend {
            root html ; 
            #只要加载localhost/frontend路径 那么就会从 html/frontend/路径提供文件服务
        }
下面四种情况分别用http://localhost/proxy/test.html 进行访问。
// 注意 /proxy/  后面的/ 需要加上
​
(1)location /proxy/ {
        proxy_pass http://127.0.0.1:8000/; 
    }
​
    会被代理到http://127.0.0.1:8000/test.html 这个url
​
 (2)相对于第一种,最后少一个 /
   location /proxy/ {
        proxy_pass http://127.0.0.1:8000;
   }
   会被代理到http://127.0.0.1:8000/proxy/test.html 这个url
​
​
 (3)location /proxy/ {
     proxy_pass http://127.0.0.1:8000/xiaoming/;
  }
  会被代理到http://127.0.0.1:8000/xiaoming/test.html 这个url。
​
  (4)相对于第三种,最后少一个 / :
​
  location /proxy/ {
       proxy_pass http://127.0.0.1:8000/xiaoming;
  }
  会被代理到http://127.0.0.1:8000/xiaomingtest.html 这个url

 

(4). 将nginx部署在线上作为webserver

serve 静态资源, 并反向代理node服务

已标记关键词 清除标记
相关推荐