前端笔记系列：Vue学习笔记（三）

忘是亡心i 2023-10-06 15:59 7阅读 0赞

### **一. 状态管理 Vuex** ###

### **1. Vuex使用** ###

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

![5ebb498796a540189090b2a1f317913a.png][]

(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 ) 模块分割

![d896a34afbce4503bab22158b35a4396.png][]

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如:

![8147b05439134b1082ed1f55836c7800.png][]

#### **2. 注意** ####

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

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

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

### **3. vue chrome devtools** ###

![125fe80bf18a4ae4b3cf286ec1643702.png][]

### **4. vuex在项目中的使用** ###

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

### **5. vuex持久化** ###

[https://github.com/robinvdvleuten/vuex-persistedstate][https_github.com_robinvdvleuten_vuex-persistedstate]

![a52901c2e9544a90a392d75d0b0f58f3.png][]

### **二. 组件库** ###

### **1. 使用第三方插件** ###

[https://github.com/vuejs/awesome-vue\#components--libraries][https_github.com_vuejs_awesome-vue_components--libraries]

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

### **2. 使用第三方UI框架** ###

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

(1) PC框架：(element UI)

[http://element.eleme.io/\#/][http_element.eleme.io]

[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

*  从0开始的话，可以通过以下命令

![ddebab1ec94f4bedb1f382a6ab54c74e.png][]

*  项目已经写了， 通过 cnpm i --save element-ui

![5e6086d64fc941acb663d9ef9b058c68.png][]

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

[https://mint-ui.github.io/docs/\#/][https_mint-ui.github.io_docs]

[https://github.com/ElemeFE/mint-ui][https_github.com_ElemeFE_mint-ui]

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

移动端框架：(vant)

[https://youzan.github.io/vant/\#/zh-CN/][https_youzan.github.io_vant_zh-CN]

**(1) 安装**

![38ef517831114a2ea4f381041b602781.png][]

![0da6dfff958a4056b62ece93c935227e.png][]

**(2) 正在加载**

![2017947d84d74f9680c892ddd27ca797.png][]

**（3）无限滚动**

![59583a46e6194acf8c3be10ace73bd57.png][]

**(4) IndexBar 索引栏**

![82e5a2668b4a44a6ac3410ede5ffbe76.png][]

### **三. 项目实战** ###

### **1. betterScroll** ###

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

动属性等功能

[https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/][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延迟**

![fb11a6e8d45f5ddadb74a0bda25869c4.png][]

解决：

*  设置meta viewport
 *  fastclick

![e0dee84a1c8b4bc6bbb993b8e21a8681.png][]

**(2)Hammer.js**

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

*  hammer.js [https://github.com/hammerjs/hammer.js][https_github.com_hammerjs_hammer.js]

![a75d298a8ff0490598fa77e56fb3f658.png][]

*  vue touch [https://github.com/vuejs/vue-touch/tree/next][https_github.com_vuejs_vue-touch_tree_next]

![8006523489b228d3d9394b42b1f8cb22.png][]

### **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）正向代理**

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

![11a5c5bf3336417da5068bedc85aca7d.png][]

**(2) 反向代理**

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

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

![1f8a10cb4c1046a68a51fda7a1b35157.png][]

**(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服务

[5ebb498796a540189090b2a1f317913a.png]: https://img-blog.csdnimg.cn/5ebb498796a540189090b2a1f317913a.png
[d896a34afbce4503bab22158b35a4396.png]: https://img-blog.csdnimg.cn/d896a34afbce4503bab22158b35a4396.png
[8147b05439134b1082ed1f55836c7800.png]: https://img-blog.csdnimg.cn/8147b05439134b1082ed1f55836c7800.png
[125fe80bf18a4ae4b3cf286ec1643702.png]: https://img-blog.csdnimg.cn/125fe80bf18a4ae4b3cf286ec1643702.png
[https_github.com_robinvdvleuten_vuex-persistedstate]: https://link.zhihu.com/?target=https%3A//github.com/robinvdvleuten/vuex-persistedstate
[a52901c2e9544a90a392d75d0b0f58f3.png]: https://img-blog.csdnimg.cn/a52901c2e9544a90a392d75d0b0f58f3.png
[https_github.com_vuejs_awesome-vue_components--libraries]: https://link.zhihu.com/?target=https%3A//github.com/vuejs/awesome-vue%23components--libraries
[http_element.eleme.io]: https://link.zhihu.com/?target=http%3A//element.eleme.io/%23/
[https_github.com_ElemeFE_element]: https://link.zhihu.com/?target=https%3A//github.com/ElemeFE/element
[ddebab1ec94f4bedb1f382a6ab54c74e.png]: https://img-blog.csdnimg.cn/ddebab1ec94f4bedb1f382a6ab54c74e.png
[5e6086d64fc941acb663d9ef9b058c68.png]: https://img-blog.csdnimg.cn/5e6086d64fc941acb663d9ef9b058c68.png
[https_mint-ui.github.io_docs]: https://link.zhihu.com/?target=https%3A//mint-ui.github.io/docs/%23/
[https_github.com_ElemeFE_mint-ui]: https://link.zhihu.com/?target=https%3A//github.com/ElemeFE/mint-ui
[https_youzan.github.io_vant_zh-CN]: https://link.zhihu.com/?target=https%3A//youzan.github.io/vant/%23/zh-CN/
[38ef517831114a2ea4f381041b602781.png]: https://img-blog.csdnimg.cn/38ef517831114a2ea4f381041b602781.png
[0da6dfff958a4056b62ece93c935227e.png]: https://img-blog.csdnimg.cn/0da6dfff958a4056b62ece93c935227e.png
[2017947d84d74f9680c892ddd27ca797.png]: https://img-blog.csdnimg.cn/2017947d84d74f9680c892ddd27ca797.png
[59583a46e6194acf8c3be10ace73bd57.png]: https://img-blog.csdnimg.cn/59583a46e6194acf8c3be10ace73bd57.png
[82e5a2668b4a44a6ac3410ede5ffbe76.png]: https://img-blog.csdnimg.cn/82e5a2668b4a44a6ac3410ede5ffbe76.png
[https_ustbhuangyi.github.io_better-scroll_doc_zh-hans]: https://link.zhihu.com/?target=https%3A//ustbhuangyi.github.io/better-scroll/doc/zh-hans/
[fb11a6e8d45f5ddadb74a0bda25869c4.png]: https://img-blog.csdnimg.cn/img_convert/fb11a6e8d45f5ddadb74a0bda25869c4.png
[e0dee84a1c8b4bc6bbb993b8e21a8681.png]: https://img-blog.csdnimg.cn/e0dee84a1c8b4bc6bbb993b8e21a8681.png
[HammerJS]: https://link.zhihu.com/?target=https%3A//hammerjs.github.io/
[https_github.com_hammerjs_hammer.js]: https://link.zhihu.com/?target=https%3A//github.com/hammerjs/hammer.js
[a75d298a8ff0490598fa77e56fb3f658.png]: https://img-blog.csdnimg.cn/a75d298a8ff0490598fa77e56fb3f658.png
[https_github.com_vuejs_vue-touch_tree_next]: https://link.zhihu.com/?target=https%3A//github.com/vuejs/vue-touch/tree/next
[8006523489b228d3d9394b42b1f8cb22.png]: https://img-blog.csdnimg.cn/img_convert/8006523489b228d3d9394b42b1f8cb22.png
[11a5c5bf3336417da5068bedc85aca7d.png]: https://img-blog.csdnimg.cn/11a5c5bf3336417da5068bedc85aca7d.png
[1f8a10cb4c1046a68a51fda7a1b35157.png]: https://img-blog.csdnimg.cn/1f8a10cb4c1046a68a51fda7a1b35157.png