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

最新推荐文章于 2024-09-01 10:22:51 发布

置顶 SeveCc

最新推荐文章于 2024-09-01 10:22:51 发布

阅读量1.2k

点赞数

分类专栏：学成在线文章标签：学成在线 node-sass 跨域问题 vue生命周期

本文链接：https://blog.csdn.net/sinat_37812785/article/details/107636152

版权

学成在线专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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

npm uninstall --save node-sass
在这里插入图片描述
再安装

npm install --save node-sass 或者 (cnpm install --save node-sass )
在这里插入图片描述
问题就解决了，项目启动成功

总结：

Vue.js与ECMAScript Vue
不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性
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页面中引用组件，这个功能非常适合构建大型应用。

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

MVVM拆分解释为：

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

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

优点

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

缺点：

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

vue文件的结构如下:

<template>

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

</template> 

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

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

VUE一般常用的组件库

跨域问题解决
什么是跨域？
指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。
跨域报的错误：
报错如下： 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. $m o u n t () 完成了全局变量$ el的绑定
检查是否有template属性
检查配置中的template项，如果没有template进行填充被绑定区域，则被绑定区域的el对象的outerHTML（即整个#app DOM对象，包括
和
标签）都作为被填充对象替换掉填充区域
即：如果vue对象中有 template属性，那么，template后面的HTML会替换$el对应的内容。如果有render属性，那么render就会替换template
即：优先关系时： render > template > el

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