配置一个vue3.0项目的完整步骤

打开package.json，找到

eslintConfig

"no-console": "off"

"eslintConfig": {
 "root": true,
 "env": {
  "node": true
 },
 "extends": [
  "plugin:vue/essential",
  "eslint:recommended"
 ],
 "rules": {
  "no-console": "off"
 },
 "parserOptions": {
  "parser": "babel-eslint"
 }
 },

好了，现在我们就可以愉快的在vue写console了。

11. mock

mock是啥呢？mock是一个测试工具。mock会拦截ajax请求并可以按照一定规则返回数据。以前需要后台返回给我们的数据，现在我们可以使用mock返回了。mock的功能很强大，可以模拟出后端的增删改查等功能。非常方便我们前端进行测试.

安装

D:testbook>yarn add mockjs

使用

在main.js的同级目录下新建mock.js。我们在mock.js里定义刚刚我们需要的login接口。代码如下：

import Mock from 'mockjs'
Mock.mock('/login', 'post', (options) => {
 // console.log('options:', options)
 let data = JSON.parse(options.body)
 let name = data.name
 let password = data.password
 if (name === 'admin' && password === 'admin') {
 return {
  status: 1,
  message: '登录成功'
 }
 } else {
 return {
  status: 0,
  message: '账号或者密码错误'
 }
 }
})

这段代码的作用即使拦截login接口请求，当账号和密码是admin的时候，就返回请求成功，否则返回‘账号密码错误’

现在问题来了？我们写好程序了，怎么使用mock呢，其实非常简单，简单到我都不敢相信。我们直接在main.js文件中引入mock.js既可。

配置

在main.js中添加如下代码。

// 引入mock
import './mock.js'

ok，现在再打开我们的login页。输入账号和密码。如果不是admin，则弹窗报错.

如果账号密码正确，则跳转到index页面。

自此大体工作都完成了，接下来，我们继续完成项目（好累）。

12.vee-validate

我们的登录表单还有个问题，就是怎么加验证。表单不验证，一来不容易发现问题，二来会频繁的骚扰后端。自己写验证也可以，但是每次都要重复写很多代码，键盘都受不了。so，还是用组件吧，我使用的是vee-validate。