2019-08-27
1.inline-block總會有間隙
在網站建設前端布局的(de)時候經常會有對齊的(de)需要，inline可(kě)以用來對齊行級元素，而如(rú)果要對齊塊級元素就要用到inline-block了，但是用了inline-block會發現的(de)确對齊了，但是塊與塊之間總會有間隙，這是因為(wèi)內(nèi)聯及內(nèi)聯塊元素之間在HTML中寫的(de)換行或者空格會被解析
，那麽怎麽解決這個問題呢(ne)？
一(yī)種方法是不寫換行或空格,就是把标簽全放在一(yī)起，不過這樣擠在一(yī)塊不利于讀代碼。
還有就是在父元素裏把font-size設置為(wèi)0px，這樣就算有空格也會被解析為(wèi)0的(de)大小，也就消除了空格了。
2.float導緻塊坍塌
前端布局對齊也可(kě)以使用float，但是這樣做(zuò)會導緻被作用塊不占高(gāo)度(相當于不存在，脫離(lí)了文檔流，但是會顯示)，前面的(de)塊不
占高(gāo)度後面跟着的(de)不需要對齊的(de)塊就可(kě)能會和(hé)前面的(de)塊擠在一(yī)起（各種異常），float很好用，但是怎麽才能避免塊坍塌呢(ne)？
在結束float的(de)塊後面加一(yī)個寬高(gāo)都為(wèi)0的(de)塊，并設置樣式為(wèi)clear:both;就像在浮動不占空間的(de)塊下面加了一(yī)個隔闆(我也不知道(dào)怎麽解釋，但是很管用)
在使用float的(de)塊的(de)父級塊中設置樣式overflow:hidden；這個樣式的(de)意思是超出父級元素大小的(de)部分不顯示，能夠解決坍塌可(kě)能是因為(wèi)float塊寬度原因。
使用after僞對象，這個沒用過，但是感覺原理(lǐ)就和(hé)第一(yī)個一(yī)樣。
3.position:absolute位置到底相對于誰？
前端布局有的(de)時候需要精确控制元素位置，比如(rú)讓元素居中，常用的(de)對于塊級元素居中方法是
margin:0
auto;
position:absolute; left:50%; margin-left:-'元素寬度';(一(yī)開始不知道(dào)margin還可(kě)以為(wèi)負，這樣用感覺很妙)
但是用絕對定位的(de)時候總是會有
莫名奇妙的(de)問題，有的(de)時候位置是相對于body，有的(de)時候隻是相對于父級，到底相對于誰呢(ne)？
總結下，absolute的(de)定位應該是相對于同樣使用了
absolute的(de)父元素，如(rú)果沒有這樣的(de)父元素那就是相對于整個body，所以如(rú)果要用absolute又要相對于父元素調整位置，那麽隻需要給父元素也
加上一(yī)個absolute就可(kě)以了，（而且如(rú)果隻設置樣式position:absolute;不設置top和(hé)left等定位屬性，那麽元素的(de)位置仍然是原來的(de)位置，如(rú)果設
置了left而不設置top，那麽元素的(de)left應該遵循上面的(de)規則，而top位置還是在原地(dì)，總而言之就是，絕對定位的(de)元素不設置水平邊距或者垂直邊
距的(de)時候，位置仍然是原來的(de)水平位置或者垂直位置。）
4.webpack打包圖片資源路徑問題
使用webpack打包的(de)時候，對于圖片資源需要用url-loader處理(lǐ)，否則打包過後的(de)路徑仍然是相對于原來文件的(de)
而對于js中url應該用require引用，否則不會被webpack打包，我就是在這被坑的(de)，打包幾遍都沒用
web開發前段的(de)構建問題；
1，如(rú)何在 head 裏面引入 js 文件?
背景: 在 <head> 标簽中，以 inline 的(de)形式引入 flexible.js 文件
移動端項目可(kě)以引入 flexible.js 來實現移動端适配
Nuxt.js 通過 vue-meta 實現頭部标簽管理(lǐ)
通過查看文檔發現，可(kě)以按照如(rú)下方式配置：
// nuxt.config.js
head: {
script: [
{
innerHTML: 'console.log("hello")',
type: 'text/javascript',
charset: 'utf-8'
}
]
}
結果，生成 html 如(rú)下:
<script
data-n-head="true"
type="text/javascript"
charset="utf-8">
console.log("hello")
</script>
發現 vue-meta 把引号做(zuò)了轉義處理(lǐ)，加入 __dangerouslyDisableSanitizers: ['script'] 後，就不會再對這些字符做(zuò)轉義了。
注釋：該字段使用需慎重！
接下來，要把 console.log("hello") 的(de)內(nèi)容替換成 flexible.js，配置升級之後如(rú)下：
head: {
script: [
{
innerHTML: require('./assets/js/flexible'),
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
}
踩坑成功，下一(yī)個坑...
2，如(rú)何預處理(lǐ)器?
背景：在組件中的(de) <template>、<script> 或 <style> 上使用各種預處理(lǐ)器
加上處理(lǐ)器後，控制台報錯
<style>
.red
color: red
</style>
這個問題解決方法非常簡單，隻需要安裝這些依賴就好：
npm install --save-dev node-sass sass-loader
但是解決過程并不是很順利的(de)，在閱讀中文文檔時，忽略版本号，按照上面的(de)提示進行操作，發現不能成功，最後發現了該解決方案。
中文文檔的(de)版本号過低(dī)，如(rú)需查看文檔，一(yī)定要看最新版本的(de)英文文檔！
3，如(rú)何使用 px2rem?
背景：在 css 中，寫入 px，通過 px2rem loader 将 px 轉換成 rem
在以前的(de)項目中，是通過 px2rem loader 實現的(de)，但是在 Nuxt.js 項目下，添加 css loader 還是很費力的(de)，因為(wèi)涉及到 vue-loader。
想到了一(yī)個其他方案：
可(kě)以使用 postcss 處理(lǐ)。可(kě)以在 nuxt.config.js 文件中添加配置，也可(kě)以在postcss.conf.js 文件中添加。
build: {
postcss: [
require('postcss-px2rem')({
remUnit: 75 // 轉換基本單位
})
]
},
4，如(rú)何拓展 webpack 配置?
背景：給 utils 目錄添加 alias
剛剛說到，Nuxt.js 內(nèi)置了 webpack 配置
如(rú)果要拓展配置，在 nuxt.config.js 文件中添加。
同時也可(kě)以在該文件中，将配置信息打印出來。
extend (config, ctx) {
console.log('webpack config:', config)
if (ctx.isClient) {
// 添加 alias 配置
Object.assign(config.resolve.alias, {
'utils': path.resolve(__dirname, 'utils')
})
}
}
5，如(rú)何添加 vue plugin?
背景：封裝了一(yī)個 toast vue plugin
由于 vue 實例化的(de)過程沒有暴露出來，在哪個時機注入進去(qù)呢(ne)？
可(kě)以在 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，如(rú)何修改環境變量 NODE_ENV?
背景：在項目中，設置 3 個 NODE_ENV 的(de)值，來對應不同的(de)版本。
development，本地(dì)開發；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 依舊(jiù)是：production。
在 backpack 的(de)源碼中，找到了答案：
在執行 backpack build 命令時，會把 process.env.NODE_ENV 修改為(wèi) production，并且是寫死的(de)不可(kě)配置的(de)...... （重寫 backpack，恩~）
注意：lerna 來管理(lǐ)還是一(yī)個值得關注的(de)工具
無奈下，隻能在 process.env 下，添加 __ENV 屬性，代表 NODE_ENV
640?wx_fmt=png
這時，在頁面中打印出來的(de)信息 process.env.__ENV undefined，但是可(kě)以打印出 process.env.NODE_ENV。
可(kě)以通過配置 nuxt.config.js 中的(de)，env 屬性，解決該問題：
env: {
__ENV: process.env.__ENV
責任編輯：中山網站建設
【網訊網絡】國(guó)家高(gāo)新技術企業》十年(nián)專注軟件開發，網站建設，網頁設計，APP開發，小程序，微信公衆号開發，定制各類企業管理(lǐ)軟件（OA、CRM、ERP、訂單管理(lǐ)系統、進銷存管理(lǐ)軟件等)！服務熱線：0760-88610046、13924923903，http://www.wansion.net
上一(yī)篇：詳解Android UI設計問題解決辦法
下一(yī)篇：網頁設計的(de)思路與方法
*請認真填寫需求，我們會在24小時內(nèi)與您取得聯系。
