文档章节

vue项目实践@树洞(二)

Ian_lew
 Ian_lew
发布于 09/18 15:24
字数 2583
阅读 522
收藏 4

书接上文

上一篇粗略地搭建了项目,运行一下,编译通过,但是控制台上打出一个红色错误警告!报错了?!什么情况,还没做事就错了,来看看什么错!

'Locale' is defined but never used,就是说Locale这个变量没有使用。在引入UI组件库的时候,我的编辑器已经错误提示了,莫名其妙嘛。并非这个错抛得莫名其妙,而是这个错不是自己造成的。设想一下,在插件的基础上加了很复杂的逻辑,这时来一个这样莫名其妙的错,是不是很无语。这只是一个假想,绝大多数情况不会是插件带来的。不过,我还是选择自己撸代码,不去使用所谓的插件,除非使用例如Babel之类的工具。

除此之外,使用ESLint还会有更多的错误提示。比如,配置postcss.config.js的时候也会给出错误警告,我在上一篇文章给的配置文件的key使用的是双引号,它会提示使用单引号。再比如,ES推荐使用箭头函数,在某些时候没用使用箭头函数也会跑错,特别是使用插件。代码提示会抛出很多语法上的错误提示,如果开了ESLint,那就按着它的提示来培养代码编写习惯吧。

// 重新给一下postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    'postcss-aspect-ratio-mini': {},
    'postcss-write-svg': {
      uft8: false
    },
    'postcss-cssnext': {},
    'postcss-px-to-viewport': {
      viewportWidth: 375,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    },
    'postcss-viewport-units': {
      'silence': true
    },
    'cssnano': {
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false
    }
  }
}

我不喜欢ESLint之类的语法错误提示,我记得最搞笑的一次,我的编辑器设置的4个空格格式化代码。当时使用的webstorm编辑器,它可以给开发者提供了vue模版,然后生成的代码也是4个空格的规则。可是当我运行代码的时候就抛错了,它要求使用的2个空格,排查了很久才发现。我就在想,如果说类似变量声明没有使用之类的错误抛出是可以接受的,像这2个空格之类的抛错真的有必要吗?当然,这类工具可以自己配置,只是感觉默认值很瓜。

看下页面,先看下PC下的显示,所有元素的间距大小都很大。切换到iphone 6的环境下,这时就是正常的间距。上面配置的375一倍像素,这时默认的设计。vw是根据浏览器视口宽度进行计算的单位,在pc环境下,浏览器视口变大所有元素也会随着发生变化。LOGO没有设置大小,所以一直保持这个尺寸。

试着改变浏览器大小,这时这些元素也会随之变化,这样就无需JS去监听resize事件。这时它的好处,也算得上是缺点:它是根据视窗发生变化的,所以移动端和PC端必须分开。使用rem可以设置一个峰值,当监听到视窗宽度达到峰值就按一倍像素展示不再缩放,vw则不能。

小到iPhone 5,大到iPad,效果都还不错,可以下一步了。

网络请求

## 拦截封装 ##

网络请求是一个必然,我准备使用axios,这个库使用的ES6语法,就很棒。

# 安装axios
npm i -D axios

在src下新建一个apis的目录,做一个简单的拦截封装。这个封装我在别的项目用过,数据请求都没问题,由于这个项目缺少后端接口的环节,因此暂且只是一个普通的封装。

// 封装拦截 http.js
import axios from 'axios'

// 默认参数根据情况配置
// 接口地址环境变量 process.env.VUE_APP_HOST
axios.defaults.baseURL = process.env.VUE_APP_HOST
axios.defaults.timeout = 10000
axios.defaults['Content-type'] = 'application/json;charset=UTF-8'

axios.interceptors.request.use(config => {
  // 参数处理
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  // 响应处理
  return response
}, error => {
  // 错误处理
  return Promise.reject(error)
})

// 请求封装
export function request(url, method = 'get', params = {}) {
  params = /(get)|(delete)|(head)/ig.test(method) ? { params } : params
  return axios[method](url, params)
}

export default axios
// 具体接口文件 api.js
// 可以根据业务需求分模块编写,按需引入
import { request } from './http'

export const getImgCode = params => request('/utils/public/yzm/get', 'post', params)

按照我的做法,在http.js拦截的时候会统一进行错误处理。为了防止多次点击按钮触发请求,会在请求开始使用模态loading防止多次触发请求。我并没有完全拦截错误,封装保持错误的返回,因为有时需要在错误里做后续操作。Promise在catch之后再将同一个错误抛出,在最后还需要catch一次。

暂且做这样的封装,在开始做接口之后,这个封装会改为async/await语法来封装,整个封装结构再重新考虑,这是后话。

## 跨域请求 ##

接口开发和前端开发所在的网络必然会造成跨域问题,这个问题可以通过服务器允许跨域来处理。此外,还可以通过本地的代理来处理这个问题,配置一下vue.config.js。

devServer: {
  proxy: {
    "/api": {
      target: process.env.VUE_APP_PROXY,
      changeOrigin: true,
      ws: true,
      pathRewrite: {
        "^/api": ''
      }
    }
  }
}

接口地址被代理,那么http.js中的baseURL对应的地址是/api。通常码好http.js、vue.config.js这类文件,在其他项目中几乎可以直接使用,所以,我将这两个文件对应的地址改为了环境变量process.env.VUE_APP_HOST、process.env.VUE_APP_PROXY,以后只需修改环境变量就可以了。

在项目根目录,新建三个文件,它们分别代表三个环境,development、production是vue默认的开发环境和生产环境。事实上,至少还需要一个环境,测试版的生产环境。总不可能在本地开发完了就直接打包进生产环境,于是需要先打包上测试服务器,测试完成再部署生产环境。这个环境我用的debug来标识,三个文件分别是:.env.development、.env.production和.env.debug。值得一提的是:这个文件是按文本读取,它的值是字符串类型。

