vue3+TypeScript+pinia+axios项目配置

最新推荐文章于 2024-11-18 20:27:55 发布

你怎么生气了

最新推荐文章于 2024-11-18 20:27:55 发布

阅读量625

点赞数

文章标签： typescript vue.js javascript

本文链接：https://blog.csdn.net/m0_64387562/article/details/129125416

版权

文章详细介绍了如何使用VueCLI创建项目，手动配置项目特性，包括选择Vue3.x版本，设置CSS预处理器（如Less），配置px转rem，以及设置反向代理来解决跨域问题。此外，文章还讲解了Pinia状态管理工具的配置方法，展示了如何在组件中使用store模块。

摘要由CSDN通过智能技术生成

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>