安装element-ui、axios、qs、mockjs

一、 安装element-ui

# 切换到项目根目录
cd vueadmin-vue
# 或者直接在idea中执行下面命令
# 安装element-ui
cnpm install element-ui --save

PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin> cnpm install element-ui --save
√ Installed 1 packages
√ Linked 10 latest versions
[1/1] scripts.postinstall element-ui@2.15.1 › async-validator@1.8.5 › babel-runtime@6.26.0 › core-js@^2.4.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\RuXingDemo\\后台管理项目\\前端Vue+Element\\VueAdmin\\node_modules\\_core-js@2.6.12@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

[1/1] scripts.postinstall element-ui@2.15.1 › async-validator@1.8.5 › babel-runtime@6.26.0 › core-js@^2.4.0 finished in 488ms
√ Run 1 scripts
deprecate element-ui@2.15.1 › async-validator@1.8.5 › babel-runtime@6.26.0 › core-js@^2.4.0 core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
√ All packages installed (11 packages installed from npm registry, used 5s(network 4s), speed 22.94kB/s, json 11(92.85kB), tarball 0B)
PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin>

然后打开项目src目录下的main.js，引入element-ui依赖。

import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)

在App.vue中添加代码

<template>
  <div id="app">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

二、安装axios
axios是一个基于 promise 的 HTTP 库，这样我们进行前后端对接的时候，使用这个工具可以提高我们的开发效率。

cnpm install axios --save

PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin> cnpm install axios --save
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (2 packages installed from npm registry, used 521ms(network 518ms), speed 34.03kB/s, json 2(9.38kB), tarball 8.25kB)
PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin>

然后在main.js中全局引入axios。

import axios from 'axios'
Vue.prototype.$axios = axios //

组件中，就可以通过this.$axios.get()来发起我们的请求。
三、安装qs
qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。

cnpm install qs --save

PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin> cnpm install qs --save
√ Installed 1 packages
√ Linked 7 latest versions
√ Run 0 scripts
√ All packages installed (8 packages installed from npm registry, used 862ms(network 855ms), speed 31.75kB/s, json 8(13.53kB), tarball 13.62kB)
PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin>

四、安装mockjs

cnpm install mockjs --save-dev

PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin> cnpm install mockjs --save-dev
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (2 packages installed from npm registry, used 493ms(network 490ms), speed 17.7kB/s, json 2(8.67kB), tarball 0B)
PS D:\RuXingDemo\后台管理项目\前端Vue+Element\VueAdmin>

在src目录下新建mock.js文件，用于编写随机数据的api，然后需要在main.js中引入这个文件：src/main.js

require("./mock") //引入mock数据，关闭则注释该行

后面我们mackjs会自动为我们拦截ajax，并自动匹配路径返回数据！