Vue3+Vite+TypeScript+element Plus框架搭建过程（1）

代码地址， 分支basic：https://gitee.com/lsjWeiYi/vue3-frame

element plus 官方提供了一个模板，基于改模板，二次封装一些基本的模块，方便以后开发。

我把依赖更新到了最新，启动该方法见readme。

PS: 这个框架引入了按需导入插件unplugin-vue-components，默认在“src/components”下的vue组件最自动注册，注册文件是“src/components.d.ts”

添加路由模块

代码地址， 分支router：https://gitee.com/lsjWeiYi/vue3-frame

路由模块的配置其实很简单，我是采用的vue 官方生成的模板

1. 在package.json添加依赖：“vue-router”: “^4.0.13”
2. 新建router文件夹，添加index.ts：

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import HelloWorld from "~/components/HelloWorld.vue";
// 路由列表，路由就添加在此
const routes: Array<RouteRecordRaw> = [
    {
        path: "/HelloWorld",
        name: "HelloWorld",
        component: HelloWorld,
    },
];

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

export default router;

PS:实测，router impor的时候有个坑，如“components”写成“Components”也能成功路由过去，这里看似大小写不敏感，但是如果不完全按照实际路径去import，会导致该文件的热更新失败。所以还是要区分大小写。只是这里又能路由成功，还是挺迷惑人。

3. main.ts启用router：

import router from './router'
....
app.use(router).mount("#app");

到此配置就结束了。后面是使用

我们改造一些App.vue的内容：

<template>
  <!-- 默认情况下，程序启动的入口就是显示这里的内容 -->
  <BaseHeader /> <!--导航栏 -->
  <img alt="Vue logo" class="element-plus-logo" src="./assets/logo.png" /> <!-- 显示两个图标 -->
  <p><router-link to="/HelloWorld">Go to HelloWorld</router-link></p> <!-- 添加一个路由的按钮，路由到HelloWorld，当然该路径需要添加到路由列表才能生效 -->
  <router-view/> <!--路由显示的位置，必须有这句，否则路由的内容是不会显示的，因为它不知道显示到哪去-->
</template>

<script setup lang="ts">
</script>

首先呢，我们在路由列表里没有使用path: '/’的路由，所以，打开网址后，程序默认就显示App.vue的内容：

页面很简单：

1. 导航栏，就是这句话的效果
2. 那两个大图标就是<img alt="Vue logo" class="element-plus-logo" src="./assets/logo.png" />这句话的作用
3. 然后那个链接按钮就是router-link那句了

然后我们点一下看看效果：

可以多了helloWorld的内容，但是上面那些大图标啥的怎么都还在，和预想的不太一样哈。

其实就是就是一个标记一样，仅仅是吧路由的页面内容紧接着显示出来，并不是在新的标签页显示，所以原来的内容是不会变的。有没有办法在一个全新的页面显示呢？当然有，后面在学。

我们可以再试试在浏览器世界输入地址http://localhost:3000/#/HelloWorld，可以发现也能直接打开上述页面，说明路由是有效的。