创建vue2项目以及flexble适配

一、创建vue2项目

　　1.查看版本号：vue -V

　　2.npm init webpack "项目名"

　　

 

 二、使用flexble做适配

　　1.下载flexble包。  

npm i lib-flexible --save

 

　　2.项目中main.js中引入 

import 'lib-flexible/flexible'

　　3.修改源码

　　4.安装拓展工具px<--->rem   互相转换

三、使用ElementUI

　　1.下载ElementUI.

npm install element-ui -S

 

　　2.在main.js中引入

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

 

　　3. ElementUI官网地址：   https://element.eleme.cn/#/

四、使用axios

　　1.下载axios

npm install axios

 

　　2.在main.js中引入并简单封装

import axios from 'axios';
axios.defaults.baseURL = '/api';   //配置代理了，所以这个是/api，实际开发中应考虑实际问题
Vue.prototype.$axioslog =Axios;
/*封装axios*/
function Axios(options){
  axios({
    url:options.url,
    method:options.method||'POST',
    data:options.data,
    params:options.data,
    headers: {'Access-Control-Allow-Origin': '*'}
  }).then(result=>{
    options.success(result.data)
  }).catch(err=>{
    console.log("失败++"+err);
    options.error(err)
      // Message.error({message:msg,offset:150});
    // }
    // else {
      // Message.error({message:msg,offset: 150});
    // }
  })
}

 

　　3.在组件中使用：

deleteRow(){
      let that = this; 
      that.$axioslog({   //数据库中删除
              url:'/users',
              method:'post',
              data: {
                "unique_id": that.unique_id,
              },
              success:(response)=>{
                  if(response.code === 0) {
                      console.log("成功",response);
                  } else {
                    this.$message.error('失败');
                  }
              },
              error: (response)=>{
                  this.$message.error('失败');
              }
          })
    },

 

　　使用formData 传参

const that = this;
let formData = new FormData();
formData.append("name", that.nowname);
formData.append("id", that.nowid);

formData.append("audio_file", regVoiceBuffer, that.form.id+that.rannum+".wav");   //传文件

for(var pair of formData.entries()) {
          console.log(pair[0] + ', ' + pair[1]);
      }
this.$axioslog({
          url:'/voiceprint/register',
          method:'post',
          data:formData,
           ...........

五、进行代理配置，解决跨域问题

　　1.在配置文件index.js里面(因为是VUE2，所以是config文件夹)。例如完整后台接口是http://122.122.122.22:19001/api/user/delete,则target:应为http://122.122.122.22:19001  ；/api应为所有接口统一前缀，此为/api,

　　2.在main.js中设置基础路径，意思好像是遇到/api之后就走代理。

axios.defaults.baseURL = '/api'; 

 

　　3.这个情况可以解决前后端放在同一（或不同）服务器上不同tomcat下面，如前端在8080，后台在8090，则有此跨域问题，需要进行代理配置。

六、解决打包问题中图片等404

修改两处，一个是build文件夹下utils.js,添加publicPath:'../../'    ，如图：

 

第二处是config文件夹下index.js中assetsPublicPath: './',   加一个.