vue3+TS+vite+piniavue3+TS+vite+pinia项目创建，包管理工具pnpm的使用，项目中可能出

pnpm的安装使用

本质上也是一个包管理工具，和npm以及yarn没有区别

优势

包安装速度更快
磁盘的空间利用率更高

安装

npm install pnpm -g

指令使用

npm命令

pnpm命令

npm install

pnpm install

npm i axios

pnpm add axios

npm run dev

pnpm dev

提示：pnpm 需要node版本在16.14以上安装使用，推荐使用nvm包管理器对node进行版本管理以及切换

项目准备

VScode插件推荐安装

Vue Language Features (Volar) vue3语法支持
TypeScript Vue Plugin (Volar) vue3中更好的ts提示
Eslint 代码风格校验
Git Graph 代码git提交记录提示

提示：建议项目中开启TS托管模式，以获得更好的类型提示

项目创建

执行创建命令

pnpm create vue

选择项目依赖内容

main.ts中./App引入报错

在根目录下找到env.d.ts或者vite-env.d.ts文件，在其中加入如下代码

// 解决找不到模块 "./APP.vue"或其相应的类型声明 问题
declare module '*.vue' {
    import type { DefineComponent } from 'vue'

    const vueComponent: DefineComponent<{}, {}, any>

    export default vueComponent
}

eslint 预制配置

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 格式化时使用单引号
        semi: false, // 格式化去除;
        printWidth: 80, // 行宽度80字符
        trailingComma: 'none', // 没有对象数组最后一个逗号
        endOfLine: 'auto' // 换行字符串自动
      }
    ],
    // vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] 
      }
    ],
    // 允许对 props 进行解构，我们会开启解构保持响应式的语法糖
    'vue/no-setup-props-destructure': ['off'],
    'no-undef': 'error'
  }

执行：

// 修复代码格式
pnpm format

vant组件库

vant Vue3文档

安装：

pnpm add vant

在main.ts中引入全局样式

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// 引入全局样式
import 'vant/lib/index.css'
import './styles/main.scss'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

在组件中按需引入

<script setup lang="ts">
import { Button as VanButton } from 'vant'
</script>

<template>
  <van-button>按钮</van-button>
</template>

<style scoped></style>

vant移动端适配

vant 进阶使用文档

安装：

pnpm add -D postcss-px-to-viewport

配置 postcss.config.cjs

// postcss.config.cjs
// 在 package,json 的 type: 'module'模式下，module.exports 方式需用 .cjs文件
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375
    }
  }
}

特别提示：在新建postcss配置文件前请先查看package.json中是否是 type: module' 模式，如果是创建配置文件需为postcss.config.cjs，不是创建配置文件为postcss.config.js

用户状态仓库（Pinia）

Vue3推荐使用的全局状态管理工具，具体使用请看官方文档，作为全局状态管理工具，Pinia依旧有Vue2中vuex存在的问题，即刷新页面丢失数据，所以需要其他工具帮助实现pinia仓库状态持久化

安装：

pnpm i pinia-plugin-persistedstate

在main.ts中引入

import persist from 'pinia-plugin-persistedstate'

const app = createApp(App)

app.use(createPinia().use(persist))

在store的ts文件中开启persist: true，实现pinia仓库状态持久化

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
  // other options...
}, {
  persist: true
})

本文仅作为个人在学习Vue3开发学习笔记，未经授权，不得转载。

创作不易，感谢关注！