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

原创已于 2023-08-14 14:56:50 修改 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2023-08-14 14:56:01 首次发布

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用pnpm管理和安装axios、vue-router、pinia和Sass，以及在Vue.js项目中设置路由、API调用和状态管理store的过程。

一、创建项目

创建项目
```
pnpm create vite@latest
```
输入项目名称
```
Project name: » test_project
```
选择vue
选择ts

二、安装axios

安装axios命令
```
pnpm add axios -S
```

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;

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

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

三、安装路由

安装路由命令
```
pnpm add vue-router
```

在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,
});

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

在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')

在App.vue中提供出口

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

四、安装sass

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

五、安装pinia

安装store
```
pnpm add pinia
```

在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++;
    },
  },
});

在main.ts中引入

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

页面测试

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);
  });
};