vue页面显示服务器繁忙

你好，如果出现vue页面显示服务器繁忙，可能有以下原因：1.网络延迟问题2.资源文件是否太大3.资源是否重复发送和加载了请求4.加载脚本时，渲染内容堵塞了［拓展知识］解决方案常见的几种SPA头屏优化方式：减少入口文件的面积，开启UI框架按需加载、图像资源压缩、组件重新打包、GZip压缩等等。［拓展知识］vue是一套用于是一套用于构建用户界面的渐进式JavaScript框架。

前言：Vue服务器采用nginx➕Vue为服务器；

请确保你是以拥有 sudo 权限的用户来登录的服务器

请按照下面的步骤，在 CentOS 中安装 Nginx。

类似于上面的内容，遇到这种情况，输入 y，然后 Enter（回车） 即可继续安装。

启动 Nginx：

sudo systemctl start nginx

通过运行以下命令，来检查 Nginx 的运行状态：

sudo systemctl status nginx

然后会输出类型下面的内容: 其中Active：active代表运行， failed代表暂停

通过下面的命令来打开这两个端口：

国内的服务器厂商，安全组也可能会默认屏蔽这两个端口，比如 阿里云 和 腾讯云，如果在 第 5 步 时发现无法访问，可以自行百度一下如何放开这两个端口。

你可以像管理其他服务那样管理 Nginx。

启动 Nginx

sudo systemctl start nginx

停止 Nginx

sudo systemctl stop nginx

重启 Nginx

sudo systemctl restart nginx

修改 Nginx 配置后，重新加载

sudo systemctl reload nginx

设置开机启动 Nginx

sudo systemctl enable nginx

关闭开机启动 Nginx

sudo systemctl disable nginx

本文引用： # 2019 年如何在 CentOS 7 上安装最新版 Nginx

注意：有可能会出现403 Forbidden，执行 setenforce 0 设置SELinux 成为permissive模式

数据双向绑定，组件化，单文件组件

全局api： vue.extend 、 vue.set

实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项

实例属性和方法： vm.$on 、 vm.$data 、 vm.$destroy() 在$都是vue的实例和方法

指令： directive

内置组件： <components></compontents>、 <keep-alive></keep-alive> 、 <router-view></router-view>

数组中不可用的方法：slice，concat；

直接修改数组list[i] = 值，不可以这样直接修改；

Vue.set(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值

标签属性和条件渲染

标签属性： v-bind：href='link"等效于 :href="link" 动态绑定；

条件渲染： v-if 、 v-else 、 v-show ；

数据绑定： {{...}} 、 v-html (原始-HTML)、 v-text ；

事件绑定-内置事件绑定，自定义事件绑定

v-on:click="run" 等效于 @:click="run" 事件绑定；

自定义事件绑定： 父组件自定义事件

<my-compented @my-event='toggle'></my-compented>

子组件触发 my-event 自定义事件； this.$emit('my-event', opation)；

父组件执行toggle 函数；

计算属性和数据监听

computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，我们computed选项里面的方法读取的是缓存；

页面内容响应数据v-once

如果你需要页面内容响应数据的变化，就不加v-once。

如果你需要页面内容渲染后，不随数据的变化而变化，就加上这个。

对于一些固定不变的组件，在调用时我们可以加上v-once，只在第一次渲染执行，保存数据在内存中，后面再调用直接从内容中提取，提高执行效率。

应用

组件的通信

<p:is = "动态的组件名"></p>等同于 <动态的组件名></动态的组件名> 动态绑定组件

注：Vue有个单项数据流的概念：即父组件传递给子组件的参数，子组件不能直接修改；防止引用类型参数被修改后，如果父组件中其他地方也使用了此参数会受到影响。

子组件 props 接受的两种形式：

数组： ['first-name','two-name'] ，从父组件传递两个属性值；

动态展现： {{firstName}}

对象：

slot：插槽

父组件插件里面定义的内容放到子组件 slot 中：

子组件

vue高级功能--过渡和动画

自定义指令：

使用 vue-cli的优势：

成熟的vue项目架构设计；

本地测试服务器；

集成打包上线方案 webpack

npm install vue-cli -g ：全局安装vue-cli

vue init webpack my-project ：初始化项目

npm install 安装项目依赖

npm run dev ：在localhost启动测试服务器；

npm run bulid ：生成上线目录（部署）

a、安装 vue-router

b、配置路由

6、关闭eslint

dev模式下，默认会做eslint检测，若要关闭，打开 config/index.js ，设置 useEslint: false ，${}占位符，多行字符串

7、生命周期

8、支持es6

es6中很多新特性很好用class、promise、then、catch、...（数组转换符号）、函数设置参数默认值等

a、安装babel-polyfill

b、在入口main.js文件当中引入:

c、找到build文件夹下的webpack.base.conf.js

文章参考： 慕课网-欧米雪儿lyy

---