So konfigurieren Sie Vue3+TS+Vant3+Pinia

Empfohlene IDE-Einstellungen

VS Code + Volar

Eingabeunterstützung. Vue in TS importiert

, da TypeScript keine Typinformationen verarbeiten kann. Vue-Importe werden standardmäßig mit generischen Vue-Komponententypen gefüllt. Wenn es Ihnen nur um den Requisitentyp der Vorlagenkomponente geht, ist dies in den meisten Fällen in Ordnung. Wenn Sie jedoch den tatsächlichen Requisitentyp erhalten möchten. Vue-Import können Sie den Übernahmemodus von Volar aktivieren, indem Sie die folgenden Schritte ausführen:

1. Führen Sie die Erweiterung aus: Zeigen Sie die integrierte Erweiterung aus der Befehlspalette von VS Code an, suchen Sie nach TypeScript- und JavaScript-Sprachfunktionen. Klicken Sie dann mit der rechten Maustaste auf Klicken und wählen Sie „Deaktivieren (Arbeitsbereich)“. Der Übernahmemodus wird automatisch aktiviert, wenn die standardmäßige TypeScript-Erweiterung deaktiviert ist.

2. Laden Sie das VS-Code-Fenster neu, indem Sie „Entwickler: Fenster neu laden“ aus der Befehlspalette ausführen.

Installieren Sie pnpm

#Leichtgewichtiges pnpm
Erklären Sie ein wenig
Das Prinzip von pnpm besteht darin, dass die entsprechende Kopie nicht gedankenlos gespeichert wird Bei Differenzdateien werden nur geänderte Dateien hinzugefügt, was gleichbedeutend damit ist, dass dieselben Teile dieser mehreren Projekte eine Version von Abhängigkeiten gemeinsam nutzen.

Auf diese Weise kann der Festplattenspeicher erheblich reduziert und die Installationsgeschwindigkeit beschleunigt werden. Um beispielsweise eine Abhängigkeit zu installieren, können Sie

npm install pnpm -g

verwenden Ich werde feststellen, dass es viel schneller als npm ist.

pnpm install

1. Vite installieren

Vite erstellen

yarn create vite

Abhängigkeiten installieren

npm i

Projekt starten

yarn dev

Wählen Sie die Version von Vue3+TS aus

Lokale Einführung von Pinia

npm add pinia@next

Sie können unten ein Anwendungsbeispiel sehen:

Sie können store/ unter dem entsprechenden src erstellen module/useCountStore.ts-Datei

Der spezifische Inhalt ist wie folgt:

useCountStore.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')

# 🎜🎜# Nachdem die Daten geschrieben wurden, können sie in der Komponente verwendet werden 🎜#Dieses Plug-in kann bei Bedarf automatisch eingeführt werden. Komponente

• Basierend auf dem Vite-Projektkonfigurations-Plugin
  Konfiguriert in vite.config.ts

import { defineStore } from 'pinia'

• Einführung der Komponente

  
  in vant-Komponente in main.ts einführen

  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的使用

4. Router4 installieren

<template>
  <h4 id="Pinia基本使用">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>

# 🎜🎜#

router/index.ts-Konfigurationsinhalt lautet wie folgt:

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

main.ts-Konfigurationselement

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

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

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

App.vue

[Extern Link-Bildübertragung fehlgeschlagen, die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern. Kommen Sie herunter und laden Sie es direkt hoch (img-TOITHQne-1658887594763)(./src/assets/image/MDImg/router.png) ]

5. Axios installieren

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()],
    }),
  ],
};

Dieses Paket kann als Referenz dienen

#🎜🎜 #Dies wurde geändert und der folgende Code hat Vorrang.

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

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

service.ts#🎜 # auf der Seite Wird zum Konvertieren von px in rem-Anpassung verwendet (was bedeutet, dass Sie nur den entsprechenden px-Wert eingeben müssen, und er kann automatisch auf der Seite angepasst werden, ohne dass rem manuell konvertiert werden muss. #🎜🎜 #

npm install vue-router

Viele Internetnutzer behaupten, eine neue postcss.config.ts-Datei zu erstellen. Da diese Schreibmethode bereits in Vite integriert ist, müssen Sie nur die entsprechende Konfiguration in der Datei vite.config.ts ausfüllen.

amfe-flexibles Plug-in

Grundwert festlegen

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;

Diese beiden Plug-ins sind unten aufgeführt.# 🎜🎜#

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

Rendering:

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie Vue3+TS+Vant3+Pinia. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!