vue3+ts+pinia+vant项目搭建详细步骤

奔跑的小猪仔

1.pnpm介绍

1. npm

复制代码

和

1. pnpm

复制代码

都是

1. JavaScript

复制代码

的包管理工具，用于自动化安装、配置、更新和卸载

1. npm

复制代码

包依赖。

• 1. pnpm

  复制代码
  节省了大量的磁盘空间并提高了安装速度：使用一个内容寻址的文件存储方式，如果多个项目使用相同的包版本，pnpm会存储单个副本，并在每个项目中创建硬链接。
  
• 1. pnpm

  复制代码
  安全性高：在安装包时采用了严格的依赖解析策略。默认情况下，它不会扁平化依赖，这意味着子依赖不会被提升到项目的顶层
  1. node_modules

  复制代码
  目录，这减少了意外覆盖依赖的风险。
  
• 1. pnpm

  复制代码
  兼容性不如
  1. npm

  复制代码

安装：

1. npm i pnpm -g

复制代码

2.基础创建


2.1 创建项目

创建

1. vue3

复制代码

项目：

1. pnpm create vue@latest

复制代码

2.2 目录调整及介绍

1. ./src
   
2.     ├── assets        `静态资源，图片...`
   
3.     ├── components    `通用组件`
   
4.     ├── router        `路由`
   
5.     │   └── index.ts
   
6.     ├── api      `接口服务API`
   
7.     ├── stores        `状态仓库`
   
8.     ├── styles        `样式`
   
9.     │   └── main.scss
   
10.     ├── types         `TS类型`
    
11.     ├── utils         `工具函数`
    
12.     ├── views         `页面`
    
13.     ├── main.ts       `入口文件`
    
14.     └──App.vue       `根组件`

复制代码

2.3 env.d.ts

可以看到

1. main.ts

复制代码

文件中引入文件报找不到错误，调整

1. env.d.ts

复制代码

配置

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

复制代码

2.4 tsconfig.json

1. vite

复制代码

默认只会校验不会解析ts文件，所以需要安装

1. typescript

复制代码

和

1. vue-tsc

复制代码

用于辅助解析，项目初始化时已经安装好了，配置

1. tsconfig.json

复制代码

文件

1. {
   
2.   "compilerOptions": {
   
3.     "target": "ESNext", // 目标转化的语法
   
4.     "useDefineForClassFields": true,
   
5.     "module": "ESNext", // 转化的格式
   
6.     "moduleResolution": "Node", //解析规则
   
7.     "strict": true, //严格模式
   
8.     "sourceMap": true, // 启动sourceMap调试
   
9.     "jsx": "preserve", // 不允许ts编译jsx语法
   
10.     "resolveJsonModule": true,
    
11.     "isolatedModules": true,
    
12.     "esModuleInterop": true, //es6和commonjs转化
    
13.     "lib": [
    
14.       "ESNext",
    
15.       "DOM"
    
16.     ],
    
17.     "skipLibCheck": true,
    
18.     "noEmit": true,
    
19.     "baseUrl": ".",
    
20.     "paths": {
    
21.       "@/*": [
    
22.         "src/*"
    
23.       ],
    
24.       "components": [
    
25.         "src/components/*"
    
26.       ],
    
27.       "_pinia/*": [
    
28.         "src/pinia/*"
    
29.       ]
    
30.     },
    
31.   },
    
32.   "include": [
    
33.     "src/**/*.ts",
    
34.     "src/**/*.d.ts",
    
35.     "src/**/*.tsx",
    
36.     "src/**/*.vue",
    
37.     "types"
    
38.   ],
    
39. }

复制代码

2.5 eslint配置


2.5.1 安装额外依赖

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

复制代码

2.5.2 配置.eslintrc.cjs文件

1. module.exports = {
   
2.   env: { //环境 针对环境的语法
   
3.     browser: true,
   
4.     es2021: true,
   
5.     node: true
   
6.   },
   
7.   // 集成了哪些规则 别人写好的
   
8.   extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended'],
   
9.   overrides: [],
   
10.   // 'parser': '@typescript-eslint/parser',
    
11.   // 可以解析.vue 文件
    
12.   parser: 'vue-eslint-parser',
    
13.   parserOptions: {
    
14.     ecmaVersion: 'latest',
    
15.     sourceType: 'module',
    
16.     parser: '@typescript-eslint/parser' // 解析ts文件
    
17.   },
    
18.   plugins: ['vue', '@typescript-eslint', 'prettier'],
    
19.   // 自定义的规则
    
20.   rules: {
    
21.     'vue/multi-word-component-names': 'off',
    
22.     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    
23.     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    
24.     'arrow-spacing': [
    
25.       2,
    
26.       {
    
27.         //强制箭头函数前后都使用空格
    
28.         before: true,
    
29.         after: true
    
30.       }
    
31.     ],
    
32.     'prettier/prettier': 'off',
    
33.     "@typescript-eslint/no-explicit-any": ["off"], // 关闭不能定义any类型的校验
    
34.     'no-irregular-whitespace': 2, // 不能有不规则的空格
    
35.     'comma-dangle': [2, 'never'] // 对象字面量项尾不能有逗号
    
36.   }
    
37. }

复制代码

2.5.3 配置.eslintignore文件

1. .DS_Store
   
2. node_modules
   
3. /dist
   
4. 
   
5. 
   
6. # local env files
   
7. .env.local
   
8. .env.*.local
   
9. 
   
10. # Log files
    
11. npm-debug.log*
    
