注：

① Node版本16+

② 开发工具 vscode

一、创建项目

① 执行命令 pnpm create vite

② 输入项目名称，选择Vue → TS

③ cd 项目名 → pnpm i → pnpm run dev

vite中文官网

二、配置项目

2.1 项目自动打开

package.json中配置 --open

“script”: {
    "dev": "vite --open"
}

2.2 配置src别名

vite.config.ts中配置

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

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src")
        }
    }
})

引入path和配置时报红：安装@types/node(执行安装命令 pnpm i @types/node --save-dev)，是TS的一个声明文件包，用于描述Node.js核心模块和常用的第三方库的类型信息

编辑器中引入路径时智能提示配置

tsconfig.json的compilerOptions中添加配置

"baseUrl": ".",
"paths": {
    "@/*": ["src/*"]
}

2.3 配置路由

① 安装 pnpm i vue-router

② 封装路由

新建 router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
// createRouter方法，用于创建路由实例，管理多个路由
const router = createRouter({
    // history：路由模式的设置
    history: createWebHistory(),
    // routes：多个路由的管理
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            name: 'Home',
            path: '/home',
            component: () => import('@/views/home/index.vue')
        },
        {
          name: "User",
          path: "/user",
          component: () => import("@/views//user//index.vue"),
          children: [
            {
              path: 'register',
              component: () => import('@/views/user/register/index.vue')
            },
            {
              path: 'detail',
              component: () => import('@/views/user/detail//index.vue')
            }
          ]
        },
        ....
    ],
    // 滚动行为，控制滚动条的位置
    scrollBehavior(){
       return {
           top: 0,
           left: 0
       }
    }
})

// 路由守卫
router.beforeEach((to, from, next) => {
    next()
})

router.afterEach((to, from) => {

})

export default router

③ main.ts中配置

import router from '@/router'
...
app.use(router)
...

2.4 配置axios

① 安装pnpm i axios

② 二次封装axios

新建 utils/request.ts

import axios from 'axios'
import { ElMessage } from "element-plus"

const request = axios.create({
    baseUrl: '/api', // 接口基础路径
    timeout: 5000, // 接口请求超时时间
})

// 请求拦截器：可在请求头中携带参数，如token
request.interceptors.request.use((config) => {
    // config.headers.token = 1234
    return config
})

// 响应拦截器：可处理返回数据和报错等
request.interceptors.response.use((response) => {
    if (error.response.status === 404) {
      ElMessage.error("路径不存在！");
    }
    return response.data
}, (error) => {
    return Promise.inject(new Error(error.message))
})

③ 代理跨域

vite官网配置跨域

在vite.config.ts中配置

export default defineConfig({
    server: {
        proxy: {
            '/api': {
                target: '接口地址（域名或ip）',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
})

④ 简单使用

import request from '@/utils/request'
onMounted(()=>{
    request.get('接口路径地址').then(res => {
        console.log(res)
    })
})

2.5 配置pinia

pinia中文文档

① 安装 pnpm i pinia

② 在main.ts中配置

import { createPinia } from 'pinia'

app.use(createPinia())

③ 定义store

选项式

import { defineStore } from 'pinia'

const useHomeStore = defineStore('home', {
    state(){
        return {
            name: 'frank'
        }
    },
    actions: {
        getName(){
            console.log( this.name)
        }
    },
    getters: {
        
    }
})

export default useHomeStore

组合式

import { defineStore } from 'pinia'

const useHomeStore = defineStore('home', ()=>{
    let name = ref<string>('frank')
    function getName(){
        ...
    }
    return {
        name,
        getName
    }
})

export default useHomeStore

④ 使用store

import useHomeStore from '@/store/home.ts'

const useHome = useHomeStore()
...
console.log(useHome.name)
useHome.getName()
...

2. 常用的第三方库及其他配置

① sass： pnpm i sass

② reset.scss 在npm上搜索即可

③ element：pnpm i element-plus

import ElementPlus from "element-plus";
import 'element-plus/dist/index.css';
app.use(ElementPlus);

④ vite-env.d.ts：存放vite声明文件，将ts不认识的文件，此文件帮助做了一个声明

在src下新建vite-env.d.ts文件

/// <reference types="vite/client" />

// 解决引入element-icon，报找不到包，类似问题同理
declare module "@element-plus/icons-vue";

// 解决找不到模块“*.vue”或其相应的类型声明。
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

开发中遇到的问题

① 引入文件提示 Cannot find module … or its corresponding type declarations.（ts2307）

参考博客

首先（windows：ctrl + shift + P）（mac: command + shift + P）打开搜索 type，选择 Volar: Select TypeScript Version...，选择 Use Workspace Version...

持续更新中