VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服务端渲染. 1.概述 官方文档 服务端渲染的配置相比预渲染就复杂多了,要做到同构,还要保证服务端和客服端的组件状态一致,我们需要对整个项目进行改造.大部分的内容官方文档中都说明的比较清楚,这里就不重复讲述了,需要各位花费一些时间照着文档一步步改造项目. 本人一开始也是这样照着文档做的,但是改造到最后…

vue的安装 首先下载nodehttp://nodejs.cn/download/ 有两种安装方式安装包安装和二进制文件安装 输入以下命令,出现版本提示表示安装成功: node -v 10.15.3 再下载npm 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 6.4.1 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下:…

六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本,请运行以下命令之一: npm install --save-dev webpack npm install --save-dev webpack@<version> 如果你使用 webpack 4+ 版本,你还需要安装 CLI: npm install --save-dev webpack-cl…

目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本可能会报错 cnpm i compression-webpack-plugin@1.1.11 -D 更改配置文件 开启生产环境gzip功能. /config/index.js: productionGzip: true, /build/webpack.prod.config.js: webpackC…

二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置选项,此时一直回车就好: 然后进入项目文件夹,输入: npm run serve 出现以上情况,则说明运行成功,此时,在浏览器打开链接http://localhost:8080/,会看到如下界面: 然后安装element-ui(一定要在该项目根目录下安装): npm i element-ui -s…

前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 git init 将项目所有文件(未被ignore)添加到仓库 git add . 将add文件提交到本地仓库 git commit -m ‘提交信息’ 本地仓库关联远程git仓库 git remote add origin git仓库 本地仓库代码提交到服务器 git push -u origi…

四.响应式布局的实现 elemnt-ui参考bootatrap提供了响应式布局,附上地址:https://element.eleme.cn/#/zh-CN/component/layout 以下是我的布局设计,目前看起来没什么错误: ​其实就是做了每行总共24个栅格,在不同尺寸的页面上如何分配宽度比例: 名称 尺寸 xs <768px sm ≥768px md ≥992px lg ≥1200px xl ≥1920px 比如这里直接给xs赋值4,他的宽度在xs(<768px,手机)就是4/24.…

八.错误总结(一) webpack打包项目识别子组件路径问题 之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vue成功解决问题 id命名不能包含html保留字引起的错误: 修改方法很简单,只需要将保留字id稍作改变即可 return返回对象问题: 错误原因很容易看出,是因为此处的return返回的数据应该是一个对象: 修改后错误排除:…

十.徒手撸一个vue下拉左侧二级导航 先附上最终效果图: vue代码: <div class="dropdown-menu-explore" v-on:mouseover="addDropdownContent(this)" v-on:mouseout="removeDropdownContent(this)" > <span class="dropdown-menu">探索</span>…

十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能.简单点理解,就是凡是将数据用状态管理模式来存储,在用到该数据的地方,只要一处地方发生变化,另一处也会发生变化,这样就解决了vue中非父子组件…