开发者社区-项目重点

1.hash路由模式 & history模式(背诵)​​​​​​https://blog.csdn.net/zj695133626/article/details/121107628

【hash模式】：

• 使用URL的hash来模拟一个完整的URL，其显示的网络路径中会有“#”号。
• hash虽然出现在URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新，也不会有问题。
• hash模式示例：http://localhost:8080/#/home  http://localhost:8080/#/user

【history模式】：

• 美化后的hash模式，路径中不包含“#”。
• 由于改变了地址，刷新时会按照修改后的地址请求后端，需要后端配置处理，地址访问做映射，否则会404。
• history模式示例：http://localhost:8080/home  http://localhost:8080/user。

2.CSS & Less（掌握）https://blog.csdn.net/m0_63779088/article/details/125868421

• Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，使 CSS 更易维护和扩展。
• Less文件需要经过Less预处理器编译成为CSS。

//CSS写法

#header {
  color: black;
}

#header .navigation {
  font-size: 12px;
}

#header .logo {
  width: 300px;
}

//Less写法

#header {
  color: black;
  
  .navigation {
    font-size: 12px;
  }

  .logo {
    width: 300px;
  }
}

3. package.json & package-lock.json（了解）https://blog.csdn.net/qq_34402069/article/details/127638319

【package.json】：

• 是通过[npm init]创建时生成的，package.json文件中会记录项目中所需要的模块。
• 记录的只是每个模块的基本信息、模块名称和大版本信息。

【package-lock.json】：

• 在使用[npm install]的时候会自动生成一个package-lock.json的文件。
• package-lock.json文件则会记录每个模块的详细信息，如模块的具体版本号和各个模块所依赖的子模块的信息。

4.清除内外边距（掌握）https://blog.csdn.net/weixin_51061595/article/details/120522075

* { 
   
   /清除内边距/
   padding:0;
   
   /清除外边距/
   margin:0

}

5.盒子模型（掌握） ​​​​​​https://blog.csdn.net/weixin_44992737/article/details/125217906

1.上面图中橙色方框指的是html元素，也是内容部分context。

   可以是一张图片、一个h1标题、一个表格、一个表单等。

   属性width和height用于修改内容部分的大小。

2.绿色部分，是padding部分，指的是内边距，是元素内容与其最近一层束缚框的距离。 

   类似于在一个方格里写字我们写在方格的中间，而与边框保持一定距离一样。

3.浅橘色部分，也就是border部分，指的是这个边框的宽度。

   我们常见的就是宽度为1，也就是一条线。

4.深橘色部分，也就是margin部分，也叫边缘部分，

   类似于人与人之间保持一定的距离一样，他的作用是保证html元素之间的距离，

   比如网页上的两种图片需要保持一定的间距才显得好看。

6.标准盒模型 & 怪异盒模型（背诵）

标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）；
怪异模式下总宽度=width+margin（左右）（width已经包含了padding和border值）。

7.npm i 下载指令（了解）

1、 -S  等同于--save，保存在package.json文件中，是在dependencies 下。

   --save安装包信息将加入到dependencies（生产环境）中，

   生产阶段的依赖，也就是项目运行时的依赖，就是程序上线后仍然需要依赖。

2、 -D  等同于--save-dev，也保存在package.json文件中，是在devDependencies下。

   --save-dev安装包信息将加入到devDependencies（开发环境）中。

   开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用。

3、 -g  等同于--global的简写，对模块进行全局安装，作用于全局环境下，

  --global安装包信息是指把模块安装到操作系统上，

  一般会安装在AppDataAppData\Roaming\npm目录下。

8.Vue—babel.config.js配置文件（了解）

Babel是一个JS编译器，主要作用是将ECMAScript2015+版本的代码，转换为向后兼容的JS语法，以便能够运行在当前和旧版本的的浏览器或其他环境中。

Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel，将ES6转化为ES5.

9.配置基地址（掌握）

每次调用接口时都需要写上完整的接口地址，但是每个接口前面的地址是相同的，所以我们可以把接口地址中前面相同的部分提取出来设置一下，这样在后面调用接口时就不需要写前面的地址了。
每个接口地址前面相同的部分就是基地址。

<script>

//写法一：
axios.defaults.baseURL = 'http://xxxxx'

//写法二
const request = axios.create({
    baseURL: 'http://xxxxx'
})

</script>

10.css单位区别（px、em、rem、vh、vw） （背诵）

• px：就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。
• em：参考物是父元素的font-size，具有继承的特点。整个页面的1em不是一个固定的值。（下有解释代码）
• rem：rem是CSS3新增的一个相对单位，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
• vw：视窗宽度的百分比（1vw代表视窗的宽度为1%）。
• vh：视窗高度的百分比。

<style>

#p1 {font-size:2em},
#span1 {font-size:2em}

</style>

<p id="p1">
   
    我是p1，我的字体大小是16px*2em=32px。
  
    <br/>

    <span id="span1"> 

        我是span1，我的字体大小是32px*2em=64px

    </span>

</P>

