自学学成在线第二天遇到的坑和自我总结

学习中遇到的问题：
我没找到前端的初始项目好像解压出来第二天的任务都敲完了。

解压完后启动项目发现报这个错，就是sass不支持当前的环境，那么在当前环境重新安装一下就好了。

先卸载：（如果卸载不成功，直接找到node-sass文件夹，删除）

npm uninstall --save node-sass

再安装

npm install --save node-sass 或者 (cnpm install --save node-sass )

问题就解决了，项目启动成功

总结：

1. Vue.js与ECMAScript Vue
   不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性
2. Vue.js的使用

• 在html页面使用script引入vue.js的库即可使用
• 使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。 大型应用推荐此方案。
• Vue-CLI脚手架
  使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。
  3.vue.js有哪些功能
• 声明式渲染
  Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
  比如：使用vue.js的插值表达式放在Dom的任意地方， 差值表达式的值将被渲染在Dom中。
• 条件与循环
  dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。
• 双向数据绑定
  Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑 定的数据对象，修改数据对象的值自动修改Dom元素中的值。
• 处理用户输入
  为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的 方法
• 组件化应用构建
  vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。

4. MVVM模式
   MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单，VM(ViewModel)可以把view视图和Model模型解耦合，VM的要做的工作就是vue.js所承担的。

MVVM拆分解释为：

• Model:负责数据存储
• View:负责页面展示
• View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

6. Vue的基础学习官网
7. v-model仅能在如下元素中使用：
   input
   selec
   textarea
   components（Vue中的组件）
8. 解决插值表达式闪烁问题，使用v-text
   v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁
9. 单页应用优缺点

优点

• 用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
• 适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染

缺点：

• 首页加载慢
  单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则 用户体验不好。
• SEO不友好
  SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎 排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

10. vue文件的结构如下:

<template>

<!‐‐编写页面静态部分，即view部分‐‐> 
 
测试页面显示... 

</template> 

<script> /*编写页面静态部分，即model及vm部分。*/</script> 

<style> /*编写页面样式，不是必须*/ </style>

11. VUE一般常用的组件库

• Element-UI官方站点
• 基于Vue的Quasar Framework 中文网
• iView UI组件库
• Ant Design Vue官网
• AT_UI官网

12. 跨域问题解决
    什么是跨域？
    指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。
    跨域报的错误：
    报错如下 ： No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:11000’ is therefore not allowed access.
    
    如何解决跨域问题
    用代理就可以解决跨域问题，本项采用的是proxyTable解决。
    proxyTable是什么？（主要用代理中间件解决的跨域问题）
    vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy- middleware，它是http代理中间件，它依赖node.js， 基本原理是用服务端代理解决浏览器跨域
    懒得自己画图了这就copy文档的了（服务之间不存在跨域问题）
    
    具体的配置如下：
    1）修改api方法中url的定义 请求前加/api前缀
    2）在config/index.js下配置proxyTable。 以/api/cms开头的请求

'/api/cms': {
  target: 'http://localhost:31001', 
  pathRewrite: { 
    '^/api': ''//实际请求去掉/api(这个应该属于替换)
   }    
}

我自己看了官方的文档后发现了一个问题,这个我也没弄清楚是什么原因，哪位大佬值得具体原因的求解答一下。

//重写路径 
pathRewrite：{ '^ / old / api'：'/ new / api' 
//删除路径 
pathRewrite：{ '^ / remove / api'：'' 
//添加基本路径 
pathRewrite：{ '^ /'：'/ basepath /' 
//自定义重写 
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') } 
//自定义重写，返回Promise 
pathRewrite: async function (path, req) {
  const should_add_something = await httpRequestToDecideSomething(path);
  if (should_add_something) path += "something";
  return path

我修改配置如下：

'/api/cms': {
        target: 'http://localhost:31001',
        pathRewrite: {
          '^/remove/api': '' //删除api
        } 
      }

好像用这个删不掉，不知道什么原因，那个大佬知道解答一下，谢谢
14. vue的生命周期

1.实例化vue(组件)对象：new Vue()
2. 初始化事件和生命周期 init events 和 init cycle
3. beforeCreate函数：
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。即此时vue（组件）对象被创建了，但是vue对象的属性还没有绑定，如data属性，computed属性还没有绑定，即没有值.
此时还没有数据和真实DOM
即：属性还没有赋值，也没有动态创建template属性对应的HTML元素（二阶段的createUI函数还没有执行）
4. 挂载数据（属性赋值）
包括 属性和computed的运算
5. Created函数
vue对象的属性有值了，但是DOM还没有生成，$el属性还不存在
此时有数据了，但是还没有真实的DOM
即：data，computed都执行了。属性已经赋值，但没有动态创建template属性对应的HTML元素，所以，此时如果更改数据不会触发updated函数
如果：数据的初始值就来自于后端，可以发送ajax，或者fetch请求获取数据，但是，此时不会触发updated函数
6. 检查:

• 检查是否有el属性
  检查vue配置，即new Vue{}里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用vm.$mount()完成了全局变量$el的绑定
• 检查是否有template属性
  检查配置中的template项，如果没有template进行填充被绑定区域，则被绑定区域的el对象的outerHTML（即整个#app DOM对象，包括
  和
  标签）都作为被填充对象替换掉填充区域
  即：如果vue对象中有 template属性，那么，template后面的HTML会替换$el对应的内容。如果有render属性，那么render就会替换template
  即：优先关系时： render > template > el

7. beforeMount函数
   模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数
   此时 this.$el有值，但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换
8. 模板编译：用vue对象的数据（属性）替换模板中的内容
9. Mounted函:模板编译完成，数据挂载完毕
   即：此时已经把数据挂载到了页面上，所以，页面上能够看到正确的数据了
   一般来说，我们在此处发送异步请求（ajax，fetch，axios等），获取服务器上的数据，显示在DOM里
10. beforeUpdate函数：组件更新之前执行的函数，只有数据更新后，才能调用（触发）beforeUpdate，注意：此数据一定是在模板上出现的数据，否则，不会，也没有必要触发组件更新（因为数据不出现在模板里，就没有必要再次渲染）
    数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前
11. updated函数：组件更新之后执行的函数
    vue（组件）对象对应的dom中的内部（innerHTML）改变了，所以，叫作组件更新之后
12. activated函数：keep-alive组件激活时调用
13. deactivated函数：keep-alive组件停用时调用
14. beforeDestroy：vue（组件）对象销毁之前
15. destroyed：vue组件销毁后