NODE_ENV=development
VUE_APP_HOST=/api
NODE_ENV=production
VUE_APP_HOST=https://www.production.com
NODE_ENV=production
VUE_APP_HOST=https://www.debug.com

关于环境变量官方文档说得很详细,我就不做赘述。环境变量配置好了,给测试服务器打包,还需要在package.json里面增加一个脚本。因为它和build执行的是同一编译环境,增加一个参数就好了:

"debug": "vue-cli-service build --mode debug"

这个debug环境可以增加一些其他处理,比如打包的时候分析包的占比,这在后面打包的时候会提到。

前期工作

## 样式重置 ##

在开始页面编写之前我们通常需要重置html元素的默认样式。为了统一样式,还需要申明一些变量来进行控制颜色、字体大小等等,这是全局的。更多的样式是精确到组件,但是主体的标准是来自全局,从而形成自己的UI库。除此之外还会有公共样式,比如1px边线的处理,文字溢出处理等等。

在技术选型的时候,我没有提到动态语言的选择,用哪种语言并不影响最后的代码。这部分无需多言,根据自己的喜好进行就好了。

## svg图标 ##

我不主张使用字体图标,这是一个庞大的资源。我在首页引入了vant的tabbar组件,5个图标,有时会出现方格状态(资源未加载完的情况)。字体图标最大的好处,我认为就是它能像字体一样进行大小控制,有得必有失嘛。为了图标在放大缩小的时候不失真,我选择使用字体图标。

作为图标必然会在很多地方使用,所以在components编写一个组件SvgIcon.vue。

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      return `svg-icon ${this.className}`
    }
  }
}
</script>

<style scoped lang="scss">
.svg-icon {
  display: block;
  min-width: 1em;
  fill: currentColor;
  overflow: hidden;
}
</style>

这个组件有两个属性:svg的名字及样式名。样式.svg-icon的fill目的是让svg图标颜色与字体颜色一致,属性里的样式名用于组件自定义样式。值得注意的是,svg文件源码写有fill属性且有颜色值无法修改图标颜色,需要去掉这个属性,或者修改fill=“currentColor” ,或者修改fill=""。

在src下新建一个目录icons,再在这个目录下新建一个目录svg和index.js文件。svg目录存放svg文件,index.js用于加载所有的svg。这不是必要的,可以按需引入SvgIcon组件即可。

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'

Vue.component('svg-icon', SvgIcon)

const create = ctx => ctx.keys().map(ctx)
create(require.context('./svg', false, /\.svg$/))

在main.js中引入icons。如果package.js中没有配置入口文件,默认是index这个文件,因此直接引入目录icons即可;如果配置有入口文件,那么编译时会先去找这个文件。写全路径本身肯定不会有问题。

import '@/icons'

vue内部原本是有svg这个规则,它不太能满足需求,改用svg-sprite-loader。

# 安装svg-sprite-loader
npm i --save-dev svg-sprite-loader

在vue.config.js中进行相关配置:

// 引入path
const path = require('path')

// 修改chainWebpack
chainWebpack: config => {
  // 清除默认svg规则改为svg-sprite-loader
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule.exclude.add(/node_modules/)
  svgRule.test(/\.svg$/).use('svg-sprite-loader').loader('svg-sprite-loader').options({
    symbolId: 'icon-[name]'
  }).end()

  // 修改images规则
  const imagesRule = config.module.rule('images')
  imagesRule.exclude.add(path.join(__dirname, 'src/icons'))
  config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).end()
}

配置完成,在页面上引入:

<svg-icon iconClass="history" className="icon"></svg-icon>

最后

截止到目前,准备工作算是完成,可以开始逻辑代码的编写啦。水平有限,能力一般,有什么不对的地方,欢迎大家不吝赐教。

## 代码仓库 ##

https://gitee.com/IanLew/tree-hole.git

## @树洞系列 ##

vue项目实践@树洞(一)

vue项目实践@树洞(二)

vue项目实践@树洞(三)

© 著作权归作者所有

Ian_lew
粉丝 17
博文 15
码字总数 38993
作品 2
成都
前端工程师
私信 提问
前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

一、前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客。国际化应该都不陌生,就是一个网站、应用可以实现语言的切换。 在这就不谈原理,只说说如何实现中英文的切换。做技术的总...

飞翔的熊blabla
01/15
0
0
Vue + Spring Boot 项目实战(二):使用 CLI 搭建 Vue.js 项目

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/NeufSoleil/article/details/88926242 本篇目录 前言 从这篇文章开始...

Evan-Nightly
04/02
0
0
深入浅出 - vue之深入响应式原理

高质量文章 谈,前端框架的『御剑之道』 2018你应该知道的Web性能信息采集指南 嗨,送你一张Web性能优化地图 为什么Vue使用异步更新队列? 聊聊我对现代前端框架的认知 深入浅出 - vue变化侦...

大灰狼的小绵羊哥哥
2018/11/18
0
0
「Vue实践」项目升级vue-cli3的正确姿势

一. 原以为升级vue-cli3的路线是这样的: 创建vue-cli3项目,按原有项目的配置选好各项配置 迁移目录 对比新旧 ,然后,完毕。 然鹅... 运行项目,报错: 然后去查了下旧项目的相关字眼文件:...

前端劝退师
01/27
0
0
使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

初学者的优化
2018/06/24
183
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
19分钟前
4
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
22分钟前
3
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
48分钟前
3
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
7
0
前端技术之:webpack热模块替换(HMR)

第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware 第二步:webpack配置中引入webpack对象 const webpack = require('webpack’); 第三步:增加devServer配置项: ho......

popgis
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部