新手上路踩坑总结

环境部分

1. 安装loader后，书写less语句 编译报错。
   less-loader版本过高。
   卸载后安装 npm i less-loader@4.1.0 -D
2. module: {rules: []}中配置css-loader规则时，不要忘了排除node_modules中的css文件
   { test: /.css$/,
   use: [“style-loader”, “css-loader”],
   exclude: /node_modules/ },
3. 安装使用样式初始化文件normalize.css
   安装：npm install normalize.css -S
   在main.js引入 import ‘normalize.css/normalize.css’
4. 在main.js中相当于全局引入，使用import 语法 如 import ‘normalize.css/normalize.css’
   在各个组件中属于局部引入，初始样式的文件normalize.css文件在style中要用 @import方式引入，如 @import “normalize.css/normalize.css”;
5. **（这条错误）**webpack是按照文件名进行解析打包的，所以如果不是npm包管理的方式安装的，要引入.css或者.less文件的话，不能引入到main.js文件中，只能引入到.vue中，才能解析，
6. 在main.js中同样可以引入css less文件
7. 引入css文件、less文件时要注意，只能将css文件@import “” 方式导入到less中，再将less文件导入到main.js或.vue文件中，因为使用loader解析时 顺序是 less-loader => css-loader => style-loader ，反之将less导入到css中再引入则不行，因为css文件使用css-loader解析，无法解析less文件的语法。
8. 内联样式的background: url(~assets/marketingheadline/IMG_1674.png) -16px -24px;
9. 关于vue中动态绑定img标签的src属性：
   如果获取的是网络图片的地址，则该地址可以作为字符串被src属性动态绑定，解析成地址；
   如果这个图片在你本地，那么动态绑定的时候需要使用require(’…/’)语法作为src的属性值，可以使用路径的别名
   Vue 爬坑之旅–父组件传入图片路径和路由给子组件
10. js对象中属性名可以使用三元表达式，但是要用[]括起来，被解析成字符串：

let requestData = {                [method === 'POST' ? 'data' : 'params']: param,                method,                url,            }

7. navigator对象 浏览器对象的一个属性，包含浏览器的信息，可以通过navigator.userAgent判断是pc端还是移动端。
8. vuerouter中next()相当于路卡，决定吓一跳路由去哪里，通过参数决定。
9. location.href全部地址 location.hash : “#/insight/fat”
10. a标签的锚点链接使用：点击跳转，会跳转到下个a标签的位置。锚点会改变href值。

<a href="#id2">跳转</a>
<a name="id2"></a> 

11. path和query更搭，name配params，push方法不加/

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

12. transform: tranlateY(,) tranlateY移动，相当于相对定位
13. $store.state.userInfo?.contact 新语法，当没有contact属性时候，不执行后面的语句
14. .class1.class2 选择同时具有两个属性的元素
15. 向子组件传递对象中所有property的v-bind简写形式

post是一个对象
post: {
  id: 1,
  title: 'My Journey with Vue'
}
向blog-post传入post的所有属性
<blog-post v-bind="post"></blog-post>
等价于
<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>
 在blog-post中要这样接收 
 props:['id', 'title']

16. 关于flex布局： align-content属性只适用于侧轴是多行的情况，并且这个属性把侧轴上的多行当作一个整体。align-items用于设置每一个侧轴元素在侧轴的排列方式，每个元素都是一个个体。flex布局中align-items 和align-content的区别
17. 在html原生标签上使用ref，可以更方便的获得这个标签的dom，通过this.$refs.ref值获得dom
18. 匿名函数调用只能通过赋值调用，或立即执行调用
19. #grad {
    background-image: linear-gradient(to bottom right, red , yellow);
    }

sass/scss 使用1
sass/scss 使用2

21. Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
22. vue更新Dom是异步的。在vue中，当改变数据vm.data=“new value”，这个更改的数据并不能立即重新渲染（刷新dom），而是在下一个队列循环中更新。所以当你改变数据，然后立即要基于新dom进行操作，就需要时用nextTick()函数了，用于立即更新dom。比如

1.更新数据:
vm.data="new data"
2.立马要用到这个数据的dom时，要先更新dom:
await this.nextTick()  //Es7语法，注意await只能在async异步函数内使用。nextTick()默认返回一个Promise对象。（但方法外面别忘了加async关键字）
或者
this.$nextTick(function () {   //这样写外面方法不用加async了
	console.log(this.$el.textContent) //3.再操作dom
})
3.再操作dom:
console.log(this.$el.textContent)

23. 在mounted(){}生命周期中可以实时监听窗口变化，window.οnresize=()=>{}
24. created生命周期，props methods data computed watch都完成了。querySelector只能在mounted或者methods中操作。mouted常用作初始化。
25. 谷歌浏览器字体大小在12px以下不生效，思路是采用css缩放解决，目标大一倍的字体： -webkit-text-size-adjust: none;
    -webkit-transform: scale(0.5, 0.5);

.