基础环境

核心技术

名称
Vue.js
vuex
mockjs+EasyMock
axios
element-ui
vue-element-admin
mavon-editor Markdown

nodejs下载链接：

https://nodejs.org/dist/v14.2.0/node-v14.2.0-x64.msi

element ui

克隆代码到本地：

git clone https://github.com/PanJiaChen/vue-admin-template.git

在项目路径下创建.npmrc文件定义npm仓库地址：

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org

通过pycharm打开项目，并运行项目。打开pycharm终端安装项目

npm install 

设置element ui汉化，编辑项目min.js文件

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

关闭eslint语法校验，编辑项目根目录下vue.config.js文件中：

  // lintOnSave: process.env.NODE_ENV === 'development',
  lintOnSave: false,

更改头部title，编辑src/settings.js：

module.exports = {
  title: 'Vue blog admin',
}

显示标题栏logo和字符串，编辑src/settings.js：

module.exports = {
	fixedHeader: true,
	sidebarLogo: true
}

更换标题栏图标，将自己的图标放在Public/favicon.ico

修改标题栏文字，从布局组件src/layout/index.vue定位找到Logo组件src/layout/components/sidebar/logo.vue：

  data() {
    return {
      title: 'Allen blog',
      logo: require('@/assets/logo.png')
    }
  }

api接口

mock.js接口

vue对接mock.js模拟数据接口

mock.js解决什么问题？

前后端分离开发，可以通过mock.js模拟后端api接口数据，提供给前端开发测试

什么是mock.js？

mack.js是用于生成随机数据，拦截Ajax请求。通过拦截Ajax请求根据数据模板生成并返沪模拟数据，可以进行开发和测试

什么是easymock

easy mock是一个可视化，并且能过够快速生成模拟数据的服务。使用mock.mengxuegu.com进行测试

在easy mock创建一个项目并创建test接口，定义数据如下：

{
  "code": 20000,
  "message":"allen blog"
}

点击复制接口地址，访问该接口返回以下数据：

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 36
Content-Type: application/json; charset=utf-8
Date: Sun, 29 Aug 2021 12:24:37 GMT
Rate-Limit-Remaining: 998
Rate-Limit-Reset: 1630239878
Rate-Limit-Total: 1000
Server: nginx/1.16.0
Vary: Accept, Origin
X-Request-Id: 1208187c-8ad8-4c75-8058-2823a12fab69

{
  "code": 20000,
  "message": "allen blog"
}

调用easy mock接口

easy mock接口调用

编辑vue.config.js文件中使用devServer.proxy选项进行代理配置：

devServer: {
		......
    proxy: {
      [process.env.VUE_APP_BASE_API]: { // VUE_APP_BASE_API是.env.development文件的/dev-api
        target: ' https://mock.mengxuegu.com/mock/612b7ba1ea9e140d62eed3ac', // easy mock注册的项目base url
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  },

创建src/api/test.js文件中，定义调用接口api：

import request from '@/utils/request'

export default {
  test() {
    return request({
      url: '/test',
      method: 'get'
    })
  }
}

在dashboard调用接口获取数据，编辑src/views/dashboard/index.vue：

<script>
// eslint-disable-next-line no-unused-vars
import { mapGetters } from 'vuex'
import api from '@/api/test'

export default {
  name: 'Dashboard',
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      api.test().then(response => {
        console.log(response)
        this.name = response
      })
    }
  }
}
</script>

请求post请求easy mock