Vue 3.0 脚手架配置 (TypeScript + pinia + less转px转rem + 反向代理 + axios )

切记不可安装  vuex  !!!! 因为会和 pinia 冲突

 

一、打开文件夹   cmd  进入   

 

二、

 三、

四、 

 五、下面的所有选择 No

六、 

 七、

 八、

九、可以打开了，记得进入  文件夹  cd  

 

 启动后的样子：

配置：less的px转rem

1.下载

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

 2. 下载完成后 用vscode打开项目 在入口文件 main.ts 中 引入 lib-flexible 

 import 'lib-flexible'

 

 3.px转rem

        1.在项目根目录下创建 vue.config.js    并在里面配置

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

  2.打开package.json文件 ,添加:

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

 

 三、配置反向代理 + axios

           打开vue.config.js配置文件,在module.exports 中添加以下代码

devServer: {
    proxy: {
        //    配置跨域
        '/api': {
            target: 'http://....................',      //这里是后端接口地址
                changeOrigin: true,
                pathRewrite: {
                '^/api': ''
            }
        }
    },
    open: true   //启动项目自动打开浏览器
}

 

2. 配置axios

         在src目录下创建api文件夹 , 文件夹内创建 index.ts 和 request.ts 两个文件

cnpm i axios -S

 request.ts中:

import axios from "axios";
export const Service = axios.create({
    timeout: 8000, //延迟时间
    method: 'POST',
    headers: {
        "content-Type": "application/x-www-form-urlencoded",
        "pc-token": "4a82b23dbbf3b23fd8aa291076e660ec", //后端提供
    }
})
// 请求拦截
Service.interceptors.request.use(config => {
    return config
})
// 响应拦截
Service.interceptors.response.use(response => {
    return response.data
}, err => {
    console.log(err)
})

 index.ts中

import { Service } from "./request";
interface searchConfig {
    page: number | string
    mod: string
}
interface getConfig {
    page: number | string
}
// 搜索接口
export function searchCar(config: searchConfig) {
    const params = new URLSearchParams()
 
    params.append('page', config.page as string);
    params.append('mod', config.mod);
 
    return Service({
        url: "./api/oldcar/searchCar",
        data: params
    })
}
 
// 列表接口
export function getCarList(config: getConfig) {
    const params = new URLSearchParams()
    params.append('page', config.page as string)
    return Service({
        url: "/api/oldcar/getCarList",
        data: params
    })
}

在 view/about 中测试：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="getData">获取数据</button>
  </div>
</template>
<script lang="ts">
import { getCarList } from "../api"; //引用
import { defineComponent, onMounted } from "vue";
 
export default defineComponent({
  setup() {
    const getData = async function () {
      console.log(await getCarList({ page: 1 }));
    };
    onMounted(async() => {
      console.log(await getCarList({ page: 1 }));
    });
    return {
      getData,
    };
  },
});
</script>

 点击按钮获取数据

 

然后安装  pinia

1.下载  pinia

cnpm i pinia -S

 2.Main.js引入

在 src  目录下创建  store 文件  在创建 index.ts 文件。 

import { defineStore } from 'pinia'


export const useMainStore = defineStore('main', {
    state: () => {
        return {
            count: 100
        }
    },
    // 类似 于组件的 computed ,用来封装 计算属性 ， 有缓存的功能
    getters: {

    },
    // 类似于组件的methods, 封装业务逻辑 ,修改 state
    actions: {

    }
})

 页面中使用：

在components 下使用  Helloworld.vue

中写

 

现在就可以去页面看看效果，pinia  的使用在官方网站看