Web前端-Vue.js必备框架（五）

浅浅的花香味﹌ 2021-09-18 13:36 331阅读 0赞

![Web前端-Vue.js必备框架（五）][Web_-Vue.js]

> Web前端-Vue.js必备框架（五）

页面组件，商品列表组件，详情组件，购物车清单组件，结算页组件，订单详情组件，订单列表组件。

vue-router 路由
    vuex 组件集中管理
    webpack
    vue-cli

`node`下载：

http://nodejs.cn/

`node-v`  
使用`vue-cli`脚手架搭建项目

vue+webpack+es6

https://github.com/vuejs/vue-cli

// 全局下载工具
    npm install -g vue-cli
    // 下载基于webpack模板项目
    vue init webpack Smartisan
    cd Smartisan
    // 下载项目依赖的所有模块
    npm install
    npm run dev

![官网][1240]

![效果][1240 1]

![表示成功][1240 2]

// 淘宝镜像
    cnpm install -g vue-cli

vue init webpack Smartisan

![效果][1240 3]

// 进入项目
    cd Smartisan
    // 运行我们的项目
    npm run dev

![搭建成功][1240 4]

![成功][1240 5]

cnpm install vuex --save

npm install vuex --save

引入`Vuex`，它是为`vue`开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，以相应的规则保证状态以一种可预测的方式发生变化。

![效果][1240 6]

![效果][1240 7]

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const state = {
    	pjtnews: 0,
    	count: 1
    }
    
    const mutations = {
    	add(state) {
    		state.count += 1;
    	},
    	reduce(state) {
    		state.count -= 1;
    	}
    }
    export default new Vuex.Store({
    	state,
    	mutations
    });

> 计算属性

`computed`数据缓存，响应式的数据类型，减少模板中计算逻辑，依赖固定的数据类型。

<div>
     <p> {
       { reversedMessage1 }} </p>
     <p> {
       { reversedMessage2 }} </p>
     <p> {
       { now }} </p>
     <button @click="() => $forceUpdate()">update</button>
     <br/>
     <input v-model="message"/>
    </div>
    
    <script>
    export default {
     data() {
      return {
       message: "hello"
      };
     },
     computed: {
      reversedMessage1: function() {
       return this.message.split("").reverse().join("");
      },
      now: function() {
       return Date.now();
      }
     },
     methods: {
       reversedMessage2: function() {
        return this.message.split("").reverse().join("");
       }
     }
    }

侦听器`watch`中可以执行任何逻辑。

<temlate>
     <div>
      {
       { $data }}
      <br/>
      <button @click="() => ( a += 1 )">a+1</button>
      </div>
    <template
    <script>
    export default() {
     data: function() {
      return {
       a: 1,
       b: { c: 2, d: 3 },
       c: {
         f: {
          g: 4
         }
       },
        h: []
      };
     },
     watch: {
      a: function(val, oldVal){
       this.b.c += 1;
       }
     }
    }

// computed watch
    computed: {
     add: function() {
       ...
     }
    },
    watch: {
    add: function(val, oldVal) {
     
    }
    }
    
    // watch
    watch: {
     firstName: function(val) {
      this.fullName = val + " " + this.lastName;
     },
     lastName: function(val) {
      this.fullName = this.firstName + " " + val;
     }
    }

> 生命周期

创建阶段：

beforeCreate created beforeMount -> render mounted

更新阶段：

beforeUpdate -> render updated

销毁阶段：

beforeDestory destroyed

创建阶段
    beforeCreate
    created
    beforeMount
    render
    mounted

更新阶段，多次执行
    beforeUpdate $forceUpdate
    render
    updated

销毁阶段：

beforeDestory
    destroyed

data
    created
    beforeMount
    render
    mounted
    
    updated
    beforeUpdate
    render
    updated
    beforeDestory
    destroyed

函数式组件：

functional: true

无状态，无实例，没有生命周期，没有`this`上下文。

指令：

v-text
    v-html
    v-if
    v-else
    v-else-if
    v-show
    v-for
    v-on
    v-bind
    v-model
    v-slot
    v-pre
    v-cloak
    v-once

bind
    inserted
    update
    componentUpdated
    unbind

`vuex`是一个专门为`vue.js`应用程序开发的状态管理模式。

状态管理模式：

new Vue({
     // state
     data() {
      return {
       count: 0
      }
     },
     // view
     template: `<div>{
       { count }}<div>`,
     // actions
     methods: {
      increment() {
       this.count ++;
      }
     }
    })

![效果][1240 8]

![效果][1240 9]

![效果][1240 10]

// store
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      }
    })
    
    store.commit('increment')
    
    console.log(store.state.count) // -> 1

State
    Getter
    Mutation
    Action
    Module

文档：

https://vuex.vuejs.org/zh/

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

![努力努力再努力Jeskson][Jeskson]

[Web_-Vue.js]: /images/20210724/2be61e9c807a42adb91f194383496de5.png
[1240]: /images/20210724/0d7491eb64124ee29a344640ab0233c9.png
[1240 1]: /images/20210724/096b998564134be48cb5781de0c816c4.png
[1240 2]: /images/20210724/580cadcd28c34b7ca918d4f25b6d6514.png
[1240 3]: /images/20210724/907af7b0c601485e92414384c37fd1fb.png
[1240 4]: /images/20210724/4a0ad4c3d93a4506a0059d9c9c8c4fa2.png
[1240 5]: /images/20210724/1e86f88821be4649814750e39e0514bb.png
[1240 6]: /images/20210724/d63a11fc7f13411f90c638b7b173fd0d.png
[1240 7]: /images/20210724/290a3cc1d8c349caaaf57956d731363f.png
[1240 8]: /images/20210724/165cbf71f1f6491281f71de6e9bf9673.png
[1240 9]: /images/20210724/74c670dc391b44d68fcde718c093610a.png
[1240 10]: /images/20210724/5d7f81a3d77c4b2ca874bed46d9e9eb8.png
[Jeskson]: /images/20210724/729c646a64634ba78d951b747bc60941.png