Vue3基础库引入及部分第三方库的引入使用

一、路由

1、路由

  下载路由  npm install vue-router@4

 2、创建文件  src下创建router文件夹

在router文件下创建router.ts文件
        
import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from "vue-router"
export const IndexRouter = []
const routes: Array<RouteRecordRaw> = [
    //一级路由重定向
    {
        path: '/:catchAll(.*)', redirect: '/index'
    },
    {
        path: '/index',
        component: () => import("../pages/index/index.vue"),//路由懒加载
        // 二级路由
        children: [
            {
                path: '/home',
                component: () => import('../views/home.vue'),
            }
        ]
    },
    ...IndexRouter
]

const router = createRouter({
    history: createWebHistory(),//设置路由模式
    // history:createWebHistory(process.env.BASE_URL),
    routes
})
export default router

3、main.ts引入使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router).mount('#app')

4、设置路由出口

<script setup lang="ts">

</script>

<template>
  <!-- 一级路由出口 -->
  <router-view></router-view>
</template>

<style scoped></style>

5.使用路由跳转

。。。

 

二、vuex

三、Element-Plus

安装

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

引入使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from "element-plus"
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//icon
const app = createApp(App)
// ElementPlus 的icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(router).use(ElementPlus).mount('#app')

四、全局

1、全局组件

import vHead from "./head/head.vue";
// export default function install(app: any) {
//     app.component('vMap', vHead)
// }

export const componentPligin = {
    install(app: any) {
        // app.component('组件名字',组件配置对象)
        app.component('vHead', vHead)

    }
}

main.ts

import {componentPligin} from './components/index'
const app = createApp(App)

app.use(router).use(ElementPlus).use(componentPligin).mount('#app')