最近在学习vue,碰到一些问题记录下来，有些问题花了很长时间去找答案。顺便记录下来吧。
一.vue基础
1.在vue组件中，template标签下只能有一对根标签.
2.router-view标签默认指向router文件夹下的index.js
3.在组件中：<style scoped lang="stylus"></style>，这里的scoped,会限制该标签中的样式只针对当前组件生效。碰到css样式无法更改的时候，要注意是否为scoped限制。
三.关于axios:
1.在main.js中如下声明使用 import axiosfrom'axios'; Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用参见：axios不支持vue.use()方式声明使用
2.本地访问php等接口出现跨域问题（由于端口号不同等造成）:
解决：在请求的php文件中加入:header("Access-Control-Allow-Origin: *");
*--通配所有，允许任意域名发起的跨域请求
四.webpack相关
1.npm run build运行后的dist文件夹，无法直接运行。
解决：在webpack.prod.conf.js文件中的webpackConfig找到output，添加一项publicPath: './'然后重新打包
2. npm5.4存在bug:
在github的npm上找了很久，发现解决方法。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.配置打包后的文件结构&单独配置CSS相对路径
vue-cli打包后默认的文件结构为：
问题：要去掉static这一层文件夹？
在config>index.js 文件中，有两项默认配置：assetsSubDirectory:'static',assetsPublicPath:'/'。静态文件夹名称为：static, 静态文件夹的路径：根目录。修改这两项为：assetsSubDirectory:' ',assetsPublicPath:'/'。在打包编译，生成的dist文件夹结构就变为：
没完，此时运行编译后的项目css背景地址会报错。在build>utils.js 文件中,ExtractTextWebpackPlugin 提供了一个options.publicPath的API, 可以为css单独配置publicPath。vue-cli此项默认配置为：publicPath:'../../'，即css中的地址需要向上找两层。我们现在去掉了static文件夹，那么我们修改为publicPath:'../'。再次打包编译后css背景地址就可以正常找到。 这里可以参见Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题
五.动态添加dom
需求：点击按钮插入dom模板？
首先想到的是用原生JS,追加html。
var row=' ' , document.getElementById('windsList').innerHTML+=row 。发现追加后的dom,没有被编译，不能使用vue的相关指令。这条路暂时走不通。
Vue文档里面有没有提供相应的方法呢？在找了一些答案后，发现‘vue.extend’ 好像可以解决我的问题。官方文档vue.extend
按照文档里的方法尝试插入dom，发现控制台报错：
大概的意思就是，让我用Runtime + Compiler模式。可是我不想重新建项目，这里找到了答案：Vue 2.0 升（cai）级（keng）之旅 引入Vue的路径改为'vue/dist/vue.js'即可，也就是import vue from 'vue/dist/vue.js'。那么就可以在webpack.config.js中设置别名，然后我们又可以importVuefrom'vue' 了。
CSS相关：
DPR:移动web开发之像素和DPR 移动端适配- dpr浅析
PPI(Pixels Per Inch)：像素密度，所表示的是每英寸所拥有的像素数量。
Iphone各型号(包括最近iphoneX,iphone8)的尺寸和DPR:The Ultimate Guide To iPhone Resolutions:
