详解基于vue-cli3.0如何构建功能完善的前端架子


Posted in Javascript onOctober 09, 2018

上一篇文章写了vue和typescript的整合,发现很多小伙伴对vue-cli构建出来的项目很感兴趣,所以今天打算写写怎么在vue-cli3.0的架子上,在进一步完善,整合出具备基础功能的前端架子,主要包括以下几个功能点:

  1. webpack 打包扩展
  2. css:sass支持、normalize.css
  3. rem布局
  4. 路由设计:懒加载、前置检查、合法性校验
  5. api 设计
  6. 请求体设计-防重复提交
  7. vuex状态管理

webpack 打包扩展

vue-cli3 最大的特点就是 零配置 ,脚手架把webpack相关的配置都隐藏在@vue\preload-webpack-plugin中,默认的配置可以满足大部分应用场景,优点是我们可以节省很多折腾配置的时间,webpack对于新手来说,还是有点门槛的,这样一来,新人上手可以更关注于vue的编码上。缺点也很明显,对于想自己进行自定义配置的时候,就会稍微麻烦些。

查看当前webpack的详细配置

使用 vue inspect 可以查看到详细的配置列表

扩展webpack配置

当我们想要修改或者扩展webpack配置项时,可以在根目录下新增 vue.config.js 文件,列举个我自己写的简单小栗子

// webpack 扩展
module.exports = {
 baseUrl: 'production' === process.env.NODE_ENV ?
  '/production-sub-path/' :
  '/',
 chainWebpack: config => {
  config.module
   .rule('images')
   .use('url-loader')
   .tap(options => Object.assign(options, { limit: 500 }));
 },
 devServer: {
  open: 'darwin' === process.platform,

  // host: '0.0.0.0',
  port: 8088,
  https: false,
  hotOnly: false,

  // proxy: 'https://api.douban.com' // string | Object 
  proxy: 'http://localhost:3000' // string | Object 
 },
 lintOnSave: false
};

官网Vue.js 开发的标准工具 的介绍非常详细,而且还有中文版,非常易懂,

sass支持

<style lang="scss"></style>
<style lang="scss">
@import "./assets/style/app";
</style>

在组件中使用自定义的 functions 和 mixin,我暂时没找到全局引用的办法,只能在需要使用的组件文件中手动引用,如下

<style lang="scss">
@import "../assets/style/functions";
@import "../assets/style/mixin";
.rem {
 height: px2rem(187.5px); //自定义的函数
}
.mimi {
 @include clearfix(); //自定义的mixin
}
</style>

为了抹平各个浏览器间的差异,我们需要引入 normalize.css

// app.scss
@import "./node_modules/normalize.css/normalize"; //引用第三方normalize
@import "custom_normalize"; // 自定义的normalize

rem布局

在移动端下使用rem布局是个不错的选择,既然我们使用里的scss,那么可以使用函数来简化我们的重复计算的工作。设计给到的通常是2倍图,宽为750px,那么我们可以将基准设为 document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px'; 然后写个转换函数,如下:

// _functions.scss
@function px2rem($px) {
 $rem: 75px;
 @return ($px/$rem) + rem;
}

我们在使用的时候,就可以这么写

.rem {
 height: px2rem(300px); // 2倍图下的宽是300px,
}

转换成css就是

.rem {
 height: 4rem;
}

路由设计

主要包括路由懒加载、路由前置检查、合法性校验逻辑,以下是我写的一个简单路由

import Vue from 'vue';
import Router from 'vue-router';

// 路由懒加载
const getComponent = (name: string) => () => import(`./views/${name}.vue`);

Vue.use(Router);

const router = new Router({
 routes: [
  {
   path: '/',
   name: 'home',
   component: getComponent('home')
  },
  {
   path: '/about',
   name: 'about',
   component: getComponent('about'),
   meta: {
    auth: true
   }
  },
  {
   path: '*',
   name: 'not_fount',
   component: getComponent('notFount')
  }
 ]
});

/**
 * 路由前置检查
 */
router.beforeEach((to, from, next) => {
 // 合法性校验
 if (to.meta.auth) {
  console.log('into auth');
  next();
 }
 next();
});
export default router;

api 设计

新建 service 文件夹用于存放api脚本,根据业务模块来划分文件,如用户相关的api一个文件、购买相关的一个文件, api.ts 是各模块api的集合,如下

// service/api.ts
export { userApi } from './user';
export { buyApi } from './buy';

// service/user.ts
export const userApi = {
 /**
  * 获取用户数据
  */
 userInfo: '/node_api/read/userInfo'
};
// service/buy.ts
export const buyApi = {
 /**
  * 购买
  */
 shoping: '/node_api/shop/buy'
};

这么划分,是为了项目结构和业务结构都足够清晰,同时可以避免单文件过长的问题。

HTTP请求二次封装

