​从新回归Vue之3.0（五）：router配置，引入element-plus

一，router配置以及使用详解

安装npm install vue-router@4

贴一个极度简单的vue页面模型

<template>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
// data
// props
// emit
// methods
// watch
// defineExpose
// 生命周期
</script>
<style scoped></style>

页面具体内容：

1、layout.vue

<template>
    <Header/>
    <router-view></router-view>
</template>
<script setup lang="ts">
    import Header from './header/index.vue';
</script>

2、header.vue

<template>
    <div>
        <h2 @click="handleClick(1)">首页</h2>
        <h2 @click="handleClick(0)">关于</h2>
    </div>
</template>
<script setup lang="ts">
    import { useRouter } from 'vue-router';
    const router = useRouter()
    const handleClick = (num: number)=>{
        if (num) {
            router.push({name: 'home'})
        }else router.push({name: 'about'})
    }
</script>
<style scoped></style>

3、home.vue

<template>
    <h2>home</h2>
</template>

4、about.vue

<template>
    <h2>about</h2>
</template>

在src目录下创建router文件夹，然后创建index.ts文件，内容如下所示：

import { createRouter, createWebHashHistory } from "vue-router";
import LayOut from "../components/layout/index.vue";

const routes = [
    {
        path: '/',
        component: LayOut,
        redirect: '/home',
        children:[
            {
                path: '/home',
                name: 'home',
                component: ()=> import("../pages/home/index.vue"),
                meta:{
                    title: '首页',
                    icon: ''
                }
            },
            {
                path: '/about',
                name: 'about',
                component: ()=> import("../pages/about/index.vue"),
                meta:{
                    title: '关于',
                    icon: ''
                }
            }
        ]
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

在main.ts中注入router模块, 重新启动项目，访问路由，看是否正确

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

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

二，引入element-plus以及注意事项

官方文档地址：Button 按钮 | Element Plus

安装

npm install element-plus --save

npm install @element-plus/icons

在main.ts 文件中引入配置

import { createApp } from 'vue'
import App from './App.vue'
import store from './store';
import router from './router';
// 引入ui组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 全局注册图标使用
import { Edit,Search } from '@element-plus/icons'

const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus);
app.component("edit", Edit)
app.component("search", Search)
app.mount('#app')

在home页面测试

<template>
  <h2>home</h2>
  <el-button type="primary" :icon="Search">Primary</el-button>
  <el-icon :size="20" :color="'blue'">
    <edit />
  </el-icon>
  <el-icon :size="20">
    <search></search>
  </el-icon>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Search } from '@element-plus/icons-vue'
// data
// props
// emit
// methods
// watch
// defineExpose
// 生命周期
</script>