【源码来袭】使用vue编写国旗头像项目

使用vue编写国旗头像项目

预览

本文使用到muse-ui，vue axios,vue

• muse-UI 官网地址
  https://cn.vuejs.org/

• vue axios 官网地址
  https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

• vue 官网地址
  https://cn.vuejs.org/

如何使用vue-cli创建vue项目？具体信息详见>> 《使用vue-cli创建vue项目》

需求思路

用户上传头像逻辑（有条件的可以修改为自动获取微信头像），
将图片作为底图进行修改，使用已有国旗的边框作为第二层图片进行覆盖。
最后，将两张图片进行合并为一张图片反馈给用户。

编写代码

添加muse-ui 支持

安装muse-ui

cnpm i muse-ui -S

在main.js中使用

import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'

Vue.use(MuseUI)

引入icon图标文件

如果图标不能正常显示请参考下方解决方法

下载文件：

(将名字改成icon.woff2)
woff2下载

CSS文件下载

修改CSS文件：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(icon.woff2) format('woff2');
}

main.js导入

import './assets/font/material-icons.css'

引入vue请求网络的模块axios

cnpm install axios

main.js导入

import axios from 'axios'
import VueAxios from 'vue-axios'

// 设置API的根路径
var axiosInstance = axios.create({
  baseURL: 'http://wintp.top'
})

Vue.use(VueAxios, axiosInstance)

常用Get/Post请求

get
    this.axios.get('/admin')
      .then(res => {
        console.log(res.data)
      })
      .catch(res => {
        console.log(res.data)
      })

post
    this.axios.post('admin/login', {
      'user_name': 'admin',
      'user_pwd': 'admin'
    }).then(res => {
      //res.data do something right
    }).catch(res => {
      //do something wrong
    })

首页代码编写

以上便是主要的前端代码实现，具体源码请关注【趣学程序】微信公众号，回复“国旗头像源码”获取。