vue3+element-plus开发学习管理系统

一、 项目地址

学习管理系统地址： https://bushanjiangzi.gitee.io/vue3manage/#/

源码地址：https://gitee.com/bushanjiangzi/vue3-element-plus

二、新特性

1. 实例化

 1 import { createApp } from 'vue'
 2 import App from './App.vue'
 3 import router from './router'
 4 import store from './store'
 5 import ElementPlus from 'element-plus'
 6 import 'element-plus/lib/theme-chalk/index.css'
 7 import './assets/css/public.css'
 8 import './assets/css/reset.css'
 9 
10 createApp(App)
11   .use(store)
12   .use(router)
13   .use(ElementPlus)
14   .mount('#app')

2. reactive 和 ref 

　　reactive 类似于vue2.x 中的 Vue.observable()，vue3.x的reactive和ref取代了vue2.x中的data数据定义

<template>
  <div class="home">
    <HelloWorld :propsMsg="propsMsg">
      <template #backBtn>
        <router-link to="/setup">
          <el-button type="primary" plain>Setup</el-button>
        </router-link>
      </template>
    </HelloWorld>
    <h2>HelloWorld Input</h2>
    <input v-model="myInput" />
    <h2>Conputed String</h2>
    <input v-model="firstInput" />
    <input v-model="secondInput" />
    <div>{{ state.total }}</div>
    <h2>Conputed Object</h2>
    <input v-model="state.first" />
    <input v-model="state.second" />
    <div>total：{{ state.total2 }}</div>
    <div>doubleCount：{{ doubleCount }}</div>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import { reactive, ref, watchEffect, watch, provide, computed } from 'vue'
import setupTest from '@/composition/setup'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  setup() {
    const { propsMsg, myInput } = setupTest()
    propsMsg.name = ' World'
    const firstInput = ref()
    const secondInput = ref()
    const state = reactive({
      first: 0,
      second: 0,
      total: 0,
      total2: 0
    })
    watchEffect(() => {
      state.total = firstInput.value + secondInput.value
      state.total2 = parseInt(state.first) + parseInt(state.second)
    })
    watch([firstInput, secondInput], (newValues, prevValues) => {
      console.log(firstInput.value, secondInput.value, newValues, prevValues)
    })
    const doubleCount = computed({
      get() {
        return state.total2 * 2
      },
      set(newVal) {
        state.total2 = newVal / 2
      }
    })
    provide('provideData', 'provide data from home')
    return {
      propsMsg,
      myInput,
      firstInput,
      secondInput,
      state,
      doubleCount
    }
  }
}
</script>

3. watch & watchEffect

　　3.x中watch支持监听单个属性，也支持监听多个属性，相比2.x的watch更灵活，多个时第一个参数是要监听的数组，第二个参数是回调函数，返回参数是新值；3.x中watchEffect方法会返回一个方法（俗称副作用，只要返回函数里的依赖项发生变化就回执行回调函数），watch跟watchEffect不同的地方在于，watchEffect注册后会立即调用，而watch默认不会，除非显示指定immediate=true，并且watchEffect可以停止监听

4. 计算属性 computed

2.x和3.x中的computed都支持getter和setter，写法一样，只是3.x中是组合函数式

5. provide和inject

父组件：provide('provideData', 'provide data from home')

子孙组件：inject('provideData')

<template>
  <div class="hello">
    <h1 class="left">{{ propsMsg.msg }} {{ propsMsg.name }} {{ homeInput }}</h1>
    <div class="right">
      <el-button type="primary" plain @click="toElement">Element-Plus</el-button>
      <slot name="backBtn"></slot>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line
import { computed, inject, onMounted, getCurrentInstance } from 'vue'
import store from '@/store/index'
import router from '@/router/index'
import { ElMessage } from 'element-plus'
export default {
  name: 'HelloWorld',
  props: {
    propsMsg: {
      type: Object,
      require: true
    }
  },
  setup() {
    const homeInput = computed(() => {
      return store.state.homeInput
    })
    const toElement = () => {
      router.push({ name: 'ElementIndex' })
    }
    ElMessage.success(inject('provideData'))
    onMounted(() => {
      // const { ctx } = getCurrentInstance()
      // ctx.$message.success(inject('provideData'))
      // console.log(inject('provideData'))
    })
    return {
      homeInput,
      toElement
    }
  }
}
</script>

6. getCurrentInstance获取当前组件实例

　　import { getCurrentInstance } from 'vue'

　　const { ctx } = getCurrentInstance()

7. 插槽slot

父组件：```

    <HelloWorld :propsMsg="propsMsg">

      <template #backBtn>

        <router-link to="/setup">

          <el-button type="primary" plain>Setup</el-button>

        </router-link>

      </template>

    </HelloWorld>

```

子组件：```

<template>

  <div class="hello">

    <h1 class="left">{{ propsMsg.msg }} {{ propsMsg.name }} {{ homeInput }}</h1>

    <div class="right">

      <el-button type="primary" plain @click="toElement">Element-Plus</el-button>

      <slot name="backBtn"></slot>

    </div>

  </div>

</template>

```

8. 生命周期

　　3.x移除了2.x中的beforeCreate和created钩子，通过setup方法代替

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })
  }
}

三、Composition API及代码复用

　　vue2.x中，所有的数据都在data方法中定义返回，方法定义在methods下面，并通过this调用vue3.x中，所有的代码逻辑将在setup方法中实现，包括data、watch、computed、methods、hooks，并且不再有this；vue3.x setup方法在组件生命周期内只执行一次，不会重复执行，相比vue2.x中基于OPTIONS配置的方式，vue3.x基于组合式API的方式语义没有2.x清晰，2.x中data、methods、computed、watch等都通过不同的scope区分开，看起来很清晰，3.x都放在setup方法中，对代码组织能力会有更高的要求。

 代码复用：

