Vue-使用ESlint规范&vant组件库

一.ESlint 代码规范

代码规范：一套写代码的约定规则。

JavaScript Standard Style 规范说明 standardjs.com/rules-zhcn.… 下面是这份规则中的一小部分： 字符串使用单引号 'abc' 无分号 const name = 'zs' 关键字后加空格 if (name = 'ls') { ... } 函数名后加空格 function name (arg) { ... } 坚持使用全等 === 摒弃 == ...

代码规范错误

目标：学会解决代码规范错误 两种解决方案： ① 手动修正 根据错误提示来一项一项手动修改纠正。 ② 自动修正 基于 vscode 插件 ESLint 高亮错误，并通过配置 自动 帮助我们修复错误。

二.项目调整初始化目录

删除 多余的文件 修改 路由配置 和 App.vue 新增 两个目录 api / utils ① api 接口模块：发送ajax请求的接口模块 ② utils 工具模块：自己封装的一些工具方法模块

三.vant 组件库

其他组件库:

Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。 一般会按照不同平台进行分类： ① PC端： element-ui (element-plus) ant-design-vue ② 移动端：vant-ui Mint UI (饿了么) Cube UI (滴滴)

vant 全部导入

官网：vant-ui 全部导入： ① 安装 vant-ui npm i vant@latest-v2 ② main.js 中注册

import Vant from 'vant'
import 'vant/lib/index.css'
// 把vant中所有的组件都导入了
Vue.use(Vant)

③ 使用测试

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

vant 按需导入

按需导入： ① 安装 vant-ui npm i vant@latest-v2 ② 安装插件 npm i babel-plugin-import -D ③ babel.config.js 中配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

④ main.js 按需导入注册

import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);

⑤ 测试使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

⑥ 提取到 vant-ui.js 中，main.js 导入

// 导入按需导入的配置文件 import '@/utils/vant-ui'

四.项目中的 vw 适配

基于 postcss 插件 实现项目 vw 适配

① 安装插件 npm i postcss-px-to-viewport -D

② 根目录新建 postcss.config.js 文件，填入配置

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // 标准屏宽度
      viewportWidth: 375
    }
  }
}

五.配置主题色(定制主题)

官网有完整步骤:

① babel.config.js 指定样式路径(引入样式) module.exports = { ...plugins: [['import', {... style: (name) => ${name}/style/less// 指定样式路径 }, 'vant']] ② vue.config.js 覆盖变量module.exports = defineConfig({ ... css: { loaderOptions: { less: { lessOptions: { modifyVars: {blue: '#FA6D1D' // 直接覆盖变量}}}}}})