vue3+ts+pinia+vant項目搭建詳細(xì)步驟

更新時間：2024年09月02日 10:08:13 作者：橙蚊鏡0819

最近公司想重構(gòu)一個項目,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue3+ts+pinia+vant項目搭建的詳細(xì)步驟,文中通過圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.pnpm介紹

npm和pnpm都是JavaScript的包管理工具，用于自動化安裝、配置、更新和卸載npm包依賴。

pnpm節(jié)省了大量的磁盤空間并提高了安裝速度：使用一個內(nèi)容尋址的文件存儲方式，如果多個項目使用相同的包版本，pnpm會存儲單個副本，并在每個項目中創(chuàng)建硬鏈接。
pnpm安全性高：在安裝包時采用了嚴(yán)格的依賴解析策略。默認(rèn)情況下，它不會扁平化依賴，這意味著子依賴不會被提升到項目的頂層node_modules目錄，這減少了意外覆蓋依賴的風(fēng)險。
pnpm兼容性不如npm

安裝：npm i pnpm -g

2.基礎(chǔ)創(chuàng)建

2.1 創(chuàng)建項目

創(chuàng)建vue3項目：pnpm create vue@latest

2.2 目錄調(diào)整及介紹

./src
    ├── assets        `靜態(tài)資源，圖片...`
    ├── components    `通用組件`
    ├── router        `路由`
    │   └── index.ts
    ├── api      `接口服務(wù)API`
    ├── stores        `狀態(tài)倉庫`
    ├── styles        `樣式`
    │   └── main.scss
    ├── types         `TS類型`
    ├── utils         `工具函數(shù)`
    ├── views         `頁面`
    ├── main.ts       `入口文件`
    └──App.vue       `根組件`

2.3 env.d.ts

可以看到main.ts 文件中引入文件報找不到錯誤，調(diào)整env.d.ts配置

// 聲明文件
// 用于引入 Vite 提供的類型聲明，使 TypeScript 了解 ImportMeta 和 ImportMetaEnv 的類型
/// <reference types="vite/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

2.4 tsconfig.json

vite默認(rèn)只會校驗不會解析ts文件，所以需要安裝typescript和vue-tsc用于輔助解析，項目初始化時已經(jīng)安裝好了，配置tsconfig.json文件

{
  "compilerOptions": {
    "target": "ESNext", // 目標(biāo)轉(zhuǎn)化的語法
    "useDefineForClassFields": true,
    "module": "ESNext", // 轉(zhuǎn)化的格式
    "moduleResolution": "Node", //解析規(guī)則
    "strict": true, //嚴(yán)格模式
    "sourceMap": true, // 啟動sourceMap調(diào)試
    "jsx": "preserve", // 不允許ts編譯jsx語法
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true, //es6和commonjs轉(zhuǎn)化
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ],
      "components": [
        "src/components/*"
      ],
      "_pinia/*": [
        "src/pinia/*"
      ]
    },
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types"
  ],
}

2.5 eslint配置

2.5.1 安裝額外依賴

pnpm install @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D

2.5.2 配置.eslintrc.cjs文件

module.exports = {
  env: { //環(huán)境 針對環(huán)境的語法
    browser: true,
    es2021: true,
    node: true
  },
  // 集成了哪些規(guī)則 別人寫好的
  extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended'],
  overrides: [],
  // 'parser': '@typescript-eslint/parser',
  // 可以解析.vue 文件
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser' // 解析ts文件
  },
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  // 自定義的規(guī)則
  rules: {
    'vue/multi-word-component-names': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'arrow-spacing': [
      2,
      {
        //強制箭頭函數(shù)前后都使用空格
        before: true,
        after: true
      }
    ],
    'prettier/prettier': 'off',
    "@typescript-eslint/no-explicit-any": ["off"], // 關(guān)閉不能定義any類型的校驗
    'no-irregular-whitespace': 2, // 不能有不規(guī)則的空格
    'comma-dangle': [2, 'never'] // 對象字面量項尾不能有逗號
  }
}

2.5.3 配置.eslintignore文件

.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

2.5.4 校驗命令

可以通過執(zhí)行npm run lint 去校驗指定后綴規(guī)則的文件，整體修復(fù)文件中的代碼問題

2.6 prettier配置

2.6.1 創(chuàng)建.eslintrc.cjs

module.exports = {
  printWidth: 200, //一行內(nèi)容的寬度，默認(rèn)80
  singleQuote: true, //使用雙引號
  semi: false, // 末尾添加分號
  tabWidth: 2,
  trailingComma: 'none',
  useTabs: false,
  endOfLine: 'auto'
}

2.6.2 取消勾選

2.6.3 勾選保存

2.7 配置代碼檢查工作流-husky

提交代碼前做代碼檢查，使用husky這個git hooks工具

安裝：pnpm install husky -D
配置package.json執(zhí)行命令："prepare": "husky install"
修改文件做提交前代碼校驗
npx husky add .husky/pre-commit "pmpm lint"

2.8 commitlint

用于提交commit信息規(guī)范

安裝：pnpm add @commitlint/config-conventional @commitlint/cli -D
執(zhí)行：npx husky add .husky/commit-msg
修改生成文件內(nèi)容:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

創(chuàng)建.commitlintrc.cjs文件

module.exports={extends:['@commitlint/config-conventional'],rules:{}}

3.Vant

官網(wǎng)

安裝：pnpm add vant
插件
在基于 vite、webpack 或 vue-cli 的項目中使用 Vant 時，可以使用 unplugin-vue-components 插件，它可以自動引入組件。
Vant 官方基于 unplugin-vue-components 提供了自動導(dǎo)入樣式的解析器 @vant/auto-import-resolver，兩者可以配合使用。
pnpm add @vant/auto-import-resolver unplugin-vue-components -D
使用

import 'vant/lib/index.css'
import vant from 'vant'
app.use(vant)

個別組件
Vant 中有個別組件是以函數(shù)的形式提供的，包括 Toast、Dialog、Notify 、ImagePreview 組件。在使用函數(shù)組件時，unplugin-vue-components 無法解析自動注冊組件，導(dǎo)致 @vant/auto-import-resolver 無法解析樣式，因此需要手動引入樣式。

// Toast
import { showToast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';

4.移動端適配

安裝：pnpm add -D postcss-px-to-viewport配置： postcss.config.js

// eslint-disable-next-line no-undef
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // 設(shè)備寬度375計算vw的值
      viewportWidth: 375,
    },
  },
};

5.unplugin-auto-import 自動引入

實現(xiàn)依賴的自動導(dǎo)入，不用再頻繁導(dǎo)入依賴包，unplugin-auto-import 是基于 unplugin 寫的，支持 Vite、Webpack、Rollup、esbuild 多個打包工具。
比如代碼中：import { computed, ref } from 'vue'

安裝 pnpm install -D unplugin-auto-import
配置

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router']
      // eslintrc: { enabled: true }
    })
  ],
  ...
  })