您需要AI互联网
顾问提供专业咨询
AI人工智能 · VR · AR · 智慧博物馆 · 智慧公园 · 景区 · 文创 · 动画 · 游戏 · 年度运营
大模型定制 · WEB3 · 元宇宙 · 区块链 · 高端网站建设 · 小程序 · APP · 微信 · H5 · 电商
公司网站建设web开发要注意的问题
2019.04.27

1.inline-block总会有间隙

在网站建设前端布局的时候经常会有对齐的需要,inline可以用来对齐行级元素,而如果要对齐块级元素就要用到inline-block了,但是用了inline-block会发现的确对齐了,但是块与块之间总会有间隙,这是因为内联及内联块元素之间在HTML中写的换行或者空格会被解析

,那么怎么解决这个问题呢?

一种方法是不写换行或空格,就是把标签全放在一起,不过这样挤在一块不利于读代码。

还有就是在父元素里把font-size设置为0px,这样就算有空格也会被解析为0的大小,也就消除了空格了。

2.float导致块坍塌
前端布局对齐也可以使用float,但是这样做会导致被作用块不占高度(相当于不存在,脱离了文档流,但是会显示),前面的块不

占高度后面跟着的不需要对齐的块就可能会和前面的块挤在一起(各种异常),float很好用,但是怎么才能避免块坍塌呢?

在结束float的块后面加一个宽高都为0的块,并设置样式为clear:both;就像在浮动不占空间的块下面加了一个隔板(我也不知道怎么解释,但是很管用)

在使用float的块的父级块中设置样式overflow:hidden;这个样式的意思是超出父级元素大小的部分不显示,能够解决坍塌可能是因为float块宽度原因。

使用after伪对象,这个没用过,但是感觉原理就和第一个一样。



3.position:absolute位置到底相对于谁?
前端布局有的时候需要精确控制元素位置,比如让元素居中,常用的对于块级元素居中方法是

margin:0 

auto;

position:absolute; left:50%; margin-left:-'元素宽度';(一开始不知道margin还可以为负,这样用感觉很妙)

但是用绝对定位的时候总是会有

莫名奇妙的问题,有的时候位置是相对于body,有的时候只是相对于父级,到底相对于谁呢?

总结下,absolute的定位应该是相对于同样使用了

absolute的父元素,如果没有这样的父元素那就是相对于整个body,所以如果要用absolute又要相对于父元素调整位置,那么只需要给父元素也

加上一个absolute就可以了,(而且如果只设置样式position:absolute;不设置top和left等定位属性,那么元素的位置仍然是原来的位置,如果设

置了left而不设置top,那么元素的left应该遵循上面的规则,而top位置还是在原地,总而言之就是,绝对定位的元素不设置水平边距或者垂直边

距的时候,位置仍然是原来的水平位置或者垂直位置。)


4.webpack打包图片资源路径问题
使用webpack打包的时候,对于图片资源需要用url-loader处理,否则打包过后的路径仍然是相对于原来文件的

而对于js中url应该用require引用,否则不会被webpack打包,我就是在这被坑的,打包几遍都没用


web开发前段的构建问题;

1,如何在 head 里面引入 js 文件?
背景: 在 <head> 标签中,以 inline 的形式引入 flexible.js 文件
移动端项目可以引入 flexible.js 来实现移动端适配
Nuxt.js 通过 vue-meta 实现头部标签管理

通过查看文档发现,可以按照如下方式配置:

// nuxt.config.js
head: {  
  script: [
    { 
      innerHTML: 'console.log("hello")', 
      type: 'text/javascript', 
      charset: 'utf-8'
    }
  ]
}
结果,生成 html 如下:

<script 
data-n-head="true" 
type="text/javascript" 
charset="utf-8">
console.log(&quot;hello&quot;)
</script>
发现 vue-meta 把引号做了转义处理,加入 __dangerouslyDisableSanitizers: ['script'] 后,就不会再对这些字符做转义了。

注释:该字段使用需慎重!

接下来,要把 console.log("hello") 的内容替换成 flexible.js,配置升级之后如下:

head: {  
  script: [
   { 
    innerHTML: require('./assets/js/flexible'), 
    type: 'text/javascript', 
    charset: 'utf-8'
   }
  ],
  __dangerouslyDisableSanitizers: ['script']
}
踩坑成功,下一个坑...



2,如何预处理器?
背景:在组件中的 <template>、<script> 或 <style> 上使用各种预处理器
加上处理器后,控制台报错
<style lang="sass">
.red
  color: red
</style>
这个问题解决方法非常简单,只需要安装这些依赖就好:

npm install --save-dev node-sass sass-loader
但是解决过程并不是很顺利的,在阅读中文文档时,忽略版本号,按照上面的提示进行操作,发现不能成功,最后发现了该解决方案。

中文文档的版本号过低,如需查看文档,一定要看最新版本的英文文档!


3,如何使用 px2rem?
背景:在 css 中,写入 px,通过 px2rem loader 将 px 转换成 rem
在以前的项目中,是通过 px2rem loader 实现的,但是在 Nuxt.js 项目下,添加 css loader 还是很费力的,因为涉及到 vue-loader。

想到了一个其他方案:

可以使用 postcss 处理。可以在 nuxt.config.js 文件中添加配置,也可以在postcss.conf.js 文件中添加。

build: {  
  postcss: [    
    require('postcss-px2rem')({
      remUnit: 75 // 转换基本单位
    })
  ]
},


4,如何拓展 webpack 配置?
背景:给 utils 目录添加 alias
刚刚说到,Nuxt.js 内置了 webpack 配置

如果要拓展配置,在 nuxt.config.js 文件中添加。

同时也可以在该文件中,将配置信息打印出来。

extend (config, ctx) {
  console.log('webpack config:', config)  
  if (ctx.isClient) {    
    // 添加 alias 配置
    Object.assign(config.resolve.alias, {      
      'utils': path.resolve(__dirname, 'utils')
    })
  }
}


5,如何添加 vue plugin?
背景:封装了一个 toast vue plugin
由于 vue 实例化的过程没有暴露出来,在哪个时机注入进去呢?
可以在 nuxt.config.js 中添加 plugins 配置,这样插件就会在 Nuxt.js 应用初始化之前被加载导入。

module.exports = {
  plugins: ['~plugins/toast']
}
~plugins/toast.js 文件:

import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'

Vue.use(toast)


6,如何修改环境变量 NODE_ENV?
背景:在项目中,设置 3 个 NODE_ENV 的值,来对应不同的版本。
development,本地开发;release,预发布版本;production,线上版本。
其中,预发布版本比 production 版本,多出 vconsole。
// package.json
"scripts": {  
  "buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",  
  "startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
},
打印 process.env.NODE_ENV 依旧是:production。

在 backpack 的源码中,找到了答案:

在执行 backpack build 命令时,会把 process.env.NODE_ENV 修改为 production,并且是写死的不可配置的...... (重写 backpack,恩~)

注意:lerna 来管理还是一个值得关注的工具

无奈下,只能在 process.env 下,添加 __ENV 属性,代表 NODE_ENV

640?wx_fmt=png

这时,在页面中打印出来的信息 process.env.__ENV undefined,但是可以打印出 process.env.NODE_ENV。

可以通过配置 nuxt.config.js 中的,env 属性,解决该问题:

env: {  
  __ENV: process.env.__ENV


400-6446-365 / 010-64928252 我想要个更针对我需求的方案