11.媒体查询（了解）https://blog.csdn.net/dream_lifes/article/details/122013152

• 媒体查询（Media Query）是CSS3新语法。
• @media可以针对不同的屏幕尺寸设置不同的样式。

//@media 开通媒体查询
//mediatype 媒体类型：all-用于所有设备；print-打印机和打印预览；scree-电脑、手机、平板
//and/not/only：and-多个媒体连接到一起，且；not-排除某个媒体，非；only-指定某个媒体，可省略。
//（media feature）媒体特性：必须有小括号包含。

@media mediatype and|not|only (media feature){
      css-code;
}

@media screen and (min-width: 375px){
            html {
                font-size: 37.5px;
            }  
        }

12.Vue实现移动端适配方案（掌握）https://blog.csdn.net/qq_39287602/article/details/109047223

【amfe-flexible】：

• 下载amfe-flexible，并在main.js做导入。
• 这步实现了根据屏幕不同，自动设置html字体大小。

【potocss-pxtorem】：

• 下载postcss-pxtorem，并添加配置文件。
• 这步实现了自动把我们写的px单位在打包运行后变成rem单位。

13.使用路由的步骤（掌握）https://blog.csdn.net/guorui_java/article/details/120626879

1. 创建路由组件。
2. 配置路由映射：组件和路径映射关系。
3. 使用路由：通过<router-link>和<router-view>。

<template>
  <div>
    <h2>我是首页</h2>
  </div>
</template>
 
<script>
  export default {
  }
</script>
 
<style scoped>
 
</style>

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
 
import Home from '../components/Home'
 
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
 
// 2.创建VueRouter对象
const routes = [
  {
    path: '/home',
    component: Home
  },
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
})
 
// 3.将router对象传入到Vue实例
export default router
 

<template>
  <div id="app">
    <router-link to="/home" >首页</router-link>
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>

14.路由重定向 （掌握）

重定向：当用户访问"/a"时，URL将会被替换成"/b",然后匹配的路由也变成了"/b"。

const routes = [

  { path:'/a', redirect:'/b' },

  { path:'/a', redirect: {name:'foo'} }

  { path:'/a', redirect: to => {
    // 接受目标路由作为参数
    // 返回重定向的字符串路径/路径对象
    }}

]

15.CSS优先级 （背诵）https://blog.csdn.net/qq_43000315/article/details/126168264

！important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器

16.CSS的权重计算公式（背诵） 

标签选择器	计算权重公式
继承或者*	0，0，0，0
每个元素（标签选择器）	0，0，0，1
每个类，伪类，属性选择器	0，0，1，0
每个ID	0，1，0，0
每个行内样式	1，0，0，0
每个！important	∞ 无穷大

17.正则表达式（掌握）https://www.runoob.com/js/js-regexp.html

18.请求基地址（掌握）

每次调用接口时都需要写上完整的接口地址，但是每个接口前面的地址是相同的，所以我们可以把接口地址中前面相同的部分提取出来设置一下，这样在后面调用接口时就不需要写前面的地址了。

每个接口地址前面相同的部分就是基地址。

// 导入axios
import axios from 'axios';

// 克隆一个新的axios对象
const request = axios.create({
  // 设置请求基地址
  baseURL:''
  })

// 默认导出
export default request

19.CommonJS

20.ES6 module

21.async和await (掌握)

// await关键字必须放在promise对象前
// await内容必须放在async修饰的函数里

async function fn() {
  const res = await promise对象
}

// 异常处理方案:try/catch
// 把awiat放进try中进行执行，如有异常，就使用catch处理。

async fn () {

  try {
    let res = await promise对象
  }  catch (err) {
    console.log(err)
  }

}

21.sessionStorage和localStorage区别（背诵）

sessionStorage：生命周期为当前窗口或标签页。一旦窗口或标签页被永久关闭了，那么通过sessionStorage存储的数据也就被清空了。

localStorage：生命周期诗永久。除非用户在浏览器提供的UI清除localStorage信息，否则这些信息将永远存在。

22.localStorage API （掌握）https://baijiahao.baidu.com/s?id=1677522777896255551&wfr=spider&for=pc

// setItem(key,value)
// 存储数据到localStorage

// localStorage只能存储字符串。
// 要存储数组或对象，需要先把它们转成字符串。

const person = {
  name : 'Tylor',
  location : 'London',
}

window.localStorage.setItem('user',JSON.stringify(person))

// getItem()
// 访问已存储在浏览器localStorage中的数据。

// 只接受一个参数key，会把对应的value作为字符串返回。
// 用JSON.parse()方法把JSON字符串转为JavaScript对象

JSON.parse(window,localStorage.getItem('user'))

// 返回内容
// {'name':'Tylor','location':'London'}

// removeItem()
// 当传入一个key时，removeItem()方法会从localStorage中删除指定的数据。
// 如果没有找到指定的key，则什么都不做。

window.localStorage.removeItem('name')

// clear()
// 调用此方法后，会清空当前域名下所有存储在localSrorage中的数据。
// 调用时不需要传入任何参数。

