新vue项目需要进行的配置

新vue项目需要进行的配置

1.在package.json中添加相关依赖的版本

• 关于scss相关依赖：高版本会出现编译问题，所以建议暂时使用旧版本
  "node-sass": "^4.0.0",
"sass-loader": "^7.3.1",

• axios相关依赖版本
  "axios": "0.20.0"

• mock相关依赖版本
  "mockjs": "^1.1.0",

• vant相关组件的依赖版
  "vant": "^2.9.0",

• element相关组件的依赖
  "element-ui": "^2.14.1",

• echart相关依赖版本
  "echarts": "^4.9.0",

• vuex
  "vuex": "3.5.1"

2.各依赖的使用

• scss

<style lang="scss">
//相关样式
</style>

• element-ui

import ElementUI from 'element-ui';
//引入element相关样式
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

• vant

import Vant from 'vant';
import 'vant/lib/index.css'
Vue.use(Vant);

• echart

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
//只有可以直接调用this.$echarts来调用echarts组件

echarts在文件中使用

//实例化对象
let echart = require('echarts');
let chart = document.querySelector(".leftbar .chart");
let myCharts = echart.init(chart);
//指定配置项和数据
 let option = {}
 myCharts.setOption(option);           
 //让图标跟随页面自适应            
 window.addEventListener("resize",()=>{                
  	myCharts.resize();            
 })

• axios
  单独写index.js文件，设置相请求拦截和响应拦截

import axios from 'axios'
let http = axios.create({    
	//设置代理
	baseURL:'api',
	timeout:10000，
});
// 请求拦截器
http.interceptors.request.use(config => {
	if(config.url == "/api/a/login") {
	
    	} else {        
    		config.headers.Authorization = sessionStorage.getItem('token');   
    	}        
    	return config;
})
//响应拦截器
http.interceptors.response.use(    
	res => {        
	 	// 请求成功        
		//  console.log('请求成功:'+JSON.stringify(res));
	         if(res.status == 200){             
	         	//响应成功                        
	         	return Promise.resolve(res);         
	         }else {             
	         	if(res.data.code && res.data.message) {                 
	         		//404、500                
	         		console.log(JSON.stringify(res));                  
	         		return Promise.reject(res.data.code+res.data.message);             		}else {                  
	         		return Promise.reject('请求错误');            
	         	}         
	       	}     
	 },    
	 err => {             }
)
export default http

然后在有请求的文件中导入使用。
设置代理的方法：在config文件夹下的index.js中的proxyTable中添加以下代码

'/api': {
	//将target映射为/api
	target: '',//域名接口        
	changeOrigin: true,//是否实现跨域        
	pathRewrite: {          
		'^/api': '', 
	}     
}

• mock
  设置虚拟接口模拟数据，实现前后端同时开发无障碍

Mock.mock('虚拟接口',{            
	// 属性 peopleInfo 的值是一个数组，
        'peopleInfo|20': [{                
        	'id': '@increment',               
        	 'uname':"@cname",                
        	 'score' : 10,            
        }]     
 });