最近在學(xué)習(xí)vue,碰到一些問(wèn)題記錄下來(lái)，有些問(wèn)題花了很長(zhǎng)時(shí)間去找答案。順便記錄下來(lái)吧。
一.vue基礎(chǔ)
1.在vue組件中，template標(biāo)簽下只能有一對(duì)根標(biāo)簽.?
2.router-view標(biāo)簽?zāi)J(rèn)指向router文件夾下的index.js
3.在組件中：<style scoped lang="stylus"></style>，這里的scoped,會(huì)限制該標(biāo)簽中的樣式只針對(duì)當(dāng)前組件生效。碰到css樣式無(wú)法更改的時(shí)候，要注意是否為scoped限制。
三.關(guān)于axios:
1.在main.js中如下聲明使用 import axiosfrom'axios'; Vue.prototype.$axios=axios; 那么在其他vue組件中就可以this.$axios調(diào)用使用參見(jiàn)：axios不支持vue.use()方式聲明使用
2.本地訪問(wèn)php等接口出現(xiàn)跨域問(wèn)題（由于端口號(hào)不同等造成）:
解決：在請(qǐng)求的php文件中加入:header("Access-Control-Allow-Origin: *");
? ? ? ? ? ?*--通配所有，允許任意域名發(fā)起的跨域請(qǐng)求
四.webpack相關(guān)
?1.npm run build運(yùn)行后的dist文件夾，無(wú)法直接運(yùn)行。
解決：在webpack.prod.conf.js文件中的webpackConfig找到output，添加一項(xiàng)publicPath: './'然后重新打包
2. npm5.4存在bug:
在github的npm上找了很久，發(fā)現(xiàn)解決方法。npm5.4存在bug,回滾到5.3或者5.03可以解決：npm install npm@5.0.3 -g 。連接：Error: EPERM: operation not permitted on npm 5.4 on windows #18380
3.配置打包后的文件結(jié)構(gòu)&單獨(dú)配置CSS相對(duì)路徑
vue-cli打包后默認(rèn)的文件結(jié)構(gòu)為：
問(wèn)題：要去掉static這一層文件夾？
在config>index.js 文件中，有兩項(xiàng)默認(rèn)配置：assetsSubDirectory:'static',assetsPublicPath:'/'。靜態(tài)文件夾名稱(chēng)為：static, 靜態(tài)文件夾的路徑：根目錄。修改這兩項(xiàng)為：assetsSubDirectory:' ',assetsPublicPath:'/'。在打包編譯，生成的dist文件夾結(jié)構(gòu)就變?yōu)椋?/p>
沒(méi)完，此時(shí)運(yùn)行編譯后的項(xiàng)目css背景地址會(huì)報(bào)錯(cuò)。在build>utils.js 文件中,ExtractTextWebpackPlugin 提供了一個(gè)options.publicPath的API, 可以為css單獨(dú)配置publicPath。vue-cli此項(xiàng)默認(rèn)配置為：publicPath:'../../'，即css中的地址需要向上找兩層。我們現(xiàn)在去掉了static文件夾，那么我們修改為publicPath:'../'。再次打包編譯后css背景地址就可以正常找到。 這里可以參見(jiàn)Vue-cli 構(gòu)建項(xiàng)目 的`.vue`組件中, scss中添加背景圖路徑問(wèn)題
五.動(dòng)態(tài)添加dom
需求：點(diǎn)擊按鈕插入dom模板？
首先想到的是用原生JS,追加html。
var row='? ' ,? document.getElementById('windsList').innerHTML+=row 。發(fā)現(xiàn)追加后的dom,沒(méi)有被編譯，不能使用vue的相關(guān)指令。這條路暫時(shí)走不通。
Vue文檔里面有沒(méi)有提供相應(yīng)的方法呢？在找了一些答案后，發(fā)現(xiàn)‘vue.extend’? 好像可以解決我的問(wèn)題。官方文檔vue.extend
按照文檔里的方法嘗試插入dom，發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)：
大概的意思就是，讓我用Runtime + Compiler模式?？墒俏也幌胫匦陆?xiàng)目，這里找到了答案：Vue 2.0 升（cai）級(jí)（keng）之旅 ? 引入Vue的路徑改為'vue/dist/vue.js'即可，也就是import vue from 'vue/dist/vue.js'。那么就可以在webpack.config.js中設(shè)置別名，然后我們又可以importVuefrom'vue' 了。
CSS相關(guān)：
DPR:移動(dòng)web開(kāi)發(fā)之像素和DPR? ?移動(dòng)端適配- dpr淺析
PPI(Pixels Per Inch)：像素密度，所表示的是每英寸所擁有的像素?cái)?shù)量。
Iphone各型號(hào)(包括最近iphoneX,iphone8)的尺寸和DPR:The Ultimate Guide To iPhone Resolutions:
