Vue3+TypeScript的基本使用（1）

前言

前端目前的发展对于我这种还停留在JQuery年代的人来说，只能用沧海桑田这个词来描述了。

目的：

• 简单了解并运用Vue3、TypeScript、ELementsUI、Router、Axios、store编写一个简单的登录系统，最终打包部署至Kubernetes

初始化项目

基础环境配置

参考上篇博客：

创建项目

选择使用vue-cli工具进行创建，对新手比较友好

#新增（没有时会自动新增文件夹,注意文件名不能大写）
vue create user-test

• Use class-style component syntax?是否选择 class 语法的模板，这个选项是针对 TS 的，3.0版本选择 “否”

• TypeScript拥有类型限制的JavaScript，用的挺痛苦的

• Use history mode for router?是否选择history模式作为路由模式，选择否。使用hash路由模式，打包出来的静态文件就无需依赖服务器也可以直接运行

安装基本组件

cd user-test

#网络
yarn add axios

#UI
yarn add element-plus

在main.ts中全局引用element-plus

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//引入 element-ui
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
    .use(store)
    .use(router)
    .use(ElementPlus)
    .mount('#app')

编写页面

除了App.vue，其它.vue文件全部删除

App.vue如下调整，只保留一个

在View目录下新增LoginView.vue、HomeView.vue文件，内容如下

这里比较有意思的是先声明了一个接口，再在ref入参里面对这个接口做了实现

编写主页页面

整体布局的页面，主要实现侧边栏列表的点击展示对应的component

准备子路由页面

在components目录下新增UserListView.vue、PersonalView.vue两个页面

调整router/index.ts

调整/home的路由对象，增加redirect、children

import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
import LoginView from '../views/LoginView.vue'

const routes: Array = [
    {
        path: '/', //默认渲染至App.vue中，配合使用
        component: LoginView
    },
    {
        path: '/home',
        redirect: '/userlist', //设置默认重定向的子页面
        children: [
            {
                path: '/userlist',
                name: '用户列表',
                component: () => import('../components/UserListView.vue')
            },
            {
                path: '/personal',
                name: '个人中心',
                component: () => import('../components/PersonalView.vue')
            }
        ],
        component: () => import('../views/HomeView.vue') //懒加载方式，按需引入
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

redirect实现访问/home时跳转至/userList路由的页面，相当于是配置了一个默认展示的子路由

HomeView.vue

配合ElementsUI中标签的router属性，和标签中的:index="i.path",实现路由页面的切换

再配合标签将对应路由页面展示在 标签中

完善子路由页面

实现一下UserListView.vue页面，使其展示用户列表

页面展示

登录页

主页和对应的子页面