⑦ vue 项目开发配套工具

vue 项目开发配套工具

1 VueCLI 的使用和单文件组件

1.1 相关命令行

• 安装node node -v

• 查看npm npm -v

• 安装nrm 使用镜像源安装依赖 npm i nrm -g

• 安装脚手架工具 npm i -g @vue/cli

• 创建项目 vue create demo

  • 人工选择特性

1.2 单文件组件

• .vue文件 就是单文件组件

2 使用单文件组件编写 TodoList

App.vue

<template>
<div>
  <input v-model="inputVal" />
  <button class="button" @click="handleClick">提交</button>
</div>
<ul>
  <list-item v-for="item in list" :key="item" :msg="item" />
</ul>
</template>

<script>
import { reactive, ref } from 'vue';
import ListItem from './components/ListItem.vue'
export default {
  name: 'App',
  components: { ListItem },
  setup() {
    const inputVal = ref('');
    const list = reactive([]);
    const handleClick = () => {
      list.push(inputVal.value);
      inputVal.value = '';
    }
    return { list, inputVal, handleClick }
  }
}
</script>

<style>
.button {
  margin-left: 20px;
  color: red;
}
</style>

ListItem.vue

<template>
  <li class="button">{{msg}}</li>
</template>
<script>
export default {
  name: 'ListItem',
  props: {
    msg: String
  }
}
</script>
<style>

</style>

3 Vue-Router 路由的理解和使用

• 路由是指根据 url 的不同，展示不同的内容

3.1 如何使用路由

1. <router-link> 是跳转路由的标签

2. <router-view> 负责展示当前路由对应的组件内容

3.2 异步加载路由

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // 异步加载路由
    component: () => import('../views/AboutView.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

4 VueX 的语法详解

4.1 为什么使用 vuex

• vuex 状态管理工具

• vuex 创建了一个全局唯一的仓库，用来存放全局的数据

4.2 state

1. 定义 state

store > index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    name: 'dell'
  }
})

2. 使用 state -- this.$store.state.xxx

<template>
  <h1>{{myName}}</h1>
</template>

<script>
export default {
  name: 'HomeView',
  computed: {
    myName() {
      return this.$store.state.name
    }
  },
}
</script>

4.3 mutations

commit 和 mutation 做关联

• 要求：只允许写同步代码，不允许写异步代码

想改变数据，vuex 要求

1. 提交一个 commit 触发一个 mutation

2. 对应的 mutation 被执行

3. 在 mutation 里面修改数据

• home.vue

methods: {
  handleClick() {
    this.$store.commit('change')
  }
}

• store > index.js

export default createStore({
  state: {
    name: 'dell'
  },
  getters: {
  },
  mutations: {
    change() {
      this.state.name = 'lee'
    }
  },
  actions: {
  },
})

4.4 actions

dispatch 和 actions 做关联

4.1 想异步改变数据，vuex 要求

1. 必须派发一个 action

2. store 感知到你发出了一个叫 change 的 action，执行 change 方法

3. 提交一个 commit 触发一个 mutation

4. 对应的 mutation 被执行

5. 在 mutation 里面修改数据

• home.vue

methods: {
  handleClick() {
    this.$store.dispatch('change')
  }
}

• store > index.js

export default createStore({
  state: {
    name: 'dell'
  },
  getters: {
  },
  mutations: {
    change() {
      console.log('mutation');
    }
  },
  actions: {
    setTimeout(() => {
      change() {
        this.commit('change')
      }
    }, 2000)
  },
})

4.2 传参

• home.vue

handleClick() {
  this.$store.dispatch('change', 'hello world')
}

• store > index.js

export default createStore({
  state: {
    name: 'dell'
  },
  getters: {
  },
  mutations: {
    change(state, str) {
      state.name = str
    }
  },
  actions: {
    change(store, str) {
      setTimeout(() => {
        store.commit('change', str)
      }, 2000);
    }
  },
  modules: {
  }
})

4.5 modules

5 CompositionAPI 中如何使用 VueX

• useStore

5.1 同步操作

• about.vue

import { toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
  name: 'AboutView',
  setup() {
    const store = useStore();
    const { name } = toRefs(store.state);
    const handleClick = () => {
      store.commit('changeName', 'hello')
    }
    return { name, handleClick }
  },
}

• store > index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    name: 'dell'
  },
  getters: {
  },
  mutations: {
    changeName(state, str) {
      state.name = str
    }
  },
  actions: {
  },
  modules: {
  }
})

5.2 异步操作

• about.vue

import { toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
  name: 'AboutView',
  setup() {
    const store = useStore();
    const { name } = toRefs(store.state);
    const handleClick = () => {
      store.dispatch('getData')
    }
    return { name, handleClick }
  },
}

• store > index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    name: 'dell'
  },
  getters: {
  },
  mutations: {
    changeName(state, str) {
      state.name = str
    }
  },
  actions: {
    getData(store) {
      setTimeout(() => {
        store.commit('changeName', 'hello')
      }, 2000);
    }
  },
  modules: {
  }
})

6 使用 axios 发送 ajax 请求

• about.vue

export default {
  name: 'AboutView',
  setup() {
    const store = useStore();
    const { name } = toRefs(store.state);
    const handleClick = () => {
      store.dispatch('getData')
    }
    return { name, handleClick }
  },
}

• store > index.js

import { createStore } from 'vuex'
import axios from 'axios';

export default createStore({
  state: {
    name: 'dell'
  },
  getters: {
  },
  mutations: {
    changeName(state, str) {
      state.name = str
    }
  },
  actions: {
    getData(store) {
      axios.post('https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/register')
      .then((res) => {
        const msg = res.data.message;
        store.commit('changeName', msg)
      })
    }
  },
  modules: {
  }
})