发送http我使用的是非常流行的 axios ,我在其基础上,稍微进行简单的封装,然后暴露 request 对象供调用。二次封装主要是为了解决以下几个问题

  1. 简化参数,把一些常用参数都赋默认值,简化外部的使用,使得更加通用和利于排查问题。
  2. 返回报文统一处理,我们通常需要对些高频的场景做相同的处理,如错误码、未登录等场景,可以在它提供的返回响应拦截器中,统一处理。
  3. 防止重复提交,因为网络、后端处理的因素,有时接口响应会较慢,那么用户可能会在非常短的时间内,反复点击按钮,在第一次请求未返回的情况下,会再次发起新的请求,那么我们可以在axios提供的前置拦截器中搞点事情。关于防止重复请求这东东,我在以前的一篇文章有写过, 前端防止用户重复提交-js 感兴趣的小伙伴可以看看。

根据以上几点,下面是我封装的request文件,思路都比较简单,就不多说啦

import axios from 'axios';
import qs from 'qs';

const Axios = axios.create({
 baseURL: '/',
 timeout: 10000,
 responseType: 'json',
 withCredentials: true,
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
 }
});
const CancelToken = axios.CancelToken;
const requestMap = new Map();

// 请求前置拦截器
Axios.interceptors.request.use(
 config => {

  // 防重复提交
  const keyString = qs.stringify(Object.assign({}, { url: config.url, method: config.method }, config.data));
  if (requestMap.get(keyString)) {
   // 取消当前请求
   config.cancelToken = new CancelToken((cancel) => {
    cancel('Please slow down a little');
   });
  }
  requestMap.set(keyString, true);
  Object.assign(config, { _keyString: keyString });

  if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
   // 序列化
   config.data = qs.stringify(config.data);
  }

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

// 返回响应拦截器
Axios.interceptors.response.use(
 res => {
  // 重置requestMap
  const config: any = res.config;
  requestMap.set(config._keyString, false);

  if (res.status === 200) {
   return res.data;
  }
  // todo 弹窗提示等
  console.log(`request error:${res}`);
 },
 error => {
  return {
   code: -1
  };
 }
);

/**
 * @description
 * 请求
 * @param url
 * @param data
 * @param method
 */
const request = (url: string, data = {}, method = 'post') => {
 return Axios({
  method,
  url,
  data,
  params: method.toUpperCase() === 'GET' && data
 });

};

export { request };

vuex状态管理

这里我根据业务模块来划分文件结构,如下图

详解基于vue-cli3.0如何构建功能完善的前端架子

分为首页模块和用户模块,每个模块都有自己独立的 state mutations 等,在 store.ts 中,引入各模块的文件,如下

import Vue from 'vue';
import Vuex from 'vuex';
import index from './indexModule/index';
import user from './userModule/user';

Vue.use(Vuex);

export default new Vuex.Store({
 modules: {
  user,
  index
 }
});

大家注意到这里有个 store_types.ts 文件,这个文件主要是为了搭配ts使用的,文件内容如下

export enum UserType {
 /**
  * 模块名称
  */
 'MODULE_NAME' = 'user',
 /**
  * 增加次数
  */
 'ADD_COUNT' = 'addCount',
 /**
  * 计算属性-获取十倍的值
  */
 'GET_TEM_COUNT' = 'getTenCount'
}

在看下组件中的使用方式:

<script lang="ts">
import { UserType } from '@/store/store_types';
import { Component, Prop, Vue, Watch,Emit } from 'vue-property-decorator';
import {
 Action,
 Getter,
 Mutation,
 namespace,
 State
} from 'vuex-class';

@Component
export default class Test extends Vue {

 @State(state => state[UserType.MODULE_NAME].count) public fff!: number;

 @Getter(`${UserType.MODULE_NAME}/${UserType.GET_TEM_COUNT}`) public tenCount!: number;

 @Mutation(`${UserType.MODULE_NAME}/${UserType.ADD_COUNT}`) public addCount!: any;

}
</script>

虽然这么写的确有点绕,但有个好处,我们可以通过注释清晰知道方法和属性的说明

小结

以上是我根据自己工作中常见的场景来设计的,希望能对小伙伴能有帮助,其中设计不当的地方,欢迎小伙伴们在留言区一起探讨哈~也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
JavaScript 的继承
Oct 01 Javascript
web打印小结
Jan 11 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
原生js实现碰撞检测
Mar 12 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
angularJS自定义directive之带参方法传递详解
Oct 09 #Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 #Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 #Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 #Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 #Javascript
Vue中的$set的使用实例代码
Oct 08 #Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 #Javascript
You might like
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
微信小程序 网络通信实现详解
2019/07/23 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
浅析Python中signal包的使用
2015/11/13 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
机关单位动员会主持词
2014/03/20 职场文书
公关活动策划方案
2014/05/25 职场文书
学习礼仪心得体会
2014/09/01 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
交警失职检讨书
2015/01/26 职场文书
无保留意见审计报告
2015/06/05 职场文书
JavaScript前端面试组合函数
2022/06/21 Javascript