vite + vue3 + ts + nodejs + mysql搭建全栈项目①

本项目旨在引导新手程序员了解前后端项目基本结构，本人在前期学习过程因无方向，所走弯路较多，因此汇总为文章，分享给诸位，希望有用

一、利用vite创建项目

使用 NPM

npm init vite@latest

使用yarn

yarn create vite

使用pnpm

pnpm create vite

 1、本项目使用yarn创建项目!

2、进入项目目录

3、安装依赖包

4、启动项目

5、启动成功

6、成功访问

二、配置路由

使用 NPM

npm install vue-router@4

使用 yarn

yarn add vue-router@4

1、这里还是以yarn安装

2、打开项目，在项目中src目录下新建router文件夹，并在其文件夹下新建index.ts文件。在components文件夹下新建home.vue文件

3、路由文件router/index.ts代码如下，建议自己敲一遍，不要直接cv

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/",
    name: "HelloWorld",
    component: ()=>import("../components/HelloWorld.vue"),
  },
  {
    path: "/home",
    name: "home",
    component: ()=>import("../components/home.vue"),
  },
];

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

export default router;

4、在main.ts文件中全局引入，代码如下

import { createApp } from 'vue'
//import './style.css'
import App from './App.vue'
import router from "./router/index"

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

5、修改主组件app.vue内容，其中router-link相当于a标签，可点击跳转，router-view为所有“子组件”的承接器，在router/index.ts配置的组件均可以在本页面出现，代码如下

//app.vue
<template>
  <div>
    <router-link to="/">HelloWorld</router-link> |
    <router-link to="/home">home</router-link> |
    <router-view></router-view>
  </div>
</template>

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

<style scoped>

</style>

6、页面效果如下

7、路由基本配置已完成，当然，我们还可以在添加一页页面不存在情况，显示404。src/components文件夹下新建notFound.vue文件

//src/components/notFound.vue
<template>
  <div>
    <h1>404</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

8、修改路由router/index.ts

import { createWebHistory, createRouter } from "vue-router";

const routes = [
    {
        path: "/:catchAll(.*)",
        component: () => import("../components/notFound.vue"),
    },
    {
        path: "/",
        name: "HelloWorld",
        component: () => import("../components/HelloWorld.vue"),
    },
    {
        path: "/home",
        name: "home",
        component: () => import("../components/home.vue"),
    },
];

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

export default router;

9、当出现不存在页面时，显示404，效果如下

10、配置完成，自己可以按步骤敲一遍，便于记忆。编程的捷径，离不开脑眼手的完美结合，下一节继续完善项目，如果还是不明白的小伙伴可以去B站，我录制了相关视频，视频链接下期分享，未完待续……

​