公司網站建設web開發要注意的問題
2022-05-02 分類： 網站建設
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("hello")
</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
在網站建設前端布局的時候經常會有對齊的需要，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("hello")
</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
分享名稱：公司網站建設web開發要注意的問題
URL網址：http://m.kartarina.com/news6/149056.html
網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站建設等
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- 善從營銷角度思考網站建設工作即可事半功倍 2022-05-02
- 什么是高端網站建設?有什么特點 2022-05-02
- 網站建設-企業網站建設流程及建站注意要點分析 2022-05-02
- 網站建設公司為何越來越推薦響應式網站？ 2022-05-02
- 企業網站建設電子商務網站安全威脅 2022-05-02
- 專業博物館網站建設的欄目分析 2022-05-02
- 專業網站建設需要注意的方面 2022-05-02
- 歡樂谷網站建設公司 2022-05-02
- 企業網站建設同類色配色應用 2022-05-02
- 【網站建設】手機網站建設需要注意的細節建設內容有哪些? 2022-05-02
- 高端網站建設需要如何打造才有新意 2022-05-02
- 【網站建設】什么樣的網站設計更加符合大眾的需求和審美? 2022-05-02
- 攀枝花網站建設之如何寫網站策劃書？ 2022-05-02
- 貴州省政府網站建設和管理水平日益提升 2022-05-02
- 【網站建設】移動端網站要怎么設計才更符合SEO優化? 2022-05-02
- 網站建設需要注意的五點因素 2022-05-02
- 外貿網站建設要滿足國外人的喜好才是好網站 2022-05-02
- 完整的企業網站建設開發流程解決方案 2022-05-02
- 創新互聯小編淺談網站建設領域的發展趨勢 2022-05-02