網站建設web開(kāi)發要注意哪些事項

2019-08-27

1.inline-block總會有間隙

在網站建設前端布局的時候經常會有對齊的需要,inline可以用來對齊行級元素,而如果要對齊塊級元素就要用到inline-block了,但是用了inline-block會發現的确對齊了,但是塊與塊之間總會有間隙,這是因爲内聯及内聯塊元素之間在HTML中(zhōng)寫的換行或者空格會被解析

,那麽怎麽解決這個問題呢?

一(yī)種方法是不寫換行或空格,就是把标簽全放(fàng)在一(yī)起,不過這樣擠在一(yī)塊不利于讀代碼。

還有就是在父元素裏把font-size設置爲0px,這樣就算有空格也會被解析爲0的大(dà)小(xiǎo),也就消除了空格了。

2.float導緻塊坍塌
前端布局對齊也可以使用float,但是這樣做會導緻被作用塊不占高度(相當于不存在,脫離(lí)了文檔流,但是會顯示),前面的塊不

占高度後面跟着的不需要對齊的塊就可能會和前面的塊擠在一(yī)起(各種異常),float很好用,但是怎麽才能避免塊坍塌呢?

在結束float的塊後面加一(yī)個寬高都爲0的塊,并設置樣式爲clear:both;就像在浮動不占空間的塊下(xià)面加了一(yī)個隔闆(我(wǒ)也不知(zhī)道怎麽解釋,但是很管用)

在使用float的塊的父級塊中(zhōng)設置樣式overflow:hidden;這個樣式的意思是超出父級元素大(dà)小(xiǎo)的部分(fēn)不顯示,能夠解決坍塌可能是因爲float塊寬度原因。

使用after僞對象,這個沒用過,但是感覺原理就和第一(yī)個一(yī)樣。

slide1.jpg

3.position:absolute位置到底相對于誰?
前端布局有的時候需要精确控制元素位置,比如讓元素居中(zhōng),常用的對于塊級元素居中(zhōng)方法是

margin:0

auto;

position:absolute; left:50%; margin-left:-'元素寬度';(一(yī)開(kāi)始不知(zhī)道margin還可以爲負,這樣用感覺很妙)

但是用絕對定位的時候總是會有

莫名奇妙的問題,有的時候位置是相對于body,有的時候隻是相對于父級,到底相對于誰呢?

總結下(xià),absolute的定位應該是相對于同樣使用了

absolute的父元素,如果沒有這樣的父元素那就是相對于整個body,所以如果要用absolute又(yòu)要相對于父元素調整位置,那麽隻需要給父元素也

加上一(yī)個absolute就可以了,(而且如果隻設置樣式position:absolute;不設置top和left等定位屬性,那麽元素的位置仍然是原來的位置,如果設

置了left而不設置top,那麽元素的left應該遵循上面的規則,而top位置還是在原地,總而言之就是,絕對定位的元素不設置水平邊距或者垂直邊

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


4.webpack打包圖片資(zī)源路徑問題
使用webpack打包的時候,對于圖片資(zī)源需要用url-loader處理,否則打包過後的路徑仍然是相對于原來文件的

而對于js中(zhōng)url應該用require引用,否則不會被webpack打包,我(wǒ)就是在這被坑的,打包幾遍都沒用


web開(kāi)發前段的構建問題;

1,如何在 head 裏面引入 js 文件?
背景: 在 <head> 标簽中(zhōng),以 inline 的形式引入 flexible.js 文件
移動端項目可以引入 flexible.js 來實現移動端适配
Nuxt.js 通過 vue-meta 實現頭部标簽管理

通過查看文檔發現,可以按照如下(xià)方式配置:

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

<script
data-n-head="true"
type="text/javascript"
charset="utf-8">
console.log(&quot;hello&quot;)
</script>
發現 vue-meta 把引号做了轉義處理,加入 __dangerouslyDisableSanitizers: ['script'] 後,就不會再對這些字符做轉義了。

注釋:該字段使用需慎重!

接下(xià)來,要把 console.log("hello") 的内容替換成 flexible.js,配置升級之後如下(xià):

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



2,如何預處理器?
背景:在組件中(zhōng)的 <template>、<script> 或 <style> 上使用各種預處理器
加上處理器後,控制台報錯
<style>
.red
  color: red
</style>
這個問題解決方法非常簡單,隻需要安裝這些依賴就好:

npm install --save-dev node-sass sass-loader
但是解決過程并不是很順利的,在閱讀中(zhōng)文文檔時,忽略版本号,按照上面的提示進行操作,發現不能成功,最後發現了該解決方案。

中(zhōng)文文檔的版本号過低,如需查看文檔,一(yī)定要看最新版本的英文文檔!


3,如何使用 px2rem?
背景:在 css 中(zhōng),寫入 px,通過 px2rem loader 将 px 轉換成 rem
在以前的項目中(zhōng),是通過 px2rem loader 實現的,但是在 Nuxt.js 項目下(xià),添加 css loader 還是很費(fèi)力的,因爲涉及到 vue-loader。

想到了一(yī)個其他方案:

可以使用 postcss 處理。可以在 nuxt.config.js 文件中(zhōng)添加配置,也可以在postcss.conf.js 文件中(zhōng)添加。

build: { 
  postcss: [   
    require('postcss-px2rem')({
      remUnit: 75 // 轉換基本單位
    })
  ]
},


4,如何拓展 webpack 配置?
背景:給 utils 目錄添加 alias
剛剛說到,Nuxt.js 内置了 webpack 配置

如果要拓展配置,在 nuxt.config.js 文件中(zhōng)添加。

同時也可以在該文件中(zhōng),将配置信息打印出來。

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?
背景:封裝了一(yī)個 toast vue plugin
由于 vue 實例化的過程沒有暴露出來,在哪個時機注入進去(qù)呢?
可以在 nuxt.config.js 中(zhōng)添加 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?
背景:在項目中(zhōng),設置 3 個 NODE_ENV 的值,來對應不同的版本。
development,本地開(kāi)發;release,預發布版本;production,線上版本。
其中(zhōng),預發布版本比 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 依舊(jiù)是:production。

在 backpack 的源碼中(zhōng),找到了答案:

在執行 backpack build 命令時,會把 process.env.NODE_ENV 修改爲 production,并且是寫死的不可配置的...... (重寫 backpack,恩~)

注意:lerna 來管理還是一(yī)個值得關注的工(gōng)具

無奈下(xià),隻能在 process.env 下(xià),添加 __ENV 屬性,代表 NODE_ENV

640?wx_fmt=png

這時,在頁面中(zhōng)打印出來的信息 process.env.__ENV undefined,但是可以打印出 process.env.NODE_ENV。

可以通過配置 nuxt.config.js 中(zhōng)的,env 屬性,解決該問題:

env: { 
  __ENV: process.env.__ENV

責任編輯:中(zhōng)山網站建設
 【網訊網絡】國家高新技術企業》十年專注軟件開(kāi)發,網站建設,網頁設計,APP開(kāi)發,小(xiǎo)程序,微信公衆号開(kāi)發,定制各類企業管理軟件(OA、CRM、ERP、訂單管理系統、進銷存管理軟件等)!服務熱線:0760-88610046、13924923903,http://www.wansion.net

您的項目需求咨詢熱線:0760-88610046(國家高新技術企業)

*請認真填寫需求,我(wǒ)們會在24小(xiǎo)時内與您取得聯系。