VUE踩坑记录（一）

Q1：以前的el挂载点是body；但是在Vue2.0中，是一个名为#app的CSS选择器，template是将会替换挂载元素的模板。（官方：不推荐root实例挂载到或，且所有的挂载元素都会被Vue生成的DOM替换）

Q2：旧版中没有router，先重新建一个不含router的项目开始学习。

Q3 ：ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

Q4：自定义标签

export default {
      name: 'App',
      components: {
     HelloWorld
   }
}

Q5: div里面的代表模板，可以访问到

data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }

中对应的msg

Q6:创建一个组件。
首先创建一个.vue文件，分为template、script、style三部分，export导出一个对象，对vue的各自属性进行定义。
使用时先用import引用，再用components注册，就可以使用该标签

Q7:webpack原理——了解完了简单配置

Q8：设备像素比devicePixelRatio简单介绍

Q9：SVG图标字体制作

Q10: （已弃用sublime，改用vs code）如何在sublime中新建.vue格式的文件
首先安装sublime包插件时出现There are no packages available for installation
ctrl+`打开控制台找原因：Error downloading channel. HTTP error 404 downloading https://packagecontrol.io/channel_v3.json.
找到一个下载地址：https://download.csdn.net/download/ming_221/9944588
然后在sublime设置：preferences->package settings -> package control -> settings-user
添加一条本地渠道（该文件绝对路径）：

"channels":
[

	"/Users/18771/AppData/Roaming/Sublime Text 3/channel_v3.json"

],

核心问题还是……科学上网啊

问题解决，开始安装插件
新建文件模板插件 SublimeTmpl：在安装包的templates中新建vue.tmpl
一个可用模板参见http://www.imooc.com/article/33817?block_id=tuijian_wz
Preferences>Package Settings>SublimeTmpl>Menu中新增vue
vue语法高亮插件 Vue Syntax Highlight: 模板绑定语法高亮
Preferences>Package Settings>SublimeTmpl>Settings -Users中设置

{	
	"vue": {
    	"syntax": "Packages/vue-syntax-highlight/vue.tmLanguage",
    	"extension": "vue" // default_extension
	}
}

但是好像没效果，新版sublime没有文件夹，只有.package文件。也不知道怎么绑定。最后还要手动在右下角选：）
所以，我是不是要换一个编辑器了…
嗯，换了一个VS code装起插件来简直不要太爽，界面也好看，开心地像个二十几岁的孩子…

Q11: 科学上网——已用ss解决

Q12: CSS预编译：stylus，sass, less

Q12:前后端分离，通过ajax请求进行交互；对接之前，前端通过Mock模拟后台数据

Q13: vue-cli生成的webpack配置解析中没有-build/dev-server.js: 新版本的vue已将dev-server.js与webpack.dev.conf.js合并了，上面的操作webpack.dev.conf.js中配置就好了

Q14:VS code快速注释，CTRL+k 然后CTRL+c

Q15: express is not defined :
没有npm install
json-server获取服务器数据只能用get方式，而express支持post方式获取数据。
npm install express –-save
具体含义
但是安装完了之后，package.js中有了包”express”: “^4.16.4”,，可以仍然显示没有定义：
express在4.0之后，需要安装the executable（执行器express-generator）才能执行express命令，npm install express-generator
终端运行npm run dev 编译通过，但是api没有配置成功，发现还是新版本webpack.dev.conf.js请求本地数据的配置的问题：
参见
要添加到devServer中，注意别忘了逗号
在8080调用api显示成功，但是不美观，没有格式化。安装Google插件JSON Viewer,
接口调用成功

Q16: 整体缩进 Ctrl+】

Q17:在static中将css进行reset

Q18: vscode 新建vue模板:user snippets中设置，新建后输入vue按tab键，模板代码就出来了

Q19: 安装 stylus-loader后出现Cannot find module ‘stylus’
原因：需要安装stylus 再安装stylus-loader再进行npm install
解决：重新安装npm install stylus --save-dev npm install stylus-loader --save-dev

Q20:快速复制一行按住Ctrl+Alt+Down，即可以在下面快速复制一行，按住Ctrl+Alt+Up，即可以在上面快速复制一行。

Q20:Flex布局实现三等分

Q21:vue-router实现跳转，router.map is not a function报错
原因：2.0已经没有map和start方法
参考文档
将

let app = Vue.extend(App);
var router = new VueRouter();

router.map({
  '/goods': {
    component: goods
  }
});

替换为

const routes = [
  {path: '/goods', component: goods},
  {path: '/ratings', component: ratings},
  {path: '/seller', component: seller}
];

const router = new VueRouter({
  routes
});

将
router.start(app, '#app');
替换为

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
});

一个用法的实例
编译通过后又出现问题：Failed to resolve directive: link
原因：vue的版本升级后，取消了v-link指定，取而代之的为 router-link。router-link组件支持用户在具有路由功能的应用中点击导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 a标签，可以通过配置 tag 属性生成别的标签。
解决：a v-link=”{path:’/goods’}”商品/a替换为router-link to=”/goods”商品/router-link (markdown转义不会弄，没加标签<>)
总算路由成功！！！

Q22：在webpack中配置alis可以简化路径

Q23:设置默认路由router.go后页面一直刷新
原因：router的设计模式是参考了浏览器的window.history相关API，同history.go, router.go接受的参数应该为Number
解决一：不用router.go ,直接在routes中增加 {path: '/', component: goods},
解决二（更好）：用router.push方法

Q24: CSS预编译语法引用父选择符： &

Q25: 标签最好设置为display：block 扩大可点击范围
&.router-link格式设置不生效
&.active选中标签高亮不生效
原因：选择器有点问题。当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名active-class=”activeClass”
解决：在router-link中加上tag=”li”，通过& > li将其渲染成li标签来选择router-link。在router中全局配置linkActiveClass: ‘active’重命名激活标签，激活时标签通过&.active来选择

Q26:通过stylus的mixin方法实现通用一像素伪类的绝对定位，同时全局定义base根据不同设备缩放（主要是通过调整scaleY使得DPI*缩放=1）
问题：tab-item字体被压扁
原因：border-1px那个方法改变了scaleY压缩了字体。用transform做了个3d坐标轴，然后每个轴都要写上文字节点ul，问题是放在三个平面内的文字会跟各自平面一起被变形和压扁
解决：不用border-1px方法了… “tab border-1px”还原为tab
以后再找解决方法，现在这个不重要，知道保持像素的方法就行

Q27:Vue-resource 实现Ajax请求（vue-resource已经不再是官方推荐的ajax库了，请使用axios）
npm install vue-resource –save
Vue的每个实例在生命周期中有一个钩子函数created。response.body()返回一个json类型的对象,通过api拿到数据后传给组件，组件通过props接收
问题：”TypeError: Cannot read property ‘avatar’ of undefined”
原因：页面进行了渲染和请求接口获取数据，异步进行，所以获取数据没有完成时，页面已经进行渲染，所以第一次报使用未定义变量。
解决：父组件 <:src=”seller.avatar”> 子组件用v-bind: 方法引用
问题：图片无法显示
原因：if (response.erron === ERR_OK) 改成不等号。检查到头都大了：）

Q28:要判断状态码时最好设置为一个常量，便于后续修改