从0搭建一个最最最基础的vue3+ts项目（包含element plus引入，路由跳转）

1.创建vue3+TS项目的命令：

npm create vite@latest xxx -- --template vanilla-ts

创建完成后，在vscode中打开项目，npm i 下包，然后npm run dev运行项目，看到以下页面代表vue3+ts项目创建成功！

2.创建完之后下载element plus：

npm install element-plus --save

再下载icon图标：

npm install @element-plus/icons-vue

同时在main.ts中编写如下代码（可直接复制下方代码覆盖原来的代码）

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

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

此时，你就可以在你的页面中使用element plus的内容了！

3.下载路由：

npm i vue-router@4

在main.ts中，引入router并使用router：

import router from "./router"，

app.use(router)

main.ts的完整代码如下：

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from "./router"

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

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

此时，你就可以正常使用路由跳转了！

4.路由跳转示例

以下内容包括除了初始文件外的所以代码~
文件布局如下：

// router.ts
import { createRouter, createWebHashHistory } from "vue-router"

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/",
            name: 'home',
            component: () => import('./components/home.vue')
        },

        {
            path: "/about",
            name: 'about',
            component: () => import('./components/about.vue')
        },
        {
            path: "/HelloWorld",
            name: 'HelloWorld',
            component: () => import('./components/HelloWorld.vue')
        },
        {
            path: "/small",
            name: 'small',
            component: () => import('./components/small.vue')
        },
    ]
});


export default router;

//main.ts
import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from "./router"

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

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

//App.vue
<script setup lang="ts">

</script>

<template>
  <router-view></router-view>
</template>

<style scoped></style>

//home.vue
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import router from "../router"; //用到router-link
import { useRoute } from "vue-router";

const isshow = ref(true); //v-if默认按钮要展示
const currentRoute = ref(useRoute());
// 监听浏览器上方的路由地址！
watch(
  () => currentRoute.value.fullPath,
  (newRoute, oldRoute) => {
    // console.log("路由路径:", newRoute);
    if (newRoute !== "/") {
      isshow.value = false;
    } else {
      isshow.value = true;
    }
  }
);
</script>

<template>
  <button v-if="isshow">
    <!-- 第一种跳转路由的方法 router-link -->
    <router-link to="/HelloWorld">去HelloWorld</router-link>
  </button>
  <button v-if="isshow">
    <!-- 第一种跳转路由的方法 router-link -->
    <router-link to="/about">去about</router-link>
  </button>
</template>

<style scoped></style>

//small.vue
<template>
  <h3>small</h3>
  <h3>small</h3>
  <h3>small</h3>
</template>

<script>
 
</script>

<style>

</style>

//HelloWorld.vue
<script setup lang="ts">
import router from "../router";
const submitForm = () => {
  // 第二种跳转路由的方法
  router.push({ path: "/small" });
};
</script>

<template>
  <h3>HelloWorld</h3>
  <h3>HelloWorld</h3>
  <h3>HelloWorld</h3>

  <div>
    <!-- 第二种跳转路由的方法 -->
    <el-button @click="submitForm">跳转到small</el-button>
  </div>
</template>

<style scoped></style>

//about.vue
<template>
  <h3>about</h3>
  <h3>about</h3>
  <h3>about</h3>
</template>

<script>
 
</script>

<style>

</style>