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

上一篇文章写了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状态管理

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

分为首页模块和用户模块,每个模块都有自己独立的 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>

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

小结

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

(0)

相关推荐

  • 10分钟上手vue-cli 3.0 入门介绍

    环境安装 全新版本的脚手架.逼格非常高. 记住这个名字 @vue/cli ,对就是这个 你npm 或者yarn 安装就行了,先保证全局环境有它. npm install -g @vue/cli yarn add global @vue/cli 创建项目 这里对比下以前2.X之前的版本 ,新版本把插件以及模板等 移植到命令行界面了. 旧版 创建命令 2.x vue init <template-name> <project-name> 3.x vue create <proje

  • vue-cli V3.0版本的使用详解

    vue-cli 3.0版本 目前官网上还不是3.0版本,所以需要在github上面学习使用:github网站:https://github.com/vuejs/vue-cli/tree/dev/docs 1.项目搭建 (1).在上面的GitHub网页中,拉到底部可以看到: 然后在全局中执行命令:sudo npm install -g @vue/cli即可. 最后, vue -V //可以查看到当前的vue是3.0版本了 (2).查看vue 相关指令 vue --help 查看到的常用指令: -V

  • vue-cli3.0 特性解读

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines)

  • Vue-cli@3.0 插件系统简析

    Vue-cli@3.0 是一个全新的 Vue 项目脚手架.不同于 1.x/2.x 基于模板的脚手架,Vue-cli@3.0 采用了一套基于插件的架构,它将部分核心功能收敛至 CLI 内部,同时对开发者暴露可拓展的 API 以供开发者对 CLI 的功能进行灵活的拓展和配置.接下来我们就通过 Vue-cli@3.0 的源码来看下这套插件架构是如何设计的. 整个插件系统当中包含2个重要的组成部分: @vue/cli,提供 cli 命令服务,例如vue create创建一个新的项目: @vue/cli-

  • 使用Vue-cli 3.0搭建Vue项目的方法

    1. 环境准备 1.1. 安装Node.js (建议使用LTS版本) 1.2. nrm安装及npm registry设置 // use npm npm i nrm -g // use yarn yarn global add nrm 查看可用的npm源 nrm ls nrm查看npm源.png 切换npm源(以使用taobao为例) // 用法: nrm use *** nrm use taobao // 切换之后可用 nrm ls查看是否已经切换了npm源 nrm切换npm源.png 1.3.

  • vue-cli3.0配置及使用注意事项详解

    这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines) webp

  • 浅谈vue-cli 3.0.x 初体验

    最近项目正在优化.乘着有时间看了一下 vue-cli3.0.x 使用 .感觉还蛮不错的. 因为之前项目使用的 vue-cli 2 创建的,强行使用 eslint让我们很难受,一些与项目无关的 "build" 和 "config" ,让人看着就有一些不爽 .由于公司环境比较多,需要测试环境的配置.增加了 ""tt": "node build/tt-build.js"" .到 3.0.x 应该怎么用? 带着这些

  • 快速了解vue-cli 3.0 新特性

    vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,具有开箱即用并且提供简洁的自定义配置等功能. vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了,但是不可能在本文中列举所有的内容,这篇文章作为一个对比 2.0 升级功能的导读,让你快速了解 3.0 更新的内容. 一.创建项目: 创建项目命令的变化. vue create my-project 3.0 版本包括默认预设配置 和 用户自定义配置. 自定义功能配置包括以下功能: TypeScript P

  • vue-cli3.0使用及部分配置详解

    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个 在选择功能后,会询问更细节的配置, TypeScript: 是否使

  • vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项   -d

随机推荐