Vue3+vite+TypeScript+Vant项目搭建

本篇讲述基于NodeJs、Vite、Vue3、Typescript搭建前端项目的详细步骤，此外还包括配置pinia（store）、router、跨域代理以及引入vant库的主要步骤。

NodeJs

官网下载安装https://nodejs.org/en/download/
查看 nodejs 是否安装成功： node -v
查看 npm 的版本：npm -v

项目搭建

1. npm init vite

（如果不会解决mac笔记本权限的问题，可在npm命令前加上 sudo，然后输入密码执行命令）

创建 vue3+ts+vite的项目

2. npm i

安装 npm 依赖

3. npm run dev 运行项目
   打开 Local后面的本地链接，查看项目页面
   
   到这一步已经可以运行项目了，为了进一步开发，以下再配置一些其他工具。

安装、配置 pinia/store

安装

npm i pinia -S
vite 配置中取消了 VueX(store) 和 router 的配置，需要手动封装配置
pinia 是 vue3 基于 Vuex 的状态管理工具

创建 src/store目录

1. 增加 index.ts 文件

import {
    createPinia } from "pinia"

const store = createPinia()

export default store

2. 增加 user.ts 文件

// pinia 用户使用方法
import {
    defineStore } from "pinia"
export const userStore = defineStore({
   
    id: 'user',
    // 数据
    state: () => {
   
        return {
   
            token: localStorage.getItem('token') || '',
            userInfo: localStorage.getItem('userInfo') || {
   }
        }
    },
    // 方法
    actions: {
   
        setUserInfo(data: any) {
   
            this.token = data.token
            this.userInfo = data.user_info
            localStorage.setItem("token", this