vue-element-admin 初识（一）

一、下载安装

1.安装不在赘述，去官网查就得了

对了 装完 node之后 别忘了 npm init -y 因为绑定下面淘宝镜像的时候可能会出现composer.json不存在或者其他未知错误。

2.最好npm绑定淘宝镜像，国内速度快：（1）npm install -g registry=https://registry.npm.taobao.org （2）npm config set registry https://registry.npm.taobao.org 两种方式都可以绑定，另外绑定完毕之后查询是否绑定好了执行命令：npm config get registry 出现绑定的淘宝镜像地址就说明绑定成功了。

二、mockJS 生成测试数据的，自己去官网看，不多赘述。

三、项目基本知识

1.后台title、header、logo设置方式

文件位置：src/settings.js 

title：xxx 顾名思义 他就是后台title

fixedHeader: true 设置头部固定，如下图，面包屑导航那一栏为头部，设置true就为头部固定

sidebarLogo: true 设置sidebar顶上的logo，然后logo图片及名称修改位置：因为启用了layout模板布局，所以去找src/layout文件夹。通过读 src/layout/index.vue源码发现Navbar,SideBar,AppMain均引入的components组件所以去看 src/layout/components组件文件夹，然后找到components/Sidebar文件夹中的Logo.vue，最后进行更改。注意静态文件要用require方法进行引入，直接相对路径是不可以的；另外在此框架里面 @ 代表src目录。

四、编写api请求数据展示

因为这里涉及前后台分离开发，所以后台地址就自己随便搞一个，或者用我的：https://mock.mengxuegu.com/mock/6063d952f2e38f3a2f6ba42f/xzec/test 这个只是一个测试接口，只有状态和message。只是为了演示下面怎么进行的前后台对接api。

1.设置开发代理服务器

找到根目录下的vue.config.js文件，里面module.exports中的devServer对象在before:require('./mock/mock-server.js')后面添加，这个before是拦截，也就是直接找到mockjs里面找到某些数据，这个devServer是开发环境才会检测，生产环境不会检测运行。

proxy：设置代理服务器，避免跨域问题

[process.env.VUE_APP_BASE_API] 这是key，在vue里面必须要加[];我也不知道是vue这样限制的还是这个框架，总之要加上；然后VUE_APP_BASE_API是 根目录下.env.development文件中的值，这个文件也就是开发环境的env

target: http:xxx/xxx 这个是目标服务器地址

changeOrigin: true 是否跨域，设置为true 直接访问上方的target地址

pathRewrite: {

    [ '^' + process.env.VUE_APP_BASE_API]: '' // 匹配process.env.VUE_APP_BASE_API 然后替换成空，因为地址没有带着 /dve-api 所以要把它去掉。

}     

2.编写api

在src/api里面编写自己的api文件，比如test.js，引入request方法，放出default中的自己编写的test(){}方法 返回异步promise，然后在静态文件中使用.then()方法拿到返回的promise数据。

（1）get方法

（2）post方法：注意post方法设置之后由于还是用的mock-server.js，请求外部接口的时候会报错5000毫秒超时，这是由于node的express中的body-parser中间件导致的，所以要在mock-server.js中设置一下：首先注释app.use(bodyParser.json())和app.use(bodyParser.urlencoded({extended: true}))，然后把这两个参数写到app[mock.type](mock.url, bodyParser.json(), bodyParser.urlencoded({extended: true}), mock.response)

3.调用api并渲染页面

（1）首先在页面引入自己编写的api：import api from '@/api/test'

（2）在export default中设置data(),created(),methods:{}；注意这里data里面是要return的；created是页面要执行的方法；methods里面编写方法，设置data里面的数据this.name=response；promise.then()里面用的es6的箭头函数：可以response=>{}或者(response)=>{}。箭头函数意思就是能在里面拿到外面的this,不然普通函数的this只是取的当前方法。

（3）渲染页面 {{ xxx }} 用双大括号进行渲染。