详解基于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+XML 操作
Sep 20 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
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扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
使用python模拟命令行终端的示例
2019/08/13 Python
vscode调试django项目的方法
2020/08/06 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
信访维稳承诺书
2015/05/04 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Python 使用dict实现switch的操作
2021/04/07 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Mysql事务索引知识汇总
2022/03/17 MySQL