初始化创建项目

1
2
3
4
yarn create hello
cd hello
yarn
yarn dev

修改vite配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path' //找不到模块，就：yarn add @types/node --dev

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') //在设置路径时把'@'指向'src'目录
    }
  },
  server: {
    port: 3000, //设置服务端口号
    open: true,//服务启动时，是否浏览器自动打开网页
    //proxy代理，开发的时候跨域用的
    proxy: {
      '/api': {
        target: '', //后端api的地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

配置vue-router

安装vue-router
1
yarn add vue-router
创建相应文件(src/router/index.ts)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: ()=> import('@/views/Home/index.vue')
    },
    {
        path: '/mine',
        name: 'mine',
        component: ()=> import('@/views/Mine/index.vue')
    },
    {
        path: '/add',
        name: 'add',
        component: ()=> import('@/views/Add/index.vue')
    },
]

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

export default router