Vue3+TS+Vant3+Piniaの設定方法

推奨される IDE 設定

VS Code Volar

タイピングのサポート。 TypeScript は型情報を処理できないため、TS の Vue は

をインポートします。 vue インポートでは、デフォルトで汎用の vue コンポーネント タイプが設定されます。テンプレート コンポーネントの prop タイプのみを考慮する場合は、ほとんどの場合これで問題ありません。ただし、実際のプロップタイプを取得したい場合は。 vue import では、次の手順に従って Volar のテイクオーバー モードを有効にできます:

1. 拡張機能を実行します: VS Code のコマンド パレットから組み込み拡張機能を表示し、TypeScript および JavaScript 言語機能を探して、右に進みます。をクリックして「無効 (ワークスペース)」を選択します。デフォルトの TypeScript 拡張機能が無効になっている場合、テイクオーバー モードは自動的に有効になります。

2. コマンド パレットから Developer:Reload window を実行して、VS Code ウィンドウをリロードします。

pnpm のインストール

#軽量 pnpm
少し説明
pnpm の原理は、対応するコピーを確実に保存するのではなく、ファイルに差分を保存するということです。変更されたファイルを追加します。これは、1 つのバージョンの依存関係を共有する複数のプロジェクトの同じ部分に相当します。

この場合、ハードディスク容量が大幅に削減され、インストール速度が向上します。

端的に言えば、npm よりもはるかに高速にロードされます。
たとえば、依存関係をインストールする場合、

npm install pnpm -g

を使用するだけで、npm よりもはるかに高速であることがわかります。

pnpm install

1. vite をインストールします

vite をビルドします

yarn create vite

依存関係をインストールします

npm i

プロジェクトを開始します

yarn dev

Vue3 のバージョンを選択しますTS Can

2. pinia をインストールする

npm add pinia@next

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

Pinia をローカルに導入する

import { defineStore } from 'pinia'

使用例:

• 対応する src

• の下に、store/module/useCountStore.ts ファイルを作成できます。具体的な内容は次のとおりです。次のように:
  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的使用

データが書き込まれた後、それをコンポーネントで使用できます

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

3.vant3

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

をインストールします

プラグインをインストールします

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

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

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

このプラグインはオンデマンドでコンポーネントを自動的に導入できます

vite プロジェクトに基づいてプラグインを構成します

vite で構成します.config.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()],
    }),
  ],
};

コンポーネントの導入

vant コンポーネントを main に導入します。ts

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

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

4. router4

npm install vue-router

をインストールします

router/index.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;

main.tsの設定項目

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

App.vue
[外部リンク画像の転送に失敗しました。ソースサイト画像を保存して直接アップロードすることをお勧めします (img-TOITHQne-1658887594763) (./src/assets/image/MDImg/router.png)]

5. axios をインストールします

npm install axios
pnpm install axios

このパッケージは参照用です

これは変更されており、以下のコードの対象となります

 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;

service.ts

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

を呼び出し、ページ #6 で

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

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

## を呼び出します。適応スキーム

postcss-pxtorem プラグイン

px を rem 適応に変換するために使用されます (つまり、対応する px 値を入力するだけでよく、設定ページで自動的に適応できます。手動で rem を変換する必要はありません。

npm install postcss-pxtorem

Manyネットユーザーは、新しい postcss.config.ts ファイルを作成すると主張しています。この書き込み方法はすでに vite に組み込まれているため、vite.config.ts ファイルに追加するだけで済みます。対応する設定を記入するだけです。 amfe-flexible プラグイン

ベースライン値を設定します

npm i -S amfe-flexible

これら 2 つのプラグインが必要です。設定項目は以下のとおりです

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

レンダリング:

以上がVue3+TS+Vant3+Piniaの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。