vue3+vite+ts日常学习，项目笔记（1）

项目搭建

查看自己的node版本

node -v

选择使用使用vite2来搭建项目

npm init vite@latest

其他的按照文档进行

官网链接：https://vitejs.cn/guide/#scaffolding-your-first-vite-project

vite 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base:'/front/',
  plugins: 
  [vue()],
  server: {
    hmr: { overlay: false }, // 禁用或配置 HMR 连接 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层

    // 服务配置
    port: 4396,    // 类型： number 指定服务器端口;
    open: '/front/index',   // 类型： boolean | string在服务器启动时自动在浏览器中打开应用程序；
    cors: true,  // 类型： boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源
    proxy: {    // 类型： Record<string, string | ProxyOp 为开发服务器配置自定义代理规则
      '/api': {
        target: '0.0.0.0',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace('/api', '')
      }
    },
  },
})

更多配置：https://juejin.cn/post/7139372943661858830

也可以去官网查看配置

配置路由

npm加载依赖

npm install vue-router@4

在src新建文件夹，配置文件router文件

import {
  createRouter,createMemoryHistory,RouteRecordRaw
} from 'vue-router'

export const constantRoutes:Array<RouteRecordRaw> = [
  {
    path:'/',
    name:"首页",
    meta:{
      title:'第一页'
    },
    component: () => import('../view/home/index.vue'),
  },
  {
    path:'/login',
    name:'登录页',
    meta:{},
    component: () => import('../view/login/index.vue'),
  }
]
// 返回当前router对象
const router = createRouter({
  history:createMemoryHistory(),
  scrollBehavior:() =>({
    top:0,
  }),
  routes:constantRoutes
})

export default router

在mian文件中使用路由

import router from './router/index'
createApp(App).use(router)

在app.vue中配置路由出口页面

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

官网配置链接：https://router.vuejs.org/zh/guide/

简单测试页面

一个index主页面
一个login页面

实现页面跳转，路由切换

<template>
  <div>
    <h1 @click="goLogin()">index</h1>
  </div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';

export default {
  setup(){
    let router = useRouter()
    function goLogin() {
      router.push('/login')
    }
    return {
      goLogin
    }
  }
}
</script>

<style>

</style>

注意事项：
1.vue3的事件绑定，需要返回方法，方能使用
2.使用route需要引入后，才能使用
3.useRouter返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。