中山工程建设信息网站,祁连县公司网站建设,淘宝联盟做网站,做个网站的费用1.pnpm介绍
npm和pnpm都是JavaScript的包管理工具#xff0c;用于自动化安装、配置、更新和卸载npm包依赖。
pnpm节省了大量的磁盘空间并提高了安装速度#xff1a;使用一个内容寻址的文件存储方式#xff0c;如果多个项目使用相同的包版本#xff0c;pnpm会存储单个副本…1.pnpm介绍
npm和pnpm都是JavaScript的包管理工具用于自动化安装、配置、更新和卸载npm包依赖。
pnpm节省了大量的磁盘空间并提高了安装速度使用一个内容寻址的文件存储方式如果多个项目使用相同的包版本pnpm会存储单个副本并在每个项目中创建硬链接。pnpm安全性高在安装包时采用了严格的依赖解析策略。默认情况下它不会扁平化依赖这意味着子依赖不会被提升到项目的顶层node_modules目录这减少了意外覆盖依赖的风险。pnpm兼容性不如npm
安装npm i pnpm -g
2.基础创建
2.1 创建项目
创建vue3项目pnpm create vuelatest
2.2 目录调整及介绍
./src├── assets 静态资源图片...├── components 通用组件├── router 路由│ └── index.ts├── api 接口服务API├── stores 状态仓库├── styles 样式│ └── main.scss├── types TS类型├── utils 工具函数├── views 页面├── main.ts 入口文件└──App.vue 根组件2.3 env.d.ts
可以看到main.ts 文件中引入文件报找不到错误调整env.d.ts配置
// 声明文件
// 用于引入 Vite 提供的类型声明使 TypeScript 了解 ImportMeta 和 ImportMetaEnv 的类型
/// reference typesvite/client /
declare module *.vue {import type { DefineComponent } from vueconst component: DefineComponent{}, {}, anyexport default component
}2.4 tsconfig.json
vite默认只会校验不会解析ts文件所以需要安装typescript和vue-tsc用于辅助解析项目初始化时已经安装好了配置tsconfig.json文件
{compilerOptions: {target: ESNext, // 目标转化的语法useDefineForClassFields: true,module: ESNext, // 转化的格式moduleResolution: Node, //解析规则strict: true, //严格模式sourceMap: true, // 启动sourceMap调试jsx: preserve, // 不允许ts编译jsx语法resolveJsonModule: true,isolatedModules: true,esModuleInterop: true, //es6和commonjs转化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-pluginlatest typescript-eslint/parserlatest -D
2.5.2 配置.eslintrc.cjs文件
module.exports {env: { //环境 针对环境的语法browser: true,es2021: true,node: true},// 集成了哪些规则 别人写好的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],// 自定义的规则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,{//强制箭头函数前后都使用空格before: true,after: true}],prettier/prettier: off,typescript-eslint/no-explicit-any: [off], // 关闭不能定义any类型的校验no-irregular-whitespace: 2, // 不能有不规则的空格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 校验命令
可以通过执行npm run lint 去校验指定后缀规则的文件整体修复文件中的代码问题
2.6 prettier配置
2.6.1 创建.eslintrc.cjs
module.exports {printWidth: 200, //一行内容的宽度默认80singleQuote: 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执行命令prepare: husky install修改文件 做提交前代码校验 npx husky add .husky/pre-commit pmpm lint
2.8 commitlint
用于提交commit信息规范
安装pnpm add commitlint/config-conventional commitlint/cli -D执行npx husky add .husky/commit-msg修改生成文件内容:
#!/usr/bin/env sh
. $(dirname -- $0)/_/husky.shnpx --no-install commitlint --edit $1创建.commitlintrc.cjs文件
module.exports{extends:[commitlint/config-conventional],rules:{}}3.Vant
官网
安装pnpm add vant插件 在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时可以使用 unplugin-vue-components 插件它可以自动引入组件。 Vant 官方基于 unplugin-vue-components 提供了自动导入样式的解析器 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 中有个别组件是以函数的形式提供的包括 Toast、Dialog、Notify 、ImagePreview 组件。在使用函数组件时unplugin-vue-components 无法解析自动注册组件导致 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: {// 设备宽度375计算vw的值viewportWidth: 375,},},
};5.unplugin-auto-import 自动引入
实现依赖的自动导入不用再频繁导入依赖包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 }})],...})问题 此时文件中的依赖已经被引入但是会有错误提示 通过配置会自动生成两个文件.eslintrc-auto-import.json和auto-imports.d.ts 在.eslintrc.cjs和tsconfig.json分别引入可以解决。
