vue3创建项目-使用了pnpm、vite

一、创建项目

1. 创建项目

   pnpm create vite@latest
   

2. 输入项目名称

   Project name: » test_project
   

3. 选择vue

4. 选择ts

二、安装axios

1. 安装axios命令

   pnpm add axios -S
   

2. src下创建utils文件夹=>request.ts

   import axios from "axios";
    
   const request = axios.create({
     baseURL:`http://rap2api.taobao.org/app/mock/274612/`
   });
    
   // 请求拦截 interceptors 拦截器
   request.interceptors.request.use((config) => {
     console.log(`请求拦截`, config);
     return config;
   });
    
   // 响应拦截
   request.interceptors.response.use((res: any) => {
     console.log(`响应拦截`, res);
     return res;
   });
    
   export default request;
   

3. 在src下创建 => api =>index.ts

   import request from "../utils/request";
    
   export const getList = (params: any) => {
     return request({
       url: "/getlist",
       method: "get",
       params,
     });
   };
   

三、安装路由

1. 安装路由命令

   pnpm add vue-router
   

2. 在src下创建文件夹 router=>index.ts

   import { createRouter, createWebHashHistory } from "vue-router";
   
   const routes = [
     {
       path: "/",
       redirect: "/home",
     },
     {
       path: "/home",
       name: "Home",
       component: () => import("@/views/Home/index.vue"),
       // children: [
       //   {
       //     path: "/analyse",
       //     component: () => import("@/views/Analyse/index.vue"),
       //   },
       //   {
       //     path: "/details:id",
       //     component: () => import("@/views/Treat/Details/index.vue"),
       //   },
       // ],
     },
   ];
   
   export const router = createRouter({
     history: createWebHashHistory(),
     routes,
   });
   
   

3. 在src下创建views => Home=>index.vue

4. 在main.ts中引入

   import { createApp } from 'vue'
   // 引入router
   import { router } from "./router/index";
    
   import './style.css'
   import App from './App.vue'
    
   //使用router
   createApp(App).use(router).mount('#app')
   

5. 在App.vue中提供出口

   <template>
     <router-view></router-view>
   </template>
   

四、安装sass

pnpm add -D sass 
pnpm add -D sass-loader

五、安装pinia

1. 安装store

   pnpm add pinia
   

2. 在src下创建store文件=>index.ts

   import { defineStore } from "pinia";
    
   interface MainState {
     count: number;
   }
    
   export const useMain = defineStore("mainStore", {
     state: (): MainState => {
       return {
         count: 1,
       };
     },
     getters: {
       getCount: (state: any) => {
         return state.count;
       },
     },
     actions: {
       addCount() {
         this.count++;
       },
     },
   });
   

3. 在main.ts中引入

   //pinia
   import { createPinia } from "pinia";
   const pinia = createPinia();
    
   const app = createApp(App)
     .use(pinia)
     .mount("#app");
   

4. 页面测试

   import { useMain } from "../../store/index";
   import { storeToRefs } from "pinia";
    
   const main = useMain();
   const { getCount } = storeToRefs(main);
    
   // 获取数据
   const getData = () => {
     main.addCount();
     const params = {};
     getList(params).then((res) => {
       console.log(res);
     });
   };