移动端面经小项目（1）-基础前置配置-ESlint，vant组件库，移动端的vw适配，封装axios，封装localstorage

主要是对于vue自定义初始化项目，ESlint，vant组件库，移动端的vw适配，封装axios，以及封装localstorage的学习，主要是建立该项目所需要的前置配置。

接口文档地址：https://www.apifox.cn/apidoc/project-934563/api-20384515

项目创建目录初始化

vue-cli 建项目

安装脚手架 (已安装)

npm i @vue/cli -g

创建项目

vue create hm-vant-h5

• 选项

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features      选自定义

• 手动选择功能

• 选择vue的版本

  3.x
> 2.x

• 是否使用history模式

• 选择css预处理

• 选择eslint的风格 （eslint 代码规范的检验工具，检验代码是否符合规范）

• 比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子

• 选择校验的时机 （直接回车）

• 选择配置文件的生成方式 （直接回车）

• 是否保存预设，下次直接使用？ => 不保存，输入 N

• 等待安装，项目初始化完成

• 启动项目

npm run serve

ESlint代码规范

代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加;？...

没有规矩不成方圆

ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则。

JavaScript Standard Style 规范说明

建议把：https://standardjs.com/rules-zhcn.html 看一遍，然后在写的时候, 遇到错误就查询解决。

下面是这份规则中的一小部分：

• 字符串使用单引号 – 需要转义的地方除外

• 无分号 –

• 关键字后加空格 if (condition) { ... }

• 函数名后加空格 function name (arg) { ... }

• 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null

• ......

代码规范错误

如果你的代码不符合standard的要求，eslint会提示你。

下面我们在main.js中随意做一些改动：添加一些空行，空格。

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false

new Vue ( {
  render: h => h(App),
  router
}).$mount('#app')

按下保存代码之后：

你将会看在控制台中输出如下错误：

eslint 是来帮助你的。心态要好，有错，就改。

手动修正

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码（func-call-spacing, space-in-parens,.....）去 ESLint 规则列表中查找其具体含义。

打开 ESLint 规则表，使用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。

通过vscode中的eslint插件来实现自动修正

eslint会自动高亮错误显示
通过配置，eslint会自动帮助我们修复错误

• 如何安装

• 如何配置

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

• 注意：==eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目==

• 注意：==使用了eslint校验之后，把vscode带的那些格式化工具全禁用了 Beatify ==

调整初始化目录结构

为了更好的实现后面的操作，我们把整体的目录结构做一些调整。

目标:

1. 删除初始化的一些默认文件

2. 修改没删除的文件

3. 新增我们需要的目录结构

修改文件

public/index.html 修改视口，开发的是移动端项目

<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0, user-scalable=0"
/>

main.js 不需要修改

router/index.js

删除默认的路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

删除文件

• src/views/AboutView.vue

• src/views/HomeView.vue

• src/components/HelloWorld.vue

• src/assets/logo.png

新增目录

• src/api 目录

• 存储接口模块 (发送ajax请求接口的模块)

• src/utils 目录

• 存储一些工具模块 (自己封装的方法)

• src/assets目录

• 新增项目使用的素材

目录效果如下:

vant 按需加载

vant-ui组件库的引入

组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

组件库并不是唯一的

pc: element-ui iview ant-design

移动：vant-ui

全部导入

• 安装vant-ui

npm i vant@latest-v2  或  yarn add 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-ui提供了很多的组件，全部导入，会导致项目打包变得很大。==

按需加载

• 安装vant-ui

npm i vant@latest-v2  或  yarn add 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 { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

• main.js中引入

import '@/utils/vant'

• app.vue中进行测试

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

项目中的vw适配

官方说明：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage

yarn add postcss-px-to-viewport@1.1.1 -D

• 项目根目录， 新建postcss的配置文件postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

request模块 - axios封装

接口文档地址：http://interview-api-t.itheima.net/swagger-ui/index.html#/

我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

1. 安装 axios

npm i axios

2. 新建 utils/request.js 封装 axios 模块

利用 axios.create 创建一个自定义的 axios 来使用

http://www.axios-js.com/zh-cn/docs/#axios-create-config

/* 封装axios用于发送请求 */
import axios from 'axios'

// 创建一个新的axios实例
const request = axios.create({
  baseURL: 'http://interview-api-t.itheima.net/h5/',  	//请求基地址
  timeout: 5000  	//超时时间
})

// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default request

3. 测试 (可以先注册后登录)

<script>
import request from '@/utils/request'
export default {
  async created () {
    // const res = await request.post('/user/register', {
    //   username: 'shuaipeng',
    //   password: '123456'
    // })
    const res = await request.post('/user/login', {
      username: 'shuaipeng',
      password: '123456'
    })
    console.log(res)
  }
}
</script>

local模块 - 本地存储

新建 utils/storage.js

// 以前 token 令牌，如果存到了本地，每一次都写这么长，太麻烦
// localStorage.setItem(键， 值)
// localStorage.getItem(键)
// localStorage.removeItem(键)

const KEY = 'my-token-vant-mobile'

// 直接用按需导出，可以导出多个
// 但是按需导出，导入时必须 import { getToken } from '模块名导入'
// 获取
export const getToken = () => {
  return localStorage.getItem(KEY)
}

// 设置
export const setToken = (newToken) => {
  localStorage.setItem(KEY, newToken)
}

// 删除
export const delToken = () => {
  localStorage.removeItem(KEY)
}