Bagaimana untuk mengkonfigurasi Vue3+TS+Vant3+Pinia

Tetapan IDE yang disyorkan

Kod VS + Volar

Sokongan menaip. Vue dalam TS mengimport

kerana TypeScript tidak boleh mengendalikan maklumat jenis. import vue, secara lalai ia diisi dengan jenis komponen vue generik. Jika anda hanya mengambil berat tentang jenis prop komponen templat, ini tidak mengapa dalam kebanyakan kes. Walau bagaimanapun, jika anda ingin mendapatkan jenis prop sebenar. import vue, anda boleh mendayakan mod pengambilalihan Volar dengan mengikuti langkah berikut:

1. Jalankan sambungan: Tunjukkan sambungan terbina dalam daripada palet arahan Kod VS, cari ciri bahasa TypeScript dan JavaScript, kemudian kanan- klik dan Pilih Dilumpuhkan (Ruang Kerja). Mod pengambilalihan didayakan secara automatik apabila sambungan TypeScript lalai dilumpuhkan.

2. Muat semula tetingkap Kod VS dengan menjalankan Pembangun: Muat semula tetingkap daripada palet arahan.

Pasang pnpm

#Lightweight pnpm
Jelaskan sedikit
Prinsip pnpm ialah ia tidak akan menyimpan salinan yang sepadan dengan mudah, tetapi fail berbeza hanya tambah fail yang diubah, yang bersamaan dengan bahagian yang sama bagi berbilang projek ini yang berkongsi satu versi kebergantungan.

Dengan cara ini, ruang cakera keras boleh dikurangkan dengan banyak dan kelajuan pemasangan akan dipercepatkan pada masa yang sama

Secara terus terang, ia akan dimuatkan lebih cepat daripada npm
Sebagai contoh, jika anda memasang kebergantungan, Hanya gunakan

npm install pnpm -g

dan anda akan mendapati bahawa ia adalah lebih pantas daripada npm.

pnpm install

1. Pasang vite

Bina vite

yarn create vite

Pasang kebergantungan

npm i

Mulakan projek

yarn dev

Pilih versi Vue3 +TS Itu sahaja

2. Pasang pinia

npm add pinia@next

Gunung Pinia

main.ts

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

Perkenalkan Pinia secara tempatan

import { defineStore } from 'pinia'

Anda boleh melakukan perkara berikut Lihat contoh penggunaan:

• Anda boleh mencipta fail store/module/useCountStore.ts di bawah src yang sepadan

• Kandungan khusus adalah seperti berikut:
  useCountStore.ts

import { defineStore } from 'pinia'

//定义容器
//参数1:容器的id，必须唯一，将来pinia会把所有的容器挂载到根容器
//参数2：选项对象
//返回值是一个函数，调用得到容器实列
export const useMainStore=defineStore('main',{
    //state类似于组件的data,用来存储全局状态的
    //state必须是函数：这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    //必须是箭头函数，这是为了TS更好的类型推导
   state:()=>{
   return{
      count:100,
      foo:'ber',
      arr:[1,2,3]
   }
   },
   //getters 类似于组件的computed，用来封装计算属性，有缓存功能
   //和vuex中的getters没有区别
   getters:{
      // 方式一：这里的state就是上面的state状态对象,使用参数可自动推到出返回值的类型
       count10(state){
       return state.count+20
       },

      //方式二：getters也可使用this
      //直接使用this，ts不会推导出返回值是什么类型，所以要手动标明返回值的类型
/*        count10():number{
          return this.count+20
       }, */


      // 方式三：传递参数，但不使用参数,直接用this，获取值也可，自动推出返回值类型(不推荐使用)
/*       count10(state){
         return this.count+20
      } */
   },
   //类似于组件的methods, 封装业务逻辑，修改state
   actions:{
      //注意不能使用箭头函数定义actions：因为箭头函数绑定外部this，会改变this指向
      //actions就是 通过this返回当前容器实例
      // 这里的actions里的事件接受参数
      // 这里的num:number为自定义参数,需要声明参数类型
      changeState(num:number){
         // this.count++;
         this.count+=num
         this.foo='hello!'
         this.arr.push(4)

         // 同理，actions里也可使用$patch
          this.$patch({})
          this.$patch(state=>{})


         //在此注意：patch和普通多次修改的区别在原理上的区别是
         // 1.涉及到数据响应式和视图更新，多次修改，修改几次视图就更新就更新几次
         // 2.patch 批量修改 视图只更新一次，更有利于性能优化
      }
   }
})
//使用容器中的state
//修改 state
//容器中的actions的使用

Selepas data ditulis, anda boleh menggunakannya dalam komponen

rreee

3 . Pasang vant3

