1. 初始化項(xiàng)目
- 在cmd窗口中輸入npx create-nuxt-app nuxt-test，其中nuxt-test是你的項(xiàng)目名稱聂薪。
-
選擇配置
nuxt項(xiàng)目搭建配置 - 安裝完成后，進(jìn)入到nuxt-test項(xiàng)目藏澳，在cmd窗口中輸入npm run dev即可跑項(xiàng)目。
2. 對項(xiàng)目進(jìn)行基礎(chǔ)配置
lib-flexible + postcss-px2rem
lib-flexible：動態(tài)改變html的font-size
npm install lib-flexible --save
postcss-px2rem：將px轉(zhuǎn)換成rem
npm install postcss-px2rem –save
配置nuxt.config.js
- 配置lib-flexible
plugins: [
{
src: './node_modules/lib-flexible/flexible.js',
ssr: false // ssr為true時(shí)是無window對象的翔悠，因此如果需要window對象，需要將ssr設(shè)置為false
}
]
弊端：這樣子引入lib-flexible腻要，會導(dǎo)致頁面元素一開始出現(xiàn)很小的情況复罐，閃爍一下才會恢復(fù)正常效诅。這是因?yàn)镈OM在渲染出來的時(shí)候，flexible生成的font-size還沒有設(shè)置到html里面去趟济。所以解決方法就是在渲染之前，我們就要設(shè)置好根元素的font-size顷编，即將js文件通過外鏈的形式引入到頭部。
在head里加入script
head: {
script: [
{ src: './node_modules/lib-flexible/flexible.js' }
]
}
然而我發(fā)現(xiàn)不管怎么改引入的路徑媳纬，頁面都是報(bào)404，找不到這個js文件，不知道是因?yàn)閔ead里不能引入node_modules里的文件還是我的路徑一直沒引對莺葫，還沒找到原因，記錄一個問題點(diǎn)预明？？撰糠？
最后決定在static文件夾里，把node_modules/lib-flexible/flexible.js文件復(fù)制一份進(jìn)去阅酪，再引入到頭部旨袒。
head: {
script: [
{ src: '/js/flexible.js' }
]
}
至此遮斥，問題解決了扇丛，屏幕也不閃了术吗，接下來就配置postcss-px2rem吧~
build: {
postcss: [
require('postcss-px2rem')({
remUnit: 37.5 // remUnit: 37.5 表示1rem=37.5px
})
]
}
OK较屿，第一部分就先這樣了隧魄，后面就進(jìn)行環(huán)境配置吧隘蝎。