import { reactive, ref, getCurrentInstance } from 'vue'

const setupTest = function() {
  const { ctx } = getCurrentInstance()
  const propsMsg = reactive({
    msg: 'Hello',
    name: 'Jiangzi',
    age: 18
  })
  const myInput = ref()
  const formRef = ref()

  return {
    ctx,
    propsMsg,
    myInput,
    formRef
  }
}

export default setupTest

 引入：

<template>
  <div class="home">
    <HelloWorld :propsMsg="propsMsg">
      <template #backBtn>
        <router-link to="/">
          <el-button type="primary" plain>Home</el-button>
        </router-link>
      </template>
    </HelloWorld>
    <h2>HelloWorld Input</h2>
    <input v-model="myInput" />
  </div>
</template>

<script>
import setupTest from '@/composition/setup'
import HelloWorld from '@/components/HelloWorld.vue'
import { provide } from 'vue'
export default {
  name: 'Setup',
  components: {
    HelloWorld
  },
  setup() {
    // const formRef = ref()
    const {
      propsMsg,
      myInput
    } = setupTest()
    provide('provideData', 'provide data from setup')
    return {
      propsMsg,
      myInput
    }
  }
}

四、router路由

　　获取路由配置项：

　　this.$router.options.routes

　　当前路由组件名：

　　this.$router.currentRoute.value.name

<script>
export default {
  name: 'ElementNav',
  data() {
    return {
      menuList: [],
      activeName: ''
    }
  },
  created() {
    this.$router.options.routes.forEach((item) => {
      if (item.desc === 'element-plus') {
        this.menuList = item.children
      }
    })
    // console.log(this.menuList)
    let currentRouteName = this.$router.currentRoute.value.name
    // console.log(currentRouteName)
    this.activeName = currentRouteName
  },
  mounted() {},
  methods: {
    menuClick(item) {
      this.activeName = item.name
    },
    handleOpen(key) {
      // console.log(key, keyPath)
      if (key) {
        this.$router.push({ name: key })
      }
    },
    handleClose(key) {
      if (key) {
        this.$router.push({ name: key })
      }
    }
  }
}
</script>

　　项目配置页路由

// eslint-disable-next-line
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'
const Test = () => import('@/views/Test.vue')
const Setup = () => import('@/views/Setup.vue')
const ElementIndex = () => import('@/views/element/ElementIndex.vue')
const ElementHome = () => import('@/views/element/ElementHome.vue')
const ElementForm = () => import('@/views/element/ElementForm.vue')
const ElementTree = () => import('@/views/element/ElementTree.vue')
const ElementUpload = () => import('@/views/element/ElementUpload.vue')
const ElementTable = () => import('@/views/element/ElementTable.vue')
const ElementPages = () => import('@/views/element/ElementPages.vue')
const ElementCarousel = () => import('@/views/element/ElementCarousel.vue')
const ElementCalendar = () => import('@/views/element/ElementCalendar.vue')
const ElementTransfer = () => import('@/views/element/ElementTransfer.vue')

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/test',
    name: 'Test',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test
  },
  {
    path: '/setup',
    name: 'Setup',
    component: Setup
  },
  {
    path: '/element',
    name: 'ElementIndex',
    component: ElementIndex,
    redirect: '/element/home',
    desc: 'element-plus',
    children: [
      {
        path: '/element/home',
        name: 'ElementHome',
        component: ElementHome,
        desc: '基础组件',
        icon: 'el-icon-office-building'
      },
      {
        path: '/element/form',
        name: 'ElementForm',
        component: ElementForm,
        desc: 'Form表单',
        icon: 'el-icon-message'
      },
      {
        path: '/element/tree',
        name: 'ElementTree',
        component: ElementTree,
        desc: '树形控件',
        icon: 'el-icon-grape'
      },
      {
        path: '/element/upload',
        name: 'ElementUpload',
        component: ElementUpload,
        desc: '上传组件',
        icon: 'el-icon-upload2'
      },
      {
        path: '/element/table',
        name: 'ElementTable',
        component: ElementTable,
        desc: 'Table表格',
        icon: 'el-icon-s-grid'
      },
      {
        path: '/element/pages',
        name: 'ElementPages',
        component: ElementPages,
        desc: 'pages分页',
        icon: 'el-icon-folder-opened'
      },
      {
        path: '/element/carousel',
        name: 'ElementCarousel',
        component: ElementCarousel,
        desc: '走马灯',
        icon: 'el-icon-picture'
      },
      {
        path: '/element/calendar',
        name: 'ElementCalendar',
        component: ElementCalendar,
        desc: '日历',
        icon: 'el-icon-date'
      },
      {
        path: '/element/transfer',
        name: 'ElementTransfer',
        component: ElementTransfer,
        desc: '穿梭框',
        icon: 'el-icon-d-arrow-right'
      }
    ]
  }
]

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL), // HTML5模式路由
  history: createWebHashHistory(process.env.BASE_URL), // 哈希路由
  routes
})

export default router

五、vuex状态管理

1. 提交

  import store from '@/store/index'

  watchEffect(() => {

    store.commit('setHomeInput', myInput.value)

  })

2. 获取

    const homeInput = computed(() => {

      return store.state.homeInput

    })

import { createStore } from 'vuex'

export default createStore({
  state: {
    homeInput: ''
  },
  mutations: {
    setHomeInput(state, data) {
      state.homeInput = data
    }
  },
  actions: {},
  modules: {}
})