vue3 创建H5项目（eslint+prettier+husky）

赵财进宝
647 阅读6分钟

一、安装 nodejs 环境

方法一：直接官网下载安装包进行安装

https://nodejs.org/en/download/package-manager

方式二：使用 nodejs 版本管理工具 nvm 下载安装 nodejs

注意：如果本机已经安装了 nodejs 版本，请先卸载再进行 nvm 安装

1、nvm 下载地址

https://github.com/coreybutler/nvm-windows/releases

2、使用 nvm 安装 nodejs

nvm install 20.10.0

如果总是安装失败，建议将下载镜像源指向淘宝（这步也很重要，否则在安装 node 的时候会出现卡死，npm 安装不成功的情况），打开 nvm 安装包下的 settings.txt 文件，在最后添加以下代码：

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

3、切换到指定版本的 nodejs

nvm use 20.10.0

还有一些常用命令

nvm ls                                                         查看已有的版本列表
nvm use 20.10.0                                                  切换nodejs版本
nvm i 20.10.0                                                    下载nodejs
nvm uninstall 20.10.0                                            卸载nodejs
npm i -g cnpm --registry=https://registry.npmmirror.com          安装cnpm淘宝镜像

4、安装pnpm

yarn或直接npm安装都可以，我习惯使用pnpm加载依赖

npm i -g pnpm

二、创建vue3项目

1、初始化项目

pnpm create vue

2、根据自己需求选择选项

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue-project
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
? 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) » 否 / 是

3、启动项目

cd vue-project
pnpm dev

三、eslint+prettier 实现代码自动格式化

由于初始化的时候已经选择过使用eslint、prettier，就不需重新安装，只需打开项目中.eslintrc.cjs文件，把下面的规则粘贴至末尾

注意，需要你的VScode安装的有Eslint插件

 rules: {
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'], // vue组件名称多单词组成 （忽略index.vue）
      },
    ],
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ], //vue组件标签自闭合
    'vue/no-setup-props-destructure': ['off'], //关闭props结构校验
    'no-undef': 0, //变量未定义
  },

同理，打开.prettierrc.cjs文件，把下面常用格式化替换默认

module.exports = {
  "$schema": "https://json.schemastore.org/prettierrc",
	
	"printWidth": 80,   //指定每行应该保持多少字符以内，超过后会进行换行。

	"tabWidth": 2,       //一个制表符等于的空格数。

	"semi": false,        // 结尾是否使用分号

	"singleQuote": true,   //  是否使用单引号而不是双引号。

	"bracketSameLine": false, //将多行HTML（HTML、JSX、Vue、Angular 元素放在最后一行的末尾，而不是单独放在下一行，不适用于自闭合元素

	"arrowParens": "always",  //在唯一箭头函数参数周围包含括号。
	
	"proseWrap": "preserve",   //什么都不做，保持散文原样。
	
	"htmlWhitespaceSensitivity": "css",   //HTML 空格敏感度

	"vueIndentScriptAndStyle": true,  //为 <script> 和 <style> 标签内的内容添加缩进，以匹配父元素的缩进级别。

	"endOfLine": "auto",   //线路结束规则

	"embeddedLanguageFormatting": "auto", //嵌入式语言格式

	"singleAttributePerLine": true   //是否强制在 HTML、Vue 和 JSX 中强制执行每行单个属性。 

}

注意，如果你的VScode安装的prettier插件，请禁用掉，否则会与项目中配置有冲突，配置中format on save功能也需要关闭

在Vscode设置中打开setting.json文件，配置保存自动修复

	"editor.codeActionsOnSave": {
            "source.fixAll": true
	},
   "editor.formatOnSave": false

三、husky 配置代码检查工作流

官网

https://typicode.github.io/husky/get-started.html

1、初始化git仓库

git init

2、安装husky配置

pnpm dlx husky-init && pnpm install

3、修改生成的.husky/pre-commit文件

