VUE

最近在学习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打包后默认的文件结构为：

vue-cli打包后默认结构

问题：要去掉static这一层文件夹？

在config>index.js 文件中，有两项默认配置：assetsSubDirectory:'static',assetsPublicPath:'/'。静态文件夹名称为：static, 静态文件夹的路径：根目录。修改这两项为：assetsSubDirectory:' ',assetsPublicPath:'/'。在打包编译，生成的dist文件夹结构就变为：

已经去掉了static文件夹

没完，此时运行编译后的项目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' 了。

设置vue的路径别名

CSS相关：

DPR:移动web开发之像素和DPR   移动端适配- dpr浅析

PPI(Pixels Per Inch)：像素密度，所表示的是每英寸所拥有的像素数量。

Iphone各型号(包括最近iphoneX,iphone8)的尺寸和DPR:The Ultimate Guide To iPhone Resolutions:

截图