vue框架搭建

小灰灰 2022-10-17 01:48 146阅读 0赞

#### 第一步：创建项目 ####

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)
    			})
    	})
    }