Vue3+TS+Vant3+Pinia(H5端)配置教程

import { createApp } from'vue'import'./style.css'importAppfrom'./App.vue'import {createPinia} from'pinia'constpinia = createPinia()
constapp = createApp(App)
// 挂载到 Vue 根实例
app.use(pinia)
createApp(App).mount('#app')

<template>
  <h3>Pinia基本使用</h3>
  <p>{{mainStore.count}}</p>
  <p>{{mainStore.arr}}</p>
  {{mainStore.count10}}
  <hr />
  <p>解构mainStore后的渲染</p>
  <p>{{count}}</p>
  <p>{{foo}}</p>
  <hr />
  <p>
    <van-buttontype="success"@click="handleChangeState">修改数据</van-button>
  </p>
</template>
<scriptlang="ts"setup>
import { useMainStore } from"../../store/module/useCountStore";
import { storeToRefs } from"pinia";
constmainStore = useMainStore();
console.log(mainStore.count);
//可以直接解构mainStore,但是这样是有问题的，这样拿到的数据不是响应式的，是一次性的，之后count和foo的改变这里是不会变的
//Pinia其实就是把state数据都做了reactive处理了
//  const { count,foo}=mainStore//解决不是响应式的办法 官方的一个apistoreToRefs// storeToRefs的原理是把结构出来的数据做ref响应式代理
const { count, foo } = storeToRefs(mainStore);
consthandleChangeState = () => {
  // 数据的修改
  // 方式一：最简单的方式，直接调用修改
mainStore.count++;
  //方式二:如果要修改多个数据，建议使用$patch 批量更新
  // 方式三:更好的批量更新的函数：$patch是一个函数,这个也是批量更新
  // 这里的stateindex.ts里的statemainStore.$patch((state) => {
state.count++;
state.foo = "hello!";
state.arr.push(4);
  });
  //方式四：逻辑比较多的时候封装到actions中做处理
mainStore.changeState(10);
};
</script>

// 两种都可以
npmivantnpmivant@next -s

# 通过 npm 安装
npmiunplugin-vue-components-D# 通过 yarn 安装
yarnaddunplugin-vue-components-D# 通过 pnpm 安装
pnpmaddunplugin-vue-components-D

importvuefrom'@vitejs/plugin-vue';
importComponentsfrom'unplugin-vue-components/vite';
import { VantResolver } from'unplugin-vue-components/resolvers';
exportdefault {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
    }),
  ],
};

import { createApp } from'vue';
import { Button } from'vant';
constapp = createApp();
app.use(Button);

npminstallvue-router

import { createRouter, createWebHistory,createWebHashHistory, RouteRecordRaw } from'vue-router'importHomefrom'../view/Home.vue';
constroutes: Array<RouteRecordRaw> = [
  {
path: '/',
name: 'index',
component: Home,
  },
]
constrouter = createRouter({
history: createWebHashHistory(),
 // history: createWebHistory(),
routes})
exportdefaultrouter;

importAppfrom'./App.vue'importrouterfrom'./router/index'app.use(router).mount('#app')

npminstallaxiospnpminstallaxios

importaxiosfrom'axios'// 创建axiosconstservice = axios.create({
  // baseURL: '/api',
baseURL: 'http://xxx.xxx.xx.xxx/',
timeout:80000});
// 添加请求拦截器
service.interceptors.request.use(
  (config:any) => {
lettoken:string =''//此处换成自己获取回来的token，通常存在在cookie或者store里面
if (token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
config.headers['X-Token'] = tokenconfig.headers.Authorization =  + token     }
returnconfig  },
error => {
    // Dosomethingwithrequesterrorconsole.log("出错啦", error) // fordebugPromise.reject(error)
  }
)
service.interceptors.response.use(
  (response:any) => {
returnresponse.data },    /*  */error => {
console.log('err' + error) // fordebugif(error.response.status == 403){
     // ElMessage.error('错了')
console.log('错了');
   }else{
     // ElMessage.error('服务器请求错误，请稍后再试')
console.log('服务器请求错误，请稍后再试');
   }
returnPromise.reject(error)
 }
)
exportdefaultservice;

import {request} from'../request';
// 调用测试
exportfunctiongetTest(params:any) {
returnrequest({
url: '/xxxx',//此处为自己请求地址
method: 'get',
data:params    })
  }

// 接口引入地址
import { getTest} from"../utils/api/service";
/* 调用接口 */getTest('放入params参数').then(response => {
console.log("结果", response);
          })
.catch(error => {
console.log('获取失败！')
          });

npminstallpostcss-pxtorem

npmi-Samfe-flexible

import { defineConfig } from'vite'importvuefrom'@vitejs/plugin-vue'importComponentsfrom'unplugin-vue-components/vite';
import { VantResolver } from'unplugin-vue-components/resolvers';
importpostcssImportfrom"postcss-pxtorem"// https://vitejs.dev/config/
exportdefaultdefineConfig({
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
    }),
  ],
server:{
host: '0.0.0.0'  },
  // 适配
css: {
postcss: {
plugins: [
postcssImport({
          // 这里的rootValue就是你的设计稿大小
rootValue: 37.5,
propList: ['*'],
        })
      ]
    }
  }
})