删掉 npm test 加上 pnpm lint

是为了代码提交时会执行package.json文件中的lint命令eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore，进行全部代码的校验

4、优化: 修改为暂存区的eslint校验（不用全部代码校验）

（1）安装lint-staged包

pnpm add -D lint-staged

（2）在package.json文件中配置lint-staged命令

"scripts": {
    .....
    "lint-staged": "lint-staged"
  },
  ....
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }

（3）修改.husky/pre-commit文件

修改 pnpm lint 为 pnpm lint-staged

四、Vant4 按需引入

https://vant-ui.github.io/vant/#/zh-CN/

与element-plus相类似，按照官网教程一步步操作即可

pnpm add vant

按需引入组件样式

pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

修改配置文件vite.config.js

......
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver, VantImports } from '@vant/auto-import-resolver';

export default {
  plugins: [
   ......
    AutoImport({
      imports: [VantImports()],
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

五、Pinia代码结构优化

1、安装持久化插件

pnpm add -D pinia-plugin-persistedstate

2、统一导入，统一暴露

image.png

六、移动端REM适配

这里，我们要做移动的适配处理。

Vant 默认使用 px 作为样式单位，如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

1、postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位，而使用rem必须有一个参考的基准值，

2、lib-flexible 用于设置 rem 基准值(对html标签的字体大小进行动态设置)

安装lib-flexible：

pnpm add amfe-flexible

安装以后，在main.js文件中进行导入：

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

import App from './App.vue'
import router from './router'
import 'amfe-flexible' //导入，用于设置rem基准值

lib-flexible 工具的方案：把一行分为10分，每份的大小除以10。

当前我们演示的设备是iPhone 6/7/8,这些设备的宽度为375，所以除以10，就是37.5像素。所以切换到不同的设备，该值会发生变化。从而针对不同的设备实现了适配。

安装postcss-pxtorem 

通过该工具可以将px转为rem.

pnpm add postcss-pxtorem -D

下面进行配置：

在项目的根目录下面创建 postcss.config.cjs文件

将如下代码拷贝到该文件中

// PostCss配置文件
module.exports = {
    // 配置所需要的插件
  plugins: {
    //   配置使用postcss-pxtorem插件
    //作用把px转成rem
    "postcss-pxtorem": {
        //rootValue:根元素的值
      //我们这里使用的是lib-flexible的REM适配方案：它的原理是：把一行分为10份，每份就是10分之一，所以rootValue应该设置为你的设计稿宽度的十分之一
      //假如我们的设计稿是宽是750px，所以应该设置为75，大多数设计稿的原型都是以iphone6为原型，iphone6设备的宽度是750.
      //但是Vant建议设置为37.5，因为Vant是基于375写的。
      //所以这里的缺点就是使用咱们设计稿的尺寸都必须除以2（比较麻烦），如果我们这里直接指定75，那么使用vant样式的组件就会变的非常小
      //有没有更好的办法呢？
      // 我们想：如果是是Vant的样式，就按照37.5来转换，如果是我们自己的样式，就按照75来转换。
      // rootValue支持两种处理方式：一种是直接返回数字，另外就是函数，通过函数可以实现动态的处理。
      // postcss-pxtorem处理每个CSS文件的时候都会调用该方法，并且它会把处理的`css`文件的相关信息通过
      //参数传递给该函数。下面这里我们解构出来的就是文件路径的属性。看一下路径中是否包含vant,如果是就是处理vant的css，否则就是处理我们
      //自己的css
      rootValue({ file }) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      //   rootValue: 37.5,
      // 配置要转换的css属性
      // *:表示所有，如果只想转换height属性，可以采用如下的写法：propList:['height']，我们大多的情况就是转换所有
      propList: ["*"],
    },
  },
};

注意: postcss-pxtorem这个工具不能转换行内样式中的px

接下来就可以愉快的敲代码了~

avatar
文章
阅读
粉丝