vue-cli + axios + element + mockjs | json-server (没有最全只有更全)

一、vue-cli创建项目

1.1 安装cli脚手架

npm install -g @vue/cli
或者使用 yarn 
yarn global add @vue/cli

可使用命令来检查其版本是否正确

vue --version

1.2 使用cli脚手架创建项目

1.创建一个新项目

vue create vue-cli-demo

2.创建选择

• clean-front : 是以前保存的配置 选择可快速创建(推荐)
• Default : 默认配置（不推荐）
• Default (Vue 3 Preview) : 默认推荐vue3.0的配置（不推荐）
• Manually select features : 手动选择配置(推荐)
  在此选择手动选择选项(上下左右键进行移动，space空格键进行选中 or 取消选中 ,enter回车键进行确认选择)

3.功能选择

根据个人需要进行选择，图示为我所选择的

4.选择vue.js的版本（推荐2.x）

5.选择路由模式(根据需要进行选择)

6.选择一个CSS预处理器

7.配置文件放在哪(推荐package.json)

8.是否将本次配置保存

创建完成，如图所示：

cd vue-cli-demo // 目录切换至该项目
yarn serve 启动项目

至此，使用cli创建项目就完成了。此时并不会自动打开网页，需手动打开http://localhost:8080/

看个人需求，我在此处选择不保存
如果保存，即如前面展示的 我的 clean-front 配置

二、使用element-ui 及 axios

2.1 使用element-ui

在vue里，使用element有一个简单的方式，如下：

vue add element

How do you want to import Element?
你想如何引入ELement?

推荐选择：
Fully import

Do you wish to overwrite Element’s SCSS variables?
你希望覆盖Element的SCSS变量吗

推荐选择:
yes

Choose the locale you want to load ?
选择要加载的区域设置

推荐选择:
zh-CN

此时，会自动安装element并且会自动帮你将element引入项目的main.js,如下：

2.2 使用axios

与element的方法一致.如下：

vue add axios

自动引入项目的main.js：

注意：
如果遇到以下报错，不用慌。这是因为你开启了eslint规范，由于过于严谨,导致错误提醒

解决方案:
在package.json文件中添加如下代码，然后重新运行安装axios的指令，且运行项目

"rules": {
	"generator-star-spacing": "off",
	"no-tabs":"off",
	"no-unused-vars":"off",
	"no-console":"off",
	"no-irregular-whitespace":"off",
	"no-debugger": "off"
},

三、模拟数据( mockjs | json-server )

3.1 使用json-server

1. 安装json-server

npm i -S json-server

2. 创建***.json文件
   
3. 在package.json里添加运行指令

“json”: “json-server --watch ./src/db.json --port 3000”

4. 运行指令

npm run json

运行成功。可打开该链接查看数据

5.配置代理
根目录创建vue.config.js文件

module.exports = {
  devServer: {
    port: 8090,
    open: true,
    proxy: {
      "/jsonApi": {
        target: "http://localhost:3000",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "/jsonApi": "",
        },
      },
    },
  },
};

6. 发送请求

 this.$axios
      .get("/jsonApi/infomation")
      .then(res => {
        console.log("res", res);
      })
      .catch(err => {
        console.log("err", err);
      })
      .finally(() => {
        console.log("finally");
      });

注意：
当修改了数据文件之后，必须重新启动

yarn json
yarn serve

3.2 使用mockjs

1. 安装mockjs

npm i -S mockjs

2.1 创建文件 方式一：

/src /mock /index.js

//引入mockjs
const Mock = require("mockjs");
// 获取 mock.Random 对象
const Random = Mock.Random;
//使用mockjs模拟数据
Mock.mock("/api/data", (req, res) => {
  //当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
  let list = [];
  for (let i = 0; i < 30; i++) {
    let listObject = {
      title: Random.csentence(5, 10), //随机生成一段中文文本。
      company: Random.csentence(5, 10),
      attention_degree: Random.integer(100, 9999), //返回一个随机的整数。
      photo: Random.image("114x83", "#00405d", "#FFF", "Mock.js"),
    };
    list.push(listObject);
  }
  return {
    data: list,
  };
});

2.2 创建文件 方式二：
/src /mock/ login.js

const login = (params)=>{
	return {
		code:0,
		msg:'登录成功！'
	}
}
export { login }

/src /mock /index.js

import Mock from "mockjs";
import { login } from "./login.js";

Mock.mock(/\/loginApi/,'get',login)

3. 在mian.js里全局引入使用

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'

require('./mock') // 引入mock模拟数据

Vue.config.productionTip = false

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

4. 发送请求

this.axios
      .get("/api/data")
      .then(res => {
        //get()中的参数要与mock.js文件中的Mock.mock()配置的路由保持一致
        this.data = res.data.data;
        console.log(res.data); //在console中看到数据
      })
      .catch(res => {
        alert("wrong");
      });

至此，就暂时告一段落啦～

有问题欢迎指正。