VUE

基本操作规则

使用 Vite 创建 Vue 项目并初始化 Git 仓库(放置于同一文件夹下)

# 创建项目文件夹并进入
mkdir my-vite-project
cd my-vite-project

# 初始化 Git 仓库
git init

# 使用 Vite 创建 Vue 项目
npm init vite@latest .

# 安装依赖
npm install

# 添加所有文件到 Git
git add .

# 提交到 Git 仓库
git commit -m "Initial commit with Vite Vue project"

路由的安装

yarn add vue-router@4

src文件夹下新建-> router文件夹->新建index.ts文件

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
     component: () => import('../views/home.vue')
    },
  ] 
})

export default router

根目录下main.ts 入口文件挂在路由文件

import router from './router'

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

app.vue入口文件添加视图显示标签
<template>
  <router-view></router-view>
</template>
--------------------------------------------------------------------------
通过router->index.ts 设置函数导出
import {App} from 'vue'
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
     component: () => import('../views/home.vue')
    },
  ] 
})

// 函数导出
export function setupRouter(app:App) {
    app.use(router)
}

// 具名导出
export default router

根目录下main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router,{setupRouter} from './router'

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

同时app的挂载可优化

//异步 当路由都完成后再挂在app
async function bootstrap() {
  const app = createApp(App);
  setupRouter(app);
  app.use(router);
  await router.isReady();
  app.mount('#app');
}
bootstrap()