vue框架搭建

第一步：创建项目

vue create app

第二步：配置依赖

• element

npm i element-ui -S

//  引入在main.js中
import ElementUI from 'element-ui'
import './assets/css/element-variables.scss'

Vue.use(ElementUI)



//	在assets中创建element-variables.scss

/* 改变主题色变量 */

$--color-primary: #2b5aad;

/* 改变 icon 字体路径变量，必需 */

$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';

• rem

   npm install postcss-px2rem px2rem-loader --save

//	在根目录src中新建util目录下新建rem.js等比适配文件

		// rem等比适配配置文件
		// 基准大小
		const baseSize = 16
		// 设置 rem 函数
		function setRem () {
		  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
		  const scale = document.documentElement.clientWidth / 1920
		  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
		  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
		}
		// 初始化
		setRem()
		// 改变窗口大小时重新设置 rem
		window.onresize = function () {
		  setRem()
		}

//	在main.js中引入适配文件
import './util/rem'

//	到vue.config.js中配置插件
			// 引入等比适配插件
			const px2rem = require('postcss-px2rem')
			
			// 配置基本大小
			const postcss = px2rem({
			  // 基准大小 baseSize，需要和rem.js中相同
			  remUnit: 16
			})
			
			// 使用等比适配插件
			module.exports = {
				lintOnSave: true,
				publicPath: './',
				outputDir: 'dist',
				assetsDir: 'static',
				css: {
					loaderOptions: {
						postcss: {
							plugins: [postcss],
						},
					},
				},
				devServer: {
					port: 8080, //	端口
				},
			}

• axios、scss

npm install node-sass --save
npm install sass-loader --save

npm i axios -s

• api 、 http

//	在main.js中引入适配文件
import { host } from '../src/util/api'

import { post, get, del, put } from './util/http'
import api from './util/api'

Vue.prototype.api = api
Vue.prototype.$get = get
Vue.prototype.$post = post
Vue.prototype.$del = del
Vue.prototype.$put = put

// 创建文件api、http
-------api
let host = 'http://192.168.1.88:8085' //数据接口ip
export { host }

export default {
	login: `${host}/loginCt/Login`, //登录
	out: `${host}/loginCt/Loginout`, //退出登录
		
	host,// 全局
	}

-----------http
import axios from 'axios'
import QS from 'qs'
// import store from '../store/index'
import { Message } from 'element-ui'
import router from '../router/index'
// let loading = require('../util/loading');
// 环境的切换
// if (process.env.NODE_ENV == 'development') {
//     axios.defaults.baseURL = '/api';
// } else if (process.env.NODE_ENV == 'debug') {
//     axios.defaults.baseURL = '';
// } else if (process.env.NODE_ENV == 'production') {
//     axios.defaults.baseURL = 'http://api.123dailu.com/';
// }



// 请求超时时间
axios.defaults.timeout = 30000

// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

// 请求拦截器
axios.interceptors.request.use(
	(config) => {
		if (localStorage.getItem('token')) {
			// 每次发送请求之前判断vuex中是否存在token
			// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
			// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
			//  存在将token写入 request header
			config.headers.common['token'] = `${localStorage.getItem('token')}`
		}
		// if(config.showLoading) {
		// 	loading.showFullScreenLoading();
		// }

		return config
	},
	(err) => {
		return Promise.reject(err)
	}
)

// 响应拦截器
axios.interceptors.response.use((response) => {
	if (!response.data.success) {
		if (302 === response.data.statusCode) {
		  localStorage.clear();
		}
	  }
	//   if(response.config.showLoading) {
	// 	  loading.tryHideFullSreenLoading();
	//   }
	  return Promise.resolve(response);
},
	(err) => {
		//==============  错误处理  ====================
		if (err && err.response) {
			switch (err.response.status) {
			  case 400:
				Message.error(err.response.data.message);
				break;
			  case 401:
				Message.error(err.response.data.message);
				break;
			  case 302:
				Message.error(err.response.data.message);
				break;
			  case 303:
				Message.error(err.response.data.message);
				break;
			  case 403:
				Message.error(err.response.data.message);
				break;
			  case 404:
				Message.error(err.response.data.message);
				break;
			  case 408:
				Message.error(err.response.data.message);
				break;
			  case 500:
				Message.error(err.response.data.message);
				break;
			  case 501:
				Message.error(err.response.data.message);
				break;
			  case 502:
				Message.error(err.response.data.message);
				break;
			  case 503:
				Message.error(err.response.data.message);
				break;
			  case 504:
				Message.error(err.response.data.message);
				break;
			  case 505:
				Message.error(err.response.data.message);
				break;
			  default:
				Message.error(`连接出错(${err.response.status})`);
			}
		  } else {
			Message.error("连接服务器失败!");
		  }
	}
)

/**
 * get方法，对应get请求
 */
export function get(url, params) {
	return new Promise((resolve, reject) => {
		axios
			.get(url, {
				params: params,
			})
			.then((res) => {
				resolve(res.data)
			})
			.catch((err) => {
				reject(err.data)
			})
	})
}
/**
 * post方法，对应post请求
 */
export function post(url, params) {
	return new Promise((resolve, reject) => {
		axios
			.post(url, params)
			.then((res) => {
				resolve(res.data)
			})
			.catch((err) => {
				reject(err.data)
			})
	})
}

/**
 * delete方法，对应delete请求
 */
export function del(url, params) {
	return new Promise((resolve, reject) => {
		axios
			.delete(url, {
				params: params,
			})
			.then((res) => {
				resolve(res.data)
			})
			.catch((err) => {
				reject(err.data)
			})
	})
}

/**
 * put修改
 * @param {} url
 * @param {*} params
 */
export function put(url, params) {
	return new Promise((resolve, reject) => {
		axios
			.put(url, params)
			.then((res) => {
				resolve(res.data)
			})
			.catch((err) => {
				reject(err.data)
			})
	})
}