Vue3+TS+Vant3+피니아 구성 방법

권장 IDE 설정

VS Code + Volar

입력 지원. TS의 Vue는 TypeScript가 유형 정보를 처리할 수 없기 때문에

를 가져옵니다. vue 가져오기는 기본적으로 일반 vue 구성 요소 유형으로 채워집니다. 템플릿 구성 요소의 prop 유형에만 관심이 있다면 대부분의 경우 괜찮습니다. 그러나 실제 소품 유형을 얻으려는 경우. vue import를 사용하려면 다음 단계에 따라 Volar의 인계 모드를 활성화할 수 있습니다.

1. 확장 실행: VS Code의 명령 팔레트에서 내장 확장을 표시하고 TypeScript 및 JavaScript 언어 기능을 찾은 다음 마우스 오른쪽 버튼을 클릭하고 비활성화(작동)를 선택합니다. 구역). 기본 TypeScript 확장이 비활성화되면 인계 모드가 자동으로 활성화됩니다.

2. 명령 팔레트에서 Developer:Reload window를 실행하여 VS Code 창을 다시 로드합니다.

pnpm 설치

#경량 pnpm
좀 설명해주세요
pnpm의 원리는 해당 복사본을 완벽하게 저장하지 않고 차이점 파일을 비교하면 변경된 파일만 늘어나게 된다는 것입니다. 이러한 여러 프로젝트의 동일한 부분은 모두 종속성 버전을 공유합니다.

이 경우 하드 디스크 공간이 크게 줄어들고 설치 속도가 빨라집니다. 직설적으로 말하면 npm보다 훨씬 빠르게 로드됩니다. 예를 들어 종속성을 설치하면 사용할 수 있습니다.

npm install pnpm -g

npm보다 훨씬 빠르다는 것을 알게 될 것입니다.

pnpm install

1. vite 설치

vite 빌드

yarn create vite

종속성 설치

npm i

프로젝트 시작

yarn dev

Vue3+TS 버전 선택

2 pinia 설치

npm add pinia@next

Mount Pinia

main.ts

rrre 에

Pinia

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

를 부분적으로 소개합니다

아래에서 사용 예를 볼 수 있습니다.

해당 src

• 아래에 store/module/useCountStore.ts 파일을 생성할 수 있습니다.구체적인 내용은 다음과 같습니다.

  useCountStore.ts

• import { defineStore } from 'pinia'

  데이터가 작성된 후 구성 요소에서 사용할 수 있습니다
  

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

  3. vant3 설치

<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>

플러그인 설치

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

이 플러그인은 요청 시 자동으로 구성 요소를 도입할 수 있습니다

플러그 구성 -in vite.config.ts 구성

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

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

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

구성 요소 소개

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에 vant 구성 요소를 소개합니다. router4

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

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

router/index.ts 구성 콘텐츠를 설치합니다.

npm install vue-router

main.ts 구성 항목

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;

App .vue[외부 링크 이미지 전송에 실패했습니다. 소스 사이트에 리칭 방지 메커니즘이 있을 수 있습니다. 이미지를 저장하고 직접 업로드하는 것이 좋습니다. img-TOITHQne-1658887594763)(./src/assets/image/MDImg/router.png)]

5. axios 설치

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

이 패키지는 참고용입니다

이 내용은 수정되었으며 아래 코드는 다음과 같습니다. 6. 적응 체계

postcss-pxtorem 플러그인

은 px를 rem 적응으로 변환하는 데 사용됩니다.

npm install axios
pnpm install axios

이 쓰기 방법이 이미 vite에 내장되어 있기 때문에 많은 네티즌들이 새로운 postcss.config.ts 파일을 생성한다고 주장합니다. vite.config.ts 파일에 해당 구성만 작성하면 됩니다.

amfe-flexible 플러그인

기준값 설정

 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;

이 두 플러그인이 필요합니다. 구성 항목

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

렌더링이 필요합니다. 아래에 나와 있습니다:

위 내용은 Vue3+TS+Vant3+피니아 구성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!