技術知識-網站建設web開發要注意哪些事項 - 中山市派多多網絡科技有限公司|中山網站建設|中山軟件開發|中山做(zuò)網站|中山建網站|APP小程序公衆号開發

網站建設web開發要注意哪些事項

2019-08-27

1.inline-block總會有間隙

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

，那麽怎麽解決這(zhè)個(gè)問題呢(ne)？

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

還(hái)有就是在父元素裏把font-size設置爲0px，這(zhè)樣就算(suàn)有空格也(yě)會被解析爲0的(de)大(dà)小，也(yě)就消除了(le)空格了(le)。

2.float導緻塊坍塌
前端布局對(duì)齊也(yě)可(kě)以使用(yòng)float，但是這(zhè)樣做(zuò)會導緻被作用(yòng)塊不占高(gāo)度(相當于不存在，脫離了(le)文檔流，但是會顯示)，前面的(de)塊不

占高(gāo)度後面跟著(zhe)的(de)不需要對(duì)齊的(de)塊就可(kě)能會和(hé)前面的(de)塊擠在一起（各種異常），float很好用(yòng)，但是怎麽才能避免塊坍塌呢(ne)？

在結束float的(de)塊後面加一個(gè)寬高(gāo)都爲0的(de)塊，并設置樣式爲clear:both;就像在浮動不占空間的(de)塊下(xià)面加了(le)一個(gè)隔闆(我也(yě)不知道怎麽解釋，但是很管用(yòng))

在使用(yòng)float的(de)塊的(de)父級塊中設置樣式overflow:hidden；這(zhè)個(gè)樣式的(de)意思是超出父級元素大(dà)小的(de)部分(fēn)不顯示，能夠解決坍塌可(kě)能是因爲float塊寬度原因。

使用(yòng)after僞對(duì)象，這(zhè)個(gè)沒用(yòng)過，但是感覺原理(lǐ)就和(hé)第一個(gè)一樣。

3.position:absolute位置到底相對(duì)于誰？
前端布局有的(de)時(shí)候需要精确控制元素位置，比如讓元素居中，常用(yòng)的(de)對(duì)于塊級元素居中方法是

margin:0

auto;

position:absolute; left:50%; margin-left:-'元素寬度';(一開始不知道margin還(hái)可(kě)以爲負，這(zhè)樣用(yòng)感覺很妙)

但是用(yòng)絕對(duì)定位的(de)時(shí)候總是會有

莫名奇妙的(de)問題，有的(de)時(shí)候位置是相對(duì)于body，有的(de)時(shí)候隻是相對(duì)于父級，到底相對(duì)于誰呢(ne)？

總結下(xià)，absolute的(de)定位應該是相對(duì)于同樣使用(yòng)了(le)

absolute的(de)父元素，如果沒有這(zhè)樣的(de)父元素那就是相對(duì)于整個(gè)body，所以如果要用(yòng)absolute又要相對(duì)于父元素調整位置，那麽隻需要給父元素也(yě)

加上一個(gè)absolute就可(kě)以了(le)，（而且如果隻設置樣式position:absolute;不設置top和(hé)left等定位屬性，那麽元素的(de)位置仍然是原來(lái)的(de)位置，如果設

置了(le)left而不設置top，那麽元素的(de)left應該遵循上面的(de)規則，而top位置還(hái)是在原地，總而言之就是，絕對(duì)定位的(de)元素不設置水(shuǐ)平邊距或者垂直邊

距的(de)時(shí)候，位置仍然是原來(lái)的(de)水(shuǐ)平位置或者垂直位置。）

4.webpack打包圖片資源路徑問題
使用(yòng)webpack打包的(de)時(shí)候，對(duì)于圖片資源需要用(yòng)url-loader處理(lǐ)，否則打包過後的(de)路徑仍然是相對(duì)于原來(lái)文件的(de)

而對(duì)于js中url應該用(yòng)require引用(yòng)，否則不會被webpack打包，我就是在這(zhè)被坑的(de)，打包幾遍都沒用(yòng)

web開發前段的(de)構建問題；

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

通(tōng)過查看文檔發現，可(kě)以按照(zhào)如下(xià)方式配置：

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

注釋：該字段使用(yòng)需慎重！

接下(xià)來(lái)，要把 console.log("hello") 的(de)内容替換成 flexible.js，配置升級之後如下(xià)：

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

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

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

中文文檔的(de)版本号過低，如需查看文檔，一定要看最新版本的(de)英文文檔！

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

想到了(le)一個(gè)其他(tā)方案：

可(kě)以使用(yòng) postcss 處理(lǐ)。可(kě)以在 nuxt.config.js 文件中添加配置，也(yě)可(kě)以在postcss.conf.js 文件中添加。

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

4，如何拓展 webpack 配置?
背景：給 utils 目錄添加 alias
剛剛說到，Nuxt.js 内置了(le) webpack 配置

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

同時(shí)也(yě)可(kě)以在該文件中，将配置信息打印出來(lái)。

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?
背景：封裝了(le)一個(gè) toast vue plugin
由于 vue 實例化(huà)的(de)過程沒有暴露出來(lái)，在哪個(gè)時(shí)機注入進去呢(ne)？
可(kě)以在 nuxt.config.js 中添加 plugins 配置，這(zhè)樣插件就會在 Nuxt.js 應用(yòng)初始化(huà)之前被加載導入。

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 個(gè) NODE_ENV 的(de)值，來(lái)對(duì)應不同的(de)版本。
development，本地開發；release，預發布版本；production，線上版本。
其中，預發布版本比 production 版本，多(duō)出 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 的(de)源碼中，找到了(le)答(dá)案：

在執行 backpack build 命令時(shí)，會把 process.env.NODE_ENV 修改爲 production，并且是寫死的(de)不可(kě)配置的(de)...... （重寫 backpack，恩~）

注意：lerna 來(lái)管理(lǐ)還(hái)是一個(gè)值得(de)關注的(de)工具

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

640?wx_fmt=png

這(zhè)時(shí)，在頁面中打印出來(lái)的(de)信息 process.env.__ENV undefined，但是可(kě)以打印出 process.env.NODE_ENV。

可(kě)以通(tōng)過配置 nuxt.config.js 中的(de)，env 屬性，解決該問題：

env: {
__ENV: process.env.__ENV

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

上一篇：詳解Android UI設計問題解決辦法

下(xià)一篇：網頁設計的(de)思路與方法

網站建設web開發要注意哪些事項

您的(de)項目需求咨詢熱(rè)線：0760-88610046(國家高(gāo)新技術企業)

服務熱(rè)線