内容简介:经框架选择验证对比 element,iview,ant-design-vue 最终选择 ant-design-vue,传送门main.js 作为操作入口,很多东西需要引入,代码体积过大,需要进行删减这样通过几个集合,来分散引入各个模块
├── public // index.html ├── src // 业务相关 │ ├── assets // 静态文件(css, images) │ ├── components // 全局组件 │ ├── layouts // 基础样式布局 │ ├── plugin // 样式及 工具 引入 │ ├── request // 请求配置 │ ├── router // 路由 │ ├── store // 全局状态管理 │ ├── utils // 工具文件 │ ├── app.vue // 入口文件 │ ├── main.js // 主要配置文件 │ └── views // 页面 ├── .eslintrc.js // eslint 检查配置 ├── .env.release // 测试环境变量 ├── .env.pre-build // 预发环境变量 └── vue.config.js // webpack 打包配置 复制代码
2. UI 框架选择
经框架选择验证对比 element,iview,ant-design-vue 最终选择 ant-design-vue,传送门 vue.ant.design/docs/vue/in…
优点:
- 好看
- 文档清晰
- 使用方便,示例清晰
- bug少,组件使用顺滑
- 性能较好,有单例测试
3. main.js 处理
main.js 作为操作入口,很多东西需要引入,代码体积过大,需要进行删减
import Vue from 'vue' import App from './App.vue' import router from '@/router' import store from '@/store' import * as filters from '@/utils/filters' // 全局过滤器 import './plugin' // 引入操作集合 import './assets/css/index.less' // 样式集合 Vue.config.productionTip = false // 全局过滤器 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) // 非父子组件传值公交车 Vue.prototype.$bus = new Vue() new Vue({ router, store, render: h => h(App) }).$mount('#app') 复制代码
这样通过几个集合,来分散引入各个模块
- 样式模块 (import './assets/css/index.less' // 样式集合)
@import './atom.less'; @import './global.less'; @import './reset.less'; 复制代码
- 操作模块 (import './plugin/index.js' // 引入操作集合)
import './custom.js' import './ant-design' import './tools' // tools.js import Vue from 'vue' import { getStorage, setStorage, rmStorage, setLocalStorage, getLocalStorage, rmLocalStorage } from '@/utils/storage' import moment from 'moment' import 'moment/locale/zh-cn' import api from '@/request/api' import { isInvalid } from '@/utils/verify' // 自定义组件 moment.locale('zh-cn') // 请求接口 Vue.prototype.$api = api // 验证工具 Vue.prototype.$isInvalid = isInvalid Vue.prototype.$moment = moment // 存储本地数据 Vue.prototype.$getStorage = getStorage Vue.prototype.$setStorage = setStorage Vue.prototype.$rmStorage = rmStorage Vue.prototype.$getLocalStorage = getLocalStorage Vue.prototype.$setLocalStorage = setLocalStorage Vue.prototype.$rmLocalStorage = rmLocalStorage // ant-design.js import Vue from 'vue' import { Layout, Spin, Button, Icon, Avatar, Select, Drawer, Menu, Form, LocaleProvider, Dropdown, Divider, Modal, Input, Tooltip, notification, Popover, ConfigProvider, Pagination, Steps, Cascader, Row, Col } from 'ant-design-vue' import 'ant-design-vue/dist/antd.less' Vue.use(Layout) Vue.use(Spin) Vue.use(Button) Vue.use(Icon) Vue.use(Avatar) Vue.use(Select) Vue.use(Popover) Vue.use(Form) Vue.use(Drawer) Vue.use(Menu) Vue.use(LocaleProvider) Vue.use(Dropdown) Vue.use(Modal) Vue.use(Input) Vue.use(Divider) Vue.use(notification) Vue.use(Pagination) Vue.use(Tooltip) Vue.use(ConfigProvider) Vue.use(Steps) Vue.use(Cascader) Vue.use(Row) Vue.use(Col) 复制代码
4. axios 请求二次封装
axios 不过多介绍,上干货
- 新建文件 axios
- 请求拦截器 根据自己业务需求,修改请求头以及超时时间等
import axios from 'axios' axios.interceptors.request.use( config => { // 判断是否是提交文件,还是常规请求 if (config.data instanceof FormData) { config.headers = { 'Content-Type': 'multipart/form-data' // 此处格式自定义 } } else { config.data = JSON.stringify(config.data) config.headers = { 'Content-Type': 'application/json', // 此处格式自定义 token: getLocalStorage('token') } } config.withCredentials = true config.timeout = 5000 // 超时时间 return config }, error => { return Promise.reject(error) } ) 复制代码
- 响应拦截器 根据后台返回数据,做些统一处理
// 添加响应拦截器 axios.interceptors.response.use( res => { let data = res.data if (res.statusCode !== 200) { if (data.failureReason === 4011 || data.failureReason === 4012) { console.log('需要重新登录') } } else { if (data.resultStates === 0) { return data } else { return Promise.reject(data) } } }, error => { notification['error']({ message: '提示', duration: 2, description: '后台报错' }) // 对响应错误做点什么 return Promise.reject(error) } ) 复制代码
- 封装get,post,并导出
export function get (url, params = {}) { return new Promise((resolve, reject) => { axios .get(url, { params: params }) .then(response => { if (response.success) { resolve(response.data) } }) .catch(err => { reject(err) }) }) } /** * 封装post请求 * @param url * @param data * @returns {Promise} */ export function post (url, data = {}) { return new Promise((resolve, reject) => { axios.post(url, data).then( response => { if (response.success) { resolve(response.data) } }, err => { reject(err) } ) }) } 复制代码
- 重点:新建 api.js 文件 将后台请求接口全部写在此处,统一管理
import { get, post } from './axios' const api = { reqLogin: p => post('api/user/addFormId', p), reqGetInfo: p => post('api/user/addFormId', p) } export default api // 将 api 引入到 main.js 中 Vue.prototype.$api = api // 这样页面中使用 this.$api.reqLogin().then(res => { console.log(res) }) 复制代码
是不是非常方便?鼓掌 啪啪啪啪......
web 前端群招人,有梦想的一群小青年 www.jianshu.com/p/33eee1c26…
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。