12. yarn-debug.log*
    
13. yarn-error.log*
    
14. pnpm-debug.log*
    
15. 
    
16. # Editor directories and files
    
17. .idea
    
18. .vscode
    
19. *.suo
    
20. *.ntvs*
    
21. *.njsproj
    
22. *.sln
    
23. *.sw?

复制代码

2.5.4 校验命令

可以通过执行

1. npm run lint

复制代码

去校验指定后缀规则的文件，整体修复文件中的代码问题

2.6 prettier配置


2.6.1 创建.eslintrc.cjs

1. module.exports = {
   
2.   printWidth: 200, //一行内容的宽度，默认80
   
3.   singleQuote: true, //使用双引号
   
4.   semi: false, // 末尾添加分号
   
5.   tabWidth: 2,
   
6.   trailingComma: 'none',
   
7.   useTabs: false,
   
8.   endOfLine: 'auto'
   
9. }

复制代码

2.6.2 取消勾选

2.6.3 勾选保存

2.7 配置代码检查工作流-husky

提交代码前做代码检查 ，使用husky这个git hooks工具

• 安装：
  1. pnpm install husky -D

  复制代码
• 配置
  1. package.json

  复制代码
  执行命令：
  1. "prepare": "husky install"

  复制代码
• 修改文件 做提交前代码校验
  1. npx husky add .husky/pre-commit "pmpm lint"

  复制代码
  
  

2.8 commitlint

用于提交

1. commit

复制代码

信息规范

• 安装：
  1. pnpm add @commitlint/config-conventional @commitlint/cli -D

  复制代码
• 执行：
  1. npx husky add .husky/commit-msg

  复制代码
• 修改生成文件内容:
  

1. #!/usr/bin/env sh
   
2. . "$(dirname -- "$0")/_/husky.sh"
   
3. 
   
4. npx --no-install commitlint --edit $1

复制代码

• 创建
  1. .commitlintrc.cjs

  复制代码
  文件
  

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

复制代码

3.Vant

官网

• 安装：
  1. pnpm add vant

  复制代码
• 插件
  在基于
  1. vite

  复制代码
  、
  1. webpack

  复制代码
  或
  1. vue-cli

  复制代码
  的项目中使用
  1. Vant

  复制代码
  时，可以使用
  1. unplugin-vue-components

  复制代码
  插件，它可以自动引入组件。
  1. Vant

  复制代码
  官方基于
  1. unplugin-vue-components

  复制代码
  提供了自动导入样式的解析器
  1. @vant/auto-import-resolver

  复制代码
  ，两者可以配合使用。
  1. pnpm add @vant/auto-import-resolver unplugin-vue-components -D

  复制代码
• 使用
  

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

复制代码

• 个别组件
  1. Vant

  复制代码
  中有个别组件是以函数的形式提供的，包括
  1. Toast、Dialog、Notify 、ImagePreview

  复制代码
  组件。在使用函数组件时，
  1. unplugin-vue-components

  复制代码
  无法解析自动注册组件，导致
  1. @vant/auto-import-resolver

  复制代码
  无法解析样式，因此需要手动引入样式。
  

1. // Toast
   
2. import { showToast } from 'vant';
   
3. import 'vant/es/toast/style';
   
4. 
   
5. // Dialog
   
6. import { showDialog } from 'vant';
   
7. import 'vant/es/dialog/style';
   
8. 
   
9. // Notify
   
10. import { showNotify } from 'vant';
    
11. import 'vant/es/notify/style';
    
12. 
    
13. // ImagePreview
    
14. import { showImagePreview } from 'vant';
    
15. import 'vant/es/image-preview/style';

复制代码

4.移动端适配

安装：

1. pnpm add -D postcss-px-to-viewport

复制代码

配置：

1. postcss.config.js

复制代码

1. // eslint-disable-next-line no-undef
   
2. module.exports = {
   
3.   plugins: {
   
4.     'postcss-px-to-viewport': {
   
5.       // 设备宽度375计算vw的值
   
6.       viewportWidth: 375,
   
7.     },
   
8.   },
   
9. };

复制代码

5.unplugin-auto-import 自动引入

实现依赖的自动导入，不用再频繁导入依赖包，

1. unplugin-auto-import

复制代码

是基于

1. unplugin

复制代码

写的，支持

1. Vite、Webpack、Rollup、esbuild

复制代码

多个打包工具。
比如代码中：

1. import { computed, ref } from 'vue'

复制代码

• 安装
  1. pnpm install -D unplugin-auto-import

  复制代码
• 配置
  

1. // vite.config.js
   
2. import AutoImport from 'unplugin-auto-import/vite'
   
3. export default defineConfig({
   
4.   plugins: [
   
5.     vue(),
   
6.     AutoImport({
   
7.       imports: ['vue', 'vue-router']
   
8.       // eslintrc: { enabled: true }
   
9.     })
   
10.   ],
    
11.   ...
    
12.   })

复制代码

• 问题
  此时文件中的依赖已经被引入，但是会有错误提示
  通过配置会自动生成两个文件
  1. .eslintrc-auto-import.json

  复制代码
  和
  1. auto-imports.d.ts

  复制代码
  在
  1. .eslintrc.cjs

  复制代码
  和
  1. tsconfig.json

  复制代码
  分别引入，可以解决。
  
  
  
  

总结

到此这篇关于vue3+ts+pinia+vant项目搭建的文章就介绍到这了,更多相关vue3+ts+pinia+vant项目搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/326813m6e.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！