window.localStorage.clear()

 23.vuex（掌握）https://blog.csdn.net/m0_70477767/article/details/125155540

// state:统一定义公共数据

new Vuex.store({
  state() {
    return {
      属性名:属性值
    }
  }
})

// 在组件中，通过 this.$store.state.属性名 来访问。
// 在模版中，{{ $store.state.属性名 }}

// mutations:用来变更store中的数据

new Vue.store ({
  mutations:{
    mutation名1:function(state,[载荷]){},
    mutation名2:function(state,[载荷]){}
  }
)}

// 调用: this.$store.commit('mutation名',载荷)

24.嵌套路由/二级路由 （掌握）https://www.ngui.cc/el/860609.html?action=onClick

现象：点击了子路由跳转后父路由组件的内容一直呈现。子路由的内容进行切换，地址栏的路径也随之改变。

方法：配置好父路由component后，在父路由中添加children属性来配置父路由的子路由。

//嵌套路由

{
  path:'/father',
  component:() => import('@/views/father'),

    // 嵌套路由的关键字children，在父路由中添加children数组中添加子路径。
    children:[

      {
        // 以'/'开头的路径会被当作根路径。
        path:'son1',
        component:() => import('@/views/son1'),
      },
      {
        path:'son2',
        component:() => import('@/views/son2'),
      }
   ]

}

25.scope属性（了解）https://blog.csdn.net/weixin_39307273/article/details/107578967

scoped属性是style标签上的一个特殊属性，表示当前style里的样式只属于当前模块。

26.块级元素和行内元素（背诵）

块元素：ul、ol、li、dl、dt、dd、h1～h6、p、div

行内元素：a、b、span、img、input、select、em、strong

空元素：br、hr、link、meta

区别：块元素独占一行；内联元素一行排列多个，并且内联元素无法设置margin。

27.弹性布局 / flex布局（掌握）https://blog.csdn.net/weixin_41044151/article/details/114071215

     Flex布局中默认的主轴是row，x轴。

1. 如果想改变主轴方向可通过设置flex-direction来改变。
2. 通过justify-content能够设置主轴子元素排列形式。
3. 通过align-items能够设置侧轴元素对齐的在子项为单项（单行）的时候使用。

28.通过Less变量实现CSS样式（掌握）

Less变量的语法格式：@变量名：值

变量名命名规范：

1. 必须以@为前缀。
2. 不能包含特殊字符。
3. 不能以数字开头。
4. 大小写敏感。

// 定义@color变量
@color：pink；

// 使用@变量
body {
  color:@color;
}
a:hover {
  color:@color
}

// 在开发过程中，当同时修改body和a标签的样式时，
// 我们只需要修改 @color 变量的值即可。

29.axios原生请求设置请求头

this.$axios({
  method:'',
  url:'',
  data:  ,
  headers:{
    'Authorization':
  }
})

30.请求拦截器

 https://www.kancloud.cn/yungsem/axios/564630

请求拦截器应用场景：可以给所有axios请求设置请求头。

不使用拦截器：需要手动给页面每一个axios都设置请求头。

使用拦截器：只需要在拦截器中给axios设置请求头即可。

                   （因为所有的axios请求都会先进入请求拦截器。）

    axios.interceptors.request.use(
        
        // config：请求报文信息
        function (config) {
            // 在发送请求之前做些什么
            // 如果有token,就在请求头中添加token
            if (localStorage.getItem('token')) {
                config.headers.Authorization = localStorage.getItem('token')
            }
            return config
        },

        function (error) {
            // 对请求错误做些什么
            return Promise.reject(error)
        }
    )

31.全局前置路由守卫（掌握）

比如我们想要从A页面点击对应路由链接跳转到B页面--还没有跳转，将要跳转的时候--在这个时刻就会触发全局前置守卫，我们可以对全局任何一个路由进行访问权限的控制。

// 创建一个路由实例
const router = new VueRouter({ ... })
 
// 调用路由实例对象的beforeEach()方法-声明"全局前置守卫"
// 每次发生路由导航跳转的时候，就会自动触发回调函数
router.beforeEach(function (to, from, next) {
  console.log(to)
  console.log(from)
  next()
})

// 语法：路由实例.beforeEach(function(to,from,next){  next()  })
// to:将要访问的路由的信息对象
// from:将要离开的路由的信息对象
// next:是一个函数，调用next()函数表示允许这次路由导航

32.URI编码（了解）

• 网址其实不允许有中文以及参数部分不能有/这种符号，如果有都会进行转码。
• 编码：encodeURI()
• 解码：decodeURI()

33.响应拦截器（掌握）

axios.interceptors.response.use(function (response) {
    // 处理响应数据
    return response; // 返回响应数据
  }, function (error) {
    // 响应出错后所做的处理工作
    return Promise.reject(error);
  });

34.route和router的区别是什么（背诵）https://blog.csdn.net/weixin_62277266/article/details/123067156

• route是“路由信息对象”，包括path、params、hash、query、name等路由信息参数。
• router是“路由实例对象”，包括了路由的跳转方法（push、replace），钩子函数等。