5分钟快速搭建vue3+ts+vite+pinia项目

npm install -g yarn // vite项目创建方式有很多，我们采用yarn，如果没有则需要全局安装
yarn create vite my-vue-app --template vue-ts // 创建vite项目，并指定采用vue3+ts的项目模板
cd my-vue-app
yarn // 安装依赖
yarn dev // 运行

// vite.config.ts
...
import * as path from 'path'
import { resolve } from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //设置别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
})

// tsconfig.json
{
  "compilerOptions": {
    ...
    "skipLibCheck": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 模块名到基于 baseUrl的路径映射的列表。ts文件中使用@
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

yarn add pinia
yarn add pinia-plugin-persist // pinia数据持久化

// src/store/index.ts
import {defineStore} from 'pinia';
import {createPinia} from 'pinia';
import piniaPersist from 'pinia-plugin-persist';
interface GlobalState {
  token: string,
  userInfo: any
}
// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const GlobalStore = defineStore({
  id: 'GlobalState', // id: 必须的，在所有 Store 中唯一
  // state: 返回对象的函数
  state: (): GlobalState => ({
    token: '',
    userInfo: {}
  }),
  getters: {},
  actions: {
    // 不使用箭头函数
    setToken(token: string) {
      this.token = token;
    },
    setUserIngo(userInfo: any) {
      this.userInfo = userInfo;
    }
  },
  // 持久化
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'GlobalState',
        storage: localStorage,
        // storage: sessionStorage,
      }
    ]
  }
});
const pinia = createPinia();
pinia.use(piniaPersist);
export default pinia;

...
import store from "@/store/index";
const app = createApp(App);
app.use(store);

<script setup lang="ts">
import {GlobalStore} from '@/store'
const global = GlobalStore();
</script>
<template>
    <div>{{global.token}}</div>
</template>

npm i less less-loader

export default defineConfig({
  ...
  css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        additionalData:  `@import "${resolve(__dirname, 'src/assets/style/global.less')}";`,
        javascriptEnabled: true,
      }
    }
  }
})

// src/assets/style/global.less
@primary-color: #5878e2; // 主题色

import "./assets/style/global.less";

<script setup lang="ts">
import {GlobalStore} from '@/store'
const global = GlobalStore();
</script>
<template>
    <div>{{global.token}}</div>
</template>
<style scoped>
div {
    color: @primary-color; // 主题色
}
</style>

yarn add vue-router

//  src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const HelloWorld = () => import("@/components/HelloWorld.vue");
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "index",
    meta: {
      title: "首页",
    },
    component: HelloWorld,
  },
  {
    path: "/helloworld",
    name: "helloworld",
    meta: {
      title: "helloworld",
    },
    component: HelloWorld,
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;