Vue3+TypeScript项目实战自练

项目开启

技术栈：Vite，Vue，TypeScript，Element UI Plus

开发工具：VScode

在项目中新建router文件夹，其下新建目录index.ts文件，内容如下：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
import Layout from '@/components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: Layout,
    }
]
// 创建
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

整合store

npm安装好vuex后，我们新建store文件夹，在该目录下新建index.ts文件，放入官网代码，进行测试。

// store.ts
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

export interface State {
  count: number
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0
  },
  mutations: {
      setCount(state: State, count: number) {
          state.count = count
      }
  },
  getters: {
      getCount(state: State) {
          return state.count
      }
  }
})

// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
}

为了检验vuex的导入情况，我们在HelloWorld.vue中进行测试：

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useStore } from '../store'

// 接收store
const store = useStore()
// 通过计算属性得到store中的count属性
const showCount = computed(() => {
  return store.getters['getCount']
})
const addBtn = () => {
  store.commit('setCount', ++count.value)
}

const count = ref(0)
</script>

<template>
  <h1>{{ showCount }}</h1>
  <button type="button" @click="addBtn">新增</button>
</template>

导入Element Plus第三方组件库

进入Element UI Plus官网，按照要求将其导入到项目中。

页面总布局

在正式开始编写代码之前，首先点出一个setup语法糖：

<script setup lang='ts'>

此处script标签中标记了setup，也就是

• 不需要再return模板中所需要的数据项（数据、方法）了
• 引入的组件可以直接使用，无需再通过components进行注册了

<script lang='ts'>
const n: number = ref(0)
let name: string = ref('张九龄')
const sayHello = () => {
    console.log('Hello Vue!')
}
...
// 需要将模板中用到的数据项暴露出来（return）
return {
    n,
    name,
    ...,
    sayHello,
}
</script>

<script setup lang='ts'>
// 这个script标签中的写法和上面的等价
const n: number = ref(0)
let name: string = ref('张九龄')
const sayHello = () => {
    console.log('Hello Vue!')
}
...
</script>

我们新建立一个layout文件夹，用于存放布局组件，在其下建立Index.vue文件，选好的布局包括头部、主体、边栏三部分，在ElementPlus官网将相关的代码段直接复用过来：

<!-- layou -->
<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

头部栏、导航栏的抽离

我们对已有的layout文件夹进行重构。目前该目录下仅有Index.vue文件，我们再新建一个header和一个menu文件夹，其中分别新建Header.vue和MenuBar.vue文件，用于分离该页面布局。

以MenuBar.vue文件为例，我们实现左侧的导航栏：

<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group title="Group One">
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item one</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title>item four</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <span>Navigator Two</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <span>Navigator Three</span>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <span>Navigator Four</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
</style>