公司網(wǎng)站建設(shè)web開(kāi)發(fā)要注意的問(wèn)題
2022-05-02 分類： 網(wǎng)站建設(shè)
1.inline-block總會(huì)有間隙
在網(wǎng)站建設(shè)前端布局的時(shí)候經(jīng)常會(huì)有對(duì)齊的需要，inline可以用來(lái)對(duì)齊行級(jí)元素，而如果要對(duì)齊塊級(jí)元素就要用到inline-block了，但是用了inline-block會(huì)發(fā)現(xiàn)的確對(duì)齊了，但是塊與塊之間總會(huì)有間隙，這是因?yàn)閮?nèi)聯(lián)及內(nèi)聯(lián)塊元素之間在HTML中寫(xiě)的換行或者空格會(huì)被解析
，那么怎么解決這個(gè)問(wèn)題呢？
一種方法是不寫(xiě)換行或空格,就是把標(biāo)簽全放在一起，不過(guò)這樣擠在一塊不利于讀代碼。
還有就是在父元素里把font-size設(shè)置為0px，這樣就算有空格也會(huì)被解析為0的大小，也就消除了空格了。
2.float導(dǎo)致塊坍塌
前端布局對(duì)齊也可以使用float，但是這樣做會(huì)導(dǎo)致被作用塊不占高度(相當(dāng)于不存在，脫離了文檔流，但是會(huì)顯示)，前面的塊不
占高度后面跟著的不需要對(duì)齊的塊就可能會(huì)和前面的塊擠在一起（各種異常），float很好用，但是怎么才能避免塊坍塌呢？
在結(jié)束float的塊后面加一個(gè)寬高都為0的塊，并設(shè)置樣式為clear:both;就像在浮動(dòng)不占空間的塊下面加了一個(gè)隔板(我也不知道怎么解釋，但是很管用)
在使用float的塊的父級(jí)塊中設(shè)置樣式overflow:hidden；這個(gè)樣式的意思是超出父級(jí)元素大小的部分不顯示，能夠解決坍塌可能是因?yàn)閒loat塊寬度原因。
使用after偽對(duì)象，這個(gè)沒(méi)用過(guò)，但是感覺(jué)原理就和第一個(gè)一樣。
3.position:absolute位置到底相對(duì)于誰(shuí)？
前端布局有的時(shí)候需要精確控制元素位置，比如讓元素居中，常用的對(duì)于塊級(jí)元素居中方法是
margin:0
auto;
position:absolute; left:50%; margin-left:-'元素寬度';(一開(kāi)始不知道m(xù)argin還可以為負(fù)，這樣用感覺(jué)很妙)
但是用絕對(duì)定位的時(shí)候總是會(huì)有
莫名奇妙的問(wèn)題，有的時(shí)候位置是相對(duì)于body，有的時(shí)候只是相對(duì)于父級(jí)，到底相對(duì)于誰(shuí)呢？
總結(jié)下，absolute的定位應(yīng)該是相對(duì)于同樣使用了
absolute的父元素，如果沒(méi)有這樣的父元素那就是相對(duì)于整個(gè)body，所以如果要用absolute又要相對(duì)于父元素調(diào)整位置，那么只需要給父元素也
加上一個(gè)absolute就可以了，（而且如果只設(shè)置樣式position:absolute;不設(shè)置top和left等定位屬性，那么元素的位置仍然是原來(lái)的位置，如果設(shè)
置了left而不設(shè)置top，那么元素的left應(yīng)該遵循上面的規(guī)則，而top位置還是在原地，總而言之就是，絕對(duì)定位的元素不設(shè)置水平邊距或者垂直邊
距的時(shí)候，位置仍然是原來(lái)的水平位置或者垂直位置。）
4.webpack打包圖片資源路徑問(wèn)題
使用webpack打包的時(shí)候，對(duì)于圖片資源需要用url-loader處理，否則打包過(guò)后的路徑仍然是相對(duì)于原來(lái)文件的
而對(duì)于js中url應(yīng)該用require引用，否則不會(huì)被webpack打包，我就是在這被坑的，打包幾遍都沒(méi)用
web開(kāi)發(fā)前段的構(gòu)建問(wèn)題；
1，如何在 head 里面引入 js 文件?
背景: 在 <head> 標(biāo)簽中，以 inline 的形式引入 flexible.js 文件
移動(dòng)端項(xiàng)目可以引入 flexible.js 來(lái)實(shí)現(xiàn)移動(dòng)端適配
Nuxt.js 通過(guò) vue-meta 實(shí)現(xiàn)頭部標(biāo)簽管理
通過(guò)查看文檔發(fā)現(xiàn)，可以按照如下方式配置：
// nuxt.config.js
head: {
script: [
{
innerHTML: 'console.log("hello")',
type: 'text/javascript',
charset: 'utf-8'
}
]
}
結(jié)果，生成 html 如下:
<script
data-n-head="true"
type="text/javascript"
charset="utf-8">
console.log("hello")
</script>
發(fā)現(xiàn) vue-meta 把引號(hào)做了轉(zhuǎn)義處理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不會(huì)再對(duì)這些字符做轉(zhuǎn)義了。
注釋：該字段使用需慎重！
接下來(lái)，要把 console.log("hello") 的內(nèi)容替換成 flexible.js，配置升級(jí)之后如下：
head: {
script: [
{
innerHTML: require('./assets/js/flexible'),
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
}
踩坑成功，下一個(gè)坑...
2，如何預(yù)處理器?
背景：在組件中的 <template>、<script> 或 <style> 上使用各種預(yù)處理器
加上處理器后，控制臺(tái)報(bào)錯(cuò)
<style lang="sass">
.red
color: red
</style>
這個(gè)問(wèn)題解決方法非常簡(jiǎn)單，只需要安裝這些依賴就好：
npm install --save-dev node-sass sass-loader
但是解決過(guò)程并不是很順利的，在閱讀中文文檔時(shí)，忽略版本號(hào)，按照上面的提示進(jìn)行操作，發(fā)現(xiàn)不能成功，最后發(fā)現(xiàn)了該解決方案。
中文文檔的版本號(hào)過(guò)低，如需查看文檔，一定要看最新版本的英文文檔！
3，如何使用 px2rem?
背景：在 css 中，寫(xiě)入 px，通過(guò) px2rem loader 將 px 轉(zhuǎn)換成 rem
在以前的項(xiàng)目中，是通過(guò) px2rem loader 實(shí)現(xiàn)的，但是在 Nuxt.js 項(xiàng)目下，添加 css loader 還是很費(fèi)力的，因?yàn)樯婕暗?vue-loader。
想到了一個(gè)其他方案：
可以使用 postcss 處理。可以在 nuxt.config.js 文件中添加配置，也可以在postcss.conf.js 文件中添加。
build: {
postcss: [
require('postcss-px2rem')({
remUnit: 75 // 轉(zhuǎn)換基本單位
})
]
},
4，如何拓展 webpack 配置?
背景：給 utils 目錄添加 alias
剛剛說(shuō)到，Nuxt.js 內(nèi)置了 webpack 配置
如果要拓展配置，在 nuxt.config.js 文件中添加。
同時(shí)也可以在該文件中，將配置信息打印出來(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?
背景：封裝了一個(gè) toast vue plugin
由于 vue 實(shí)例化的過(guò)程沒(méi)有暴露出來(lái)，在哪個(gè)時(shí)機(jī)注入進(jìn)去呢？
可以在 nuxt.config.js 中添加 plugins 配置，這樣插件就會(huì)在 Nuxt.js 應(yīng)用初始化之前被加載導(dǎo)入。
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，如何修改環(huán)境變量 NODE_ENV?
背景：在項(xiàng)目中，設(shè)置 3 個(gè) NODE_ENV 的值，來(lái)對(duì)應(yīng)不同的版本。
development，本地開(kāi)發(fā)；release，預(yù)發(fā)布版本；production，線上版本。
其中，預(yù)發(fā)布版本比 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 的源碼中，找到了答案：
在執(zhí)行 backpack build 命令時(shí)，會(huì)把 process.env.NODE_ENV 修改為 production，并且是寫(xiě)死的不可配置的...... （重寫(xiě) backpack，恩~）
注意：lerna 來(lái)管理還是一個(gè)值得關(guān)注的工具
無(wú)奈下，只能在 process.env 下，添加 __ENV 屬性，代表 NODE_ENV
640?wx_fmt=png
這時(shí)，在頁(yè)面中打印出來(lái)的信息 process.env.__ENV undefined，但是可以打印出 process.env.NODE_ENV。
可以通過(guò)配置 nuxt.config.js 中的，env 屬性，解決該問(wèn)題：
env: {
__ENV: process.env.__ENV
在網(wǎng)站建設(shè)前端布局的時(shí)候經(jīng)常會(huì)有對(duì)齊的需要，inline可以用來(lái)對(duì)齊行級(jí)元素，而如果要對(duì)齊塊級(jí)元素就要用到inline-block了，但是用了inline-block會(huì)發(fā)現(xiàn)的確對(duì)齊了，但是塊與塊之間總會(huì)有間隙，這是因?yàn)閮?nèi)聯(lián)及內(nèi)聯(lián)塊元素之間在HTML中寫(xiě)的換行或者空格會(huì)被解析
，那么怎么解決這個(gè)問(wèn)題呢？
一種方法是不寫(xiě)換行或空格,就是把標(biāo)簽全放在一起，不過(guò)這樣擠在一塊不利于讀代碼。
還有就是在父元素里把font-size設(shè)置為0px，這樣就算有空格也會(huì)被解析為0的大小，也就消除了空格了。
2.float導(dǎo)致塊坍塌
前端布局對(duì)齊也可以使用float，但是這樣做會(huì)導(dǎo)致被作用塊不占高度(相當(dāng)于不存在，脫離了文檔流，但是會(huì)顯示)，前面的塊不
占高度后面跟著的不需要對(duì)齊的塊就可能會(huì)和前面的塊擠在一起（各種異常），float很好用，但是怎么才能避免塊坍塌呢？
在結(jié)束float的塊后面加一個(gè)寬高都為0的塊，并設(shè)置樣式為clear:both;就像在浮動(dòng)不占空間的塊下面加了一個(gè)隔板(我也不知道怎么解釋，但是很管用)
在使用float的塊的父級(jí)塊中設(shè)置樣式overflow:hidden；這個(gè)樣式的意思是超出父級(jí)元素大小的部分不顯示，能夠解決坍塌可能是因?yàn)閒loat塊寬度原因。
使用after偽對(duì)象，這個(gè)沒(méi)用過(guò)，但是感覺(jué)原理就和第一個(gè)一樣。
3.position:absolute位置到底相對(duì)于誰(shuí)？
前端布局有的時(shí)候需要精確控制元素位置，比如讓元素居中，常用的對(duì)于塊級(jí)元素居中方法是
margin:0
auto;
position:absolute; left:50%; margin-left:-'元素寬度';(一開(kāi)始不知道m(xù)argin還可以為負(fù)，這樣用感覺(jué)很妙)
但是用絕對(duì)定位的時(shí)候總是會(huì)有
莫名奇妙的問(wèn)題，有的時(shí)候位置是相對(duì)于body，有的時(shí)候只是相對(duì)于父級(jí)，到底相對(duì)于誰(shuí)呢？
總結(jié)下，absolute的定位應(yīng)該是相對(duì)于同樣使用了
absolute的父元素，如果沒(méi)有這樣的父元素那就是相對(duì)于整個(gè)body，所以如果要用absolute又要相對(duì)于父元素調(diào)整位置，那么只需要給父元素也
加上一個(gè)absolute就可以了，（而且如果只設(shè)置樣式position:absolute;不設(shè)置top和left等定位屬性，那么元素的位置仍然是原來(lái)的位置，如果設(shè)
置了left而不設(shè)置top，那么元素的left應(yīng)該遵循上面的規(guī)則，而top位置還是在原地，總而言之就是，絕對(duì)定位的元素不設(shè)置水平邊距或者垂直邊
距的時(shí)候，位置仍然是原來(lái)的水平位置或者垂直位置。）
4.webpack打包圖片資源路徑問(wèn)題
使用webpack打包的時(shí)候，對(duì)于圖片資源需要用url-loader處理，否則打包過(guò)后的路徑仍然是相對(duì)于原來(lái)文件的
而對(duì)于js中url應(yīng)該用require引用，否則不會(huì)被webpack打包，我就是在這被坑的，打包幾遍都沒(méi)用
web開(kāi)發(fā)前段的構(gòu)建問(wèn)題；
1，如何在 head 里面引入 js 文件?
背景: 在 <head> 標(biāo)簽中，以 inline 的形式引入 flexible.js 文件
移動(dòng)端項(xiàng)目可以引入 flexible.js 來(lái)實(shí)現(xiàn)移動(dòng)端適配
Nuxt.js 通過(guò) vue-meta 實(shí)現(xiàn)頭部標(biāo)簽管理
通過(guò)查看文檔發(fā)現(xiàn)，可以按照如下方式配置：
// nuxt.config.js
head: {
script: [
{
innerHTML: 'console.log("hello")',
type: 'text/javascript',
charset: 'utf-8'
}
]
}
結(jié)果，生成 html 如下:
<script
data-n-head="true"
type="text/javascript"
charset="utf-8">
console.log("hello")
</script>
發(fā)現(xiàn) vue-meta 把引號(hào)做了轉(zhuǎn)義處理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不會(huì)再對(duì)這些字符做轉(zhuǎn)義了。
注釋：該字段使用需慎重！
接下來(lái)，要把 console.log("hello") 的內(nèi)容替換成 flexible.js，配置升級(jí)之后如下：
head: {
script: [
{
innerHTML: require('./assets/js/flexible'),
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
}
踩坑成功，下一個(gè)坑...
2，如何預(yù)處理器?
背景：在組件中的 <template>、<script> 或 <style> 上使用各種預(yù)處理器
加上處理器后，控制臺(tái)報(bào)錯(cuò)
<style lang="sass">
.red
color: red
</style>
這個(gè)問(wèn)題解決方法非常簡(jiǎn)單，只需要安裝這些依賴就好：
npm install --save-dev node-sass sass-loader
但是解決過(guò)程并不是很順利的，在閱讀中文文檔時(shí)，忽略版本號(hào)，按照上面的提示進(jìn)行操作，發(fā)現(xiàn)不能成功，最后發(fā)現(xiàn)了該解決方案。
中文文檔的版本號(hào)過(guò)低，如需查看文檔，一定要看最新版本的英文文檔！
3，如何使用 px2rem?
背景：在 css 中，寫(xiě)入 px，通過(guò) px2rem loader 將 px 轉(zhuǎn)換成 rem
在以前的項(xiàng)目中，是通過(guò) px2rem loader 實(shí)現(xiàn)的，但是在 Nuxt.js 項(xiàng)目下，添加 css loader 還是很費(fèi)力的，因?yàn)樯婕暗?vue-loader。
想到了一個(gè)其他方案：
可以使用 postcss 處理。可以在 nuxt.config.js 文件中添加配置，也可以在postcss.conf.js 文件中添加。
build: {
postcss: [
require('postcss-px2rem')({
remUnit: 75 // 轉(zhuǎn)換基本單位
})
]
},
4，如何拓展 webpack 配置?
背景：給 utils 目錄添加 alias
剛剛說(shuō)到，Nuxt.js 內(nèi)置了 webpack 配置
如果要拓展配置，在 nuxt.config.js 文件中添加。
同時(shí)也可以在該文件中，將配置信息打印出來(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?
背景：封裝了一個(gè) toast vue plugin
由于 vue 實(shí)例化的過(guò)程沒(méi)有暴露出來(lái)，在哪個(gè)時(shí)機(jī)注入進(jìn)去呢？
可以在 nuxt.config.js 中添加 plugins 配置，這樣插件就會(huì)在 Nuxt.js 應(yīng)用初始化之前被加載導(dǎo)入。
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，如何修改環(huán)境變量 NODE_ENV?
背景：在項(xiàng)目中，設(shè)置 3 個(gè) NODE_ENV 的值，來(lái)對(duì)應(yīng)不同的版本。
development，本地開(kāi)發(fā)；release，預(yù)發(fā)布版本；production，線上版本。
其中，預(yù)發(fā)布版本比 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 的源碼中，找到了答案：
在執(zhí)行 backpack build 命令時(shí)，會(huì)把 process.env.NODE_ENV 修改為 production，并且是寫(xiě)死的不可配置的...... （重寫(xiě) backpack，恩~）
注意：lerna 來(lái)管理還是一個(gè)值得關(guān)注的工具
無(wú)奈下，只能在 process.env 下，添加 __ENV 屬性，代表 NODE_ENV
640?wx_fmt=png
這時(shí)，在頁(yè)面中打印出來(lái)的信息 process.env.__ENV undefined，但是可以打印出 process.env.NODE_ENV。
可以通過(guò)配置 nuxt.config.js 中的，env 屬性，解決該問(wèn)題：
env: {
__ENV: process.env.__ENV
分享名稱：公司網(wǎng)站建設(shè)web開(kāi)發(fā)要注意的問(wèn)題
URL網(wǎng)址：http://chinadenli.net/news6/149056.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 善從營(yíng)銷(xiāo)角度思考網(wǎng)站建設(shè)工作即可事半功倍 2022-05-02
- 什么是高端網(wǎng)站建設(shè)?有什么特點(diǎn) 2022-05-02
- 網(wǎng)站建設(shè)-企業(yè)網(wǎng)站建設(shè)流程及建站注意要點(diǎn)分析 2022-05-02
- 網(wǎng)站建設(shè)公司為何越來(lái)越推薦響應(yīng)式網(wǎng)站？ 2022-05-02
- 企業(yè)網(wǎng)站建設(shè)電子商務(wù)網(wǎng)站安全威脅 2022-05-02
- 專業(yè)博物館網(wǎng)站建設(shè)的欄目分析 2022-05-02
- 專業(yè)網(wǎng)站建設(shè)需要注意的方面 2022-05-02
- 歡樂(lè)谷網(wǎng)站建設(shè)公司 2022-05-02
- 企業(yè)網(wǎng)站建設(shè)同類色配色應(yīng)用 2022-05-02
- 【網(wǎng)站建設(shè)】手機(jī)網(wǎng)站建設(shè)需要注意的細(xì)節(jié)建設(shè)內(nèi)容有哪些? 2022-05-02
- 高端網(wǎng)站建設(shè)需要如何打造才有新意 2022-05-02
- 【網(wǎng)站建設(shè)】什么樣的網(wǎng)站設(shè)計(jì)更加符合大眾的需求和審美? 2022-05-02
- 攀枝花網(wǎng)站建設(shè)之如何寫(xiě)網(wǎng)站策劃書(shū)？ 2022-05-02
- 貴州省政府網(wǎng)站建設(shè)和管理水平日益提升 2022-05-02
- 【網(wǎng)站建設(shè)】移動(dòng)端網(wǎng)站要怎么設(shè)計(jì)才更符合SEO優(yōu)化? 2022-05-02
- 網(wǎng)站建設(shè)需要注意的五點(diǎn)因素 2022-05-02
- 外貿(mào)網(wǎng)站建設(shè)要滿足國(guó)外人的喜好才是好網(wǎng)站 2022-05-02
- 完整的企業(yè)網(wǎng)站建設(shè)開(kāi)發(fā)流程解決方案 2022-05-02
- 創(chuàng)新互聯(lián)小編淺談網(wǎng)站建設(shè)領(lǐng)域的發(fā)展趨勢(shì) 2022-05-02