<template>
  <h4>Pinia基本使用</h4>
  <p>{{mainStore.count}}</p>
  <p>{{mainStore.arr}}</p>
  {{mainStore.count10}}
  <hr />
  <p>解构mainStore后的渲染</p>
  <p>{{count}}</p>
  <p>{{foo}}</p>
  <hr />
  <p>
    <van-button type="success" @click="handleChangeState">修改数据</van-button>
  </p>
</template>
<script lang="ts" setup>
import { useMainStore } from "../../store/module/useCountStore";
import { storeToRefs } from "pinia";
const mainStore = useMainStore();
console.log(mainStore.count);
//可以直接解构mainStore,但是这样是有问题的，这样拿到的数据不是响应式的，是一次性的，之后count和foo的改变这里是不会变的
//Pinia其实就是把state数据都做了reactive处理了
//  const { count,foo}=mainStore

//解决不是响应式的办法 官方的一个api storeToRefs
// storeToRefs的原理是把结构出来的数据做ref响应式代理
const { count, foo } = storeToRefs(mainStore);

const handleChangeState = () => {
  // 数据的修改
  // 方式一：最简单的方式，直接调用修改
  mainStore.count++;

  //方式二:如果要修改多个数据，建议使用$patch 批量更新

  // 方式三:更好的批量更新的函数：$patch是一个函数,这个也是批量更新
  // 这里的state index.ts里的state
  mainStore.$patch((state) => {
    state.count++;
    state.foo = "hello!";
    state.arr.push(4);
  });

  //方式四：逻辑比较多的时候封装到actions中做处理
  mainStore.changeState(10);
};
</script>

Pasang pemalam

// 两种都可以
npm i vant
npm i vant@next -s

Pemalam ini boleh memperkenalkan komponen secara automatik atas permintaan

Konfigurasikan pemalam berdasarkan projek vite

Konfigurasikan dalam vite.config.ts

# 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

Perkenalkan komponen

Perkenalkan komponen vant dalam main.ts

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

4 >

kandungan konfigurasi penghala/index.ts adalah seperti berikut:

import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

item konfigurasi main.ts

npm install vue-router

App.vue

[Imej pautan luar pemindahan gagal. Tapak sumber mungkin mempunyai mekanisme anti-leeching. Adalah disyorkan untuk menyimpan imej dan memuat naiknya terus (img-TOITHQne-1658887594763 )(./src/assets/image/MDImg/router.png)]

5. Pasang axios

import { createRouter, createWebHistory,createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../view/Home.vue';
const routes: Array<RouteRecordRaw> = [
  {
    path: &#39;/&#39;,
    name: &#39;index&#39;,
    component: Home,
  },
]
const router = createRouter({
  history: createWebHashHistory(),
  
 // history: createWebHistory(),
  routes
})
export default router;

Pakej ini adalah untuk rujukan

Ini telah diubah suai dan kod di bawah akan digunakan

import App from './App.vue'
import router from './router/index'
app.use(router).mount('#app')

service.ts

npm install axios
pnpm install axios

Kemudian panggil

 import axios from 'axios'

// 创建axios
const service = axios.create({
  // baseURL: '/api',
  baseURL: 'http://xxx.xxx.xx.xxx/',
  timeout:80000
});

// 添加请求拦截器
service.interceptors.request.use(
  (config:any) => {
    let token:string =''//此处换成自己获取回来的token，通常存在在cookie或者store里面
    if (token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers['X-Token'] = token
   
      config.headers.Authorization =  + token       
     }
    return config
  },
  error => {
    // Do something with request error
    console.log("出错啦", error) // for debug
    Promise.reject(error)
  }
)

service.interceptors.response.use(
  (response:any) => {
   return response.data
 },    /*  */
 error => {
   console.log('err' + error) // for debug
   if(error.response.status == 403){
     // ElMessage.error('错了')
     console.log('错了');
     
   }else{
     // ElMessage.error('服务器请求错误，请稍后再试')
     console.log('服务器请求错误，请稍后再试');
   }
   return Promise.reject(error)
 }
)
export default service;

6 Skim penyesuaian

postcss-pxtorem plug-in

digunakan untuk menukar penyesuaian px kepada rem (bermaksud anda hanya perlu mengisi nilai px yang sepadan dan ia boleh dipaparkan secara automatik pada halaman Adaptasi, tidak perlu menukar rem secara manual.

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

Ramai netizen mendakwa untuk mencipta fail postcss.config.ts baharu Memandangkan kaedah penulisan ini sudah dibina ke dalam vite, anda hanya perlu menambahkannya ke fail vite.config.ts Hanya isikan konfigurasi yang sepadan dalam

pemalam amfe-fleksibel

Tetapkan nilai garis dasar

// 接口引入地址
import { getTest} from "../utils/api/service";

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

Dua pemalam ini diperlukan, item konfigurasi diberikan di bawah

npm install postcss-pxtorem

Rendering:

Atas ialah kandungan terperinci Bagaimana untuk mengkonfigurasi Vue3+TS+Vant3+Pinia. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!