Vue3+TS+Vant3+Pinia(H5端)設定教學詳解

2023-01-26 18:00:39

該模板將幫助您開始使用Vue 3、Vite3.0中的TypeScript以及Pinia、Vant3進行開發。該模板使用Vue3，請檢視檔案瞭解更多教學。

鍵入支援。TS中的vue匯入

因為TypeScript無法處理的型別資訊。vue匯入，預設情況下，它們填充為通用vue元件型別。在大多數情況下，如果您不真正關心模板之外的元件道具型別，那麼這很好。然而，如果你想得到實際的道具型別。vue匯入，您可以通過以下步驟啟用Volar的接管模式：

1.執行擴充套件：從VS程式碼的命令調色盤中顯示內建擴充套件，查詢TypeScript和JavaScript語言功能，然後右鍵單擊並選擇禁用（工作區）。預設情況下，如果禁用預設的TypeScript擴充套件，則接管模式將自動啟用。

2.通過從命令調色盤執行Developer:Reload window重新載入VS程式碼視窗。

安裝pnpm

如果想一步一步安裝可以參考以下檔案，都有詳細的解釋
#輕量級pnpm
稍微解釋一下
pnpm的原理在於不會傻瓜式的無腦儲存相應的副本，而是進行差異檔案的比對，只會增加變化了的檔案，相當於這些多個專案相同的部分都共用了一個版本的依賴。

這樣的話，硬碟空間可以得到大量的縮減，同時加快了安裝速度。看個圖

說白了就是會比npm載入速度快很多
比如說安裝一個依賴，就可以使用

npm install pnpm -g

你會發現比npm快的多的多。

pnpm install

一、安裝vite

搭建vite

yarn create vite

安裝依賴

npm i

啟動專案

yarn dev

選擇Vue3+TS的版本即可

二、安裝pinia

npm add pinia@next

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

寫完後就可以使用了，具體使用教學可以參考官方檔案Pinia官網

三、安裝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()],
    }),
  ],
};

引入元件

在mian.ts中引入vant元件

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

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

四、安裝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: '/',
    name: 'index',
    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)]

五、安裝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
    })
  }

之後在頁面中呼叫

// 介面引入地址
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

網上有很多人說這個需要新建什麼postcss.config.ts檔案。在vite中是自帶了這種寫法，所以只需要直接在vite.config.ts中填寫相關設定就可以了。

amfe-flexible外掛

設定基準值

npm i -S amfe-flexible

這兩個外掛是必備的，下面給出設定項

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: ['*'],
        })
      ]
    }
  }
})

效果圖：