vue3+TypeScript+pinia+axios项目配置

1.创建项目文件夹

• 创建一个文件夹
• 打开命令提示符后，输入vue create .    ||     vue create 项目名称
• 回车后按y同意创建项目

2.配置基础项目

 

• 通过上下控制键选择最后一个Manually Select features手动配置项目
•  然后按空格选择要使用的配置

•  然后回车，确定配置项

•  选择3.x版本，然后回车

•  后出现三次选项，全部选择n后，出现上述画面，然后选择要用的css预处理器，这里我选择less，然后回车

•  默认选择Mocha +Chai，回车

•  之后选择package.json作为工具包的配置项，然后回车

 

•  这里是是否保存为预设，可以保存方便下次直接选择，我因为已经保存了我这里选择n

 

• 这里是脚手架下载完毕

3.配置px转rem,这里如果是移动端则配置，其余无需配置

cnpm i lib-flexible postcss-px2rem-exclude  --save

•  用vscode打开项目中的main.ts

import 'lib-flexible'

•  在根目录下创建vue.config.js文件并加入下面这些代码

// vue.config.js
module.exports = {
  css:{
    loaderOptions:{
      postcss:{
        plugins:[
          require('postcss-px2rem-exclude')({
            remUnit:75, // 设计稿宽/10
            exclude:/node_modules/
          }),//换算的基数
        ]
      }
    }
  },
}

在package.json中添加以下代码 

"postcss":{
    "plugins":{
      "autoprefixed":{}
    }
  }

•  然后npm run serve启动项目查看效果

 

 4.配置反向代理 

在vue.config.js中添加以下代码

devServer: {
		proxy: {
			//配置跨域
			'/api': {
				target: 'http://localhost:9090', //这里是后端接口地址
				changeOrigin: true,
				pathRewrite: {
					'^/api': ''
				}
			}
		},
		open: true //启动项目自动打开浏览器
	},
	lintOnSave: false // 关闭语法检查

 在cmd中下载axios依赖

cnpm i axios --save

•  在src目录下创建api文件夹，并创建request.ts、index.ts、controller.ts文件

 

import axios from "axios";

const Serivce = axios.create({
    timeout: 2000,
    headers: {
        "Content-Type": "application/json"
    },
});

// 请求拦截
Serivce.interceptors.request.use((config) => {
    console.log(config);
    return config;
}, (err) => { Promise.resolve(err) });

// 响应拦截
Serivce.interceptors.response.use((config) => {
    let res = config.data;
    if (config.config.responseType === "blob") {
        return res;
    }
    if (typeof res === "string") {
        res = res ? JSON.parse(res) : res;
    }
    return res;
}, (err) => { Promise.reject(err) });

export default Serivce;

• 在controller.ts中写出如下代码，定义接口函数

export interface LoginParameter {
    username: string;
    password: string;
}
// 登录接口
export function Login(config: LoginParameter) {
    const params = new URLSearchParams();
    params.append("username", config.username);
    params.append("password", config.password);
    return Serivce({
        url: "/api/login",
        params: params,
        method: "get"
    })
}

•  然后在index.ts中写入如下代码

export * from "./controller";

 反向代理配置就完成，文章中vue.config.js代理路径可更换自己的api路径

5.pinia状态管理工具配置

• 在src下常创建store文件夹，并创建index.ts文件写入如下代码

import { defineStore } from "pinia";
import { ref } from "vue";
const LoginStore = defineStore("11", () => {
    const count = ref<number>(100);

    return {
        count
    }
})

export default LoginStore

• 然后在main.ts中引入pinia

•  在home.vue中引入store文件夹并写入一下代码

<template>
    <div class="brand-container">
        <h1>{{ LoginStore().count }}</h1>
    </div>
</template>

<script lang="ts" setup>
import LoginStore from "@/store/modules/1"; // 引入自己项目中规定文件夹即可，我所使用的是老项目
</script>

<style lang="less" scoped></style>

 pinia配置就完成了

以上就是配置的全部内容