前言

一、重要的部分？

1、vue-cli 脚手架

1） Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统其实就是一个配置好了的使用webpack完成打包构建的初始化工程，和我们前面讲的webpack打包没啥区别，只是更为全面，在实际开发中也是常用的工具

2）全局安装cli，确保你已经安装了node了哦，命令行执行　npm i @vue/cli -g

安装完成后检查一下 vue --version 可以看到安装后的版本

4）使用create创建项目，命令行执行，后面紧跟的是项目名，这里我起名 vueclidemo vue create vueclidemo

然后进入这个项目文件夹，命令行执行 npm run serve
comand 链接就可以打开
7）可以对项目打包 npm run build

2、我们来使用一下脚手架搭建一个最简单的程序

1）首先在components里面新建一个 vueFooter.vue

<template>
  <div>
    <h2>test first</h2>
  </div>
</template>  

<script>
export default {};
</script>

2） App.vue 引入并且使用它

在这里插入图片描述 3）页面展示正常

3、vuex状态管理

1、含义？ vuex是vue.js专门用来进行状态管理的工具，采用集中式状态管理,并以相应的规则保证一种可预测的方式发生变化

通俗的来说，就相当于一个管家，我们把一些公用的数据交给他进行管理，并且每个组件都能从他那里获取数据，或者通知他修改数据，比如存储用户信息

2、组成？ State 数据仓库 getter 获取数据 mutation 修改数据 action 提交mutation modules 模块

3、首先使用脚手架创建一个vue项目 vue create vuexdemo

4、可以使用 vue ui 安装 vuex插件完成后打开就行在这里插入图片描述 5、 6、打开src/store/index.js,讲解一下属性

import {
  createStore
} from 'vuex'

export default createStore({
  // state 存储 全局变量
  state: {},
  //   mutations  修改存储的变量
  mutations: {},
  // actions 提交的是 mutations 可以实现异步操作，相当于我们执行一个操作后可以改变 存储的值
  actions: {},
  // 分模块管理
  modules: {}
})

7、我们先加一点东西

  state: {
    // 当前主题色设置为red
    primaryColor:'red'
  },

8、修改 HelloWorld.vue里面的部分

<template>
  <div><h2 :style="{ color: primaryColor }">vuexdemo</h2></div>
</template>

<script>
export default {
  computed: {
    primaryColor() {
      // 这个可以拿到 index.js里面的state里面的 color  red
      return this.$store.state.primaryColor;
    },
  },
};
</script>

<style scoped></style>

9、使用 ctrl + c 关掉 vue ui 重新打开 npm run serve
在这里插入图片描述

10、如果我有多个数据需要传递怎么处理？ index.js 可以加入多个属性

// state 存储 全局变量
  state: {
    // 当前主题色设置为red
    primaryColor: 'red',
    size: '40px'
  },

11、在这里插入图片描述页面效果达到

3-1 mutations 修改数据

1、我们在mutations中定义一个修改颜色的方法

mutations: {
  setColor(state, value) {
  // 传递的value值 给 state的 primaryColor
    state.primaryColor = value;
  }
},

2、然后来到 Helloworld组件，定义一个方法，用来触发 mutations里面定义的事件，并传递一个 skyblue的值

methods: {
  setColor() {
    this.$store.commit("setColor", "skyblue");
  }
},

3、在页面中定义一个按钮并绑定刚刚的点击事件

<button @click="setColor">设置主题色</button>

4、页面展示效果是可以的点击按钮之后变成skyblue色

3-2 getters

1、

首先我们在`index.js里面的 state` 中再定义一个 user对象

state: {
  primaryColor: "red",
  user: {
    id: 1,
    type: 1,
    sex: 1,
  }
},

2、然后在 index.js getters中定义一个userInfo，根据不用用户的不同 type返回具体的字段

getters: {
  userInfo(state) {
    switch (state.user.type) {
      case 1:
        return "用户组"
      case 2:
        return "管理员组"
    }
  }
},

3、后在HelloWorld.vue 组件中定义一个计算属性，使用 this.$store.getters可以得到 vuex中定义的 getters

userInfo(){
  return this.$store.getters.userInfo;
},

4、也可以和 state 一样这样写

import { mapGetters, mapState } from "vuex";
...mapGetters(["userInfo"])

5、在页面中显示出来

<div>{{userInfo}}</div> 6、在这里插入图片描述

3-3 actions

1、这里我们模拟这样一个场景，假如用户修改了默认颜色后，这个属性要传递给后台给用户存储起来

因为我们没有具体的后台，所以就模拟一个延时的操作，并使用 async异步方法

actions: {
  async  changeColor(context, value) {
    //模拟一个存储属性的方法
    function saveUserInfo() {
      return new Promise((resolve) => {
        setTimeout(resolve, 1000)
      })
    }
    // 真实的开发啊 拿到用户id  const uid = context.state.user.id;
    // 并调用后台方法this.api.saveUserInfo(...)
    await saveUserInfo();
    context.commit('setColor', value);
  }
},

2、然后在组件HelloWorld.vue中定义一个方法 this.$store.dispatch可以触发actions

setUserColor() {
  this.$store.dispatch("changeColor", "yellow");
}

3、在页面中绑定这个事件

<button @click="setUserColor">设置用户默认主题色</button>

4、这样操作之后点击页面设置用户默认主题色 1s后就会变化

3-4 modules

1、分模块其实很好理解吧，就是后期 vux 的属性太多，那么我们就分为一个一个的模块使用

我们在index.js modules中定义一个modulea模块，在这个模块里面的state定义一个primaryColor

 modules: {
   modulea: {
     state: {
       primaryColor: "white",
     },
     mutations: {
     }
   }
 }

2、在组件中调用一下

<div>modulea模块的值-{{$store.state.modulea.primaryColor}}</div>

3、看一下效果在这里插入图片描述

总结

这一套暂时完结

vue 精简教程（五) vue-cli脚手架

前言