【Vite+Vue3+Ts+Pinia+Sass】从0到1项目创建（必备收藏）

项目创建

网络问题，这里我用cnpm，遇到安装卡了不动的同学也可以使用cnpm
安装命令npm install cnpm -g

cnpm create vite@latest
//  Project name: » vite-project(项目名)

选择第二项，回车

使用Ts，回车

创建完成，按顺序执行以下三步骤

// Done. Now run:

cd 你的项目名

cnpm install // 安装依赖

cnpm run dev // 运行项目

安装sass

cnpm install sass -D

》页面使用：
<style lang="scss" scoped></style>

Ts配置>解决@/引入编辑器红线告警

tsconfig.json》
"compilerOptions": {
	// 增加下面两项
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
}

安装Router路由

cnpm install vue-router@4

》src目录新建router文件夹，里面新建index.ts文件

// index.ts
import { createRouter, createWebHistory } from "vue-router";
const routes = [
  {
    path: "/",
    name: "home",
    // src创建view路由文件/Home/index.vue
    component: () => import("@/view/Home/index.vue"),
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

main.ts引入路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from "./router/index.ts";
const app = createApp(App);
app.use(router).mount('#app')

安装Pinia

cnpm install pinia

main.ts引入Pinia

// 更新上面main.ts内容:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from "pinia";

import router from "./router/index.ts";
const app = createApp(App);
app.use(router).use(createPinia()).mount('#app') 

src目录新建store文件夹

》新建index.ts文件

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", () => {
  // 自定义写你要写的方法》例如
  const setAuthData = (token: string, userData: any): void => {
    localStorage.setItem("token", token);
    localStorage.setItem("userData", JSON.stringify(userData));
  };
  return {
    // 方法函数必须return返回
    setAuthData,
  };
});

》页面使用
import { useCounterStore } from "@/store/index";
const store = useCounterStore();
store.setAuthData('token','userData') 

Axios配置以及api封装相关请阅读另一篇文章：【Vite+Ts+Vue3】项目多环境打包配置+axios+Api封装