vue简单个人博客的制作（使用 Vue 和 Vue-router 创建一个多布局（layout）系统）

本文目录

• 使用 Vue 和 Vue-router 创建一个多布局(layout)系统
• 每一个程序员都应该有写博客：使用VuePress搭建一个博客系统
• vue骚操作之this.$options(个人笔记)
• Vue 组件学习总结
• VUE在前端里面主要是做什么的呢
• Hexo已经看腻了，来试试VuePress搭建个人博客
• vue禁止横屏

使用 Vue 和 Vue-router 创建一个多布局(layout)系统

***隐藏网址*** 假设您创建了一个博客。您希望主页没有侧栏，而所有其他页面都有侧栏。 使用 vue-cli 3 创建一个项目： vue create blog 创建 layouts 文件夹这 src。 创建有边栏的 Default 模版。 创建没有边栏的 NOSidebar 模版： 然后在 router.js 里创建页面： import Vue from ’vue’ import VueRouter from ’vue-router’ Vue.use(VueRouter) import Home from ’./pages/Home’ import About from ’./pages/About’ const routes = const router = new VueRouter({     mode: ’history’,     routes }) export default router 我为Home & About页面添加了一个meta键 在Vue-router中。 现在我们在 main.js 导入 layout

每一个程序员都应该有写博客：使用VuePress搭建一个博客系统

你好啊，我是大阳。一个撸码近十年的程序员。

不知道你是否有这样的职场困惑：职场三年没有任何进步；学了很多，毛用没有；学了，过了一年全都忘记了，更不知道怎么把已经学到的知识迁移到其他领域或者行业。

也就是搬砖多年，一直都没有在自己的专业上建立完备的知识体系 。

时间和知识的碎片化、工作996、职场pua都在阻止我们系统化地学习、更别说沉淀为知识体系啦。

为了能够对抗这些外部因素，我建议你写博客。强制输出倒逼输入、随时记录学习历程夯实脚步、不断实践形成技能树。

而作为一个程序员，形成个人知识体系，对抗危机和忧虑，可以使用下面的方法：

下面我们来使用VuePress来搭建一个博客系统。我这里使用的是vuepress社区主题vuepress-theme-hope（一款集成了众多插件的vuepress主题）。

事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于Nuxt的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby。

根据提示进行配置,可以启动自带demo

主配置文件config.ts

主题配置：

palette.scss

vue骚操作之this.$options(个人笔记)

过滤器被用于一些常见的文本格式化，被添加在表达式的尾部，由“管道”符号指示。

试想一个场景，不仅模板内用到这个函数，在 method 里也需要同样功能的函数。但过滤器无法通过 this 直接引用，难道要在 methods 再定义一个同样的函数吗？

要知道，选项配置都会被存储在实例的 $options 中，所以只需要获取 this.$options.filters 就可以拿到实例中的过滤器。豁然开朗.jpg

除了能获取到实例的过滤器外，还能获取到全局的过滤器，因为 this.$options.filters 会顺着 proto 向上查找，全局过滤器就存在原型中。

在vue单文件组件里有时需要重置data中的数据，比如表单填写一半，用户想重新填写。

也可以通过给组件 $data 对象赋值来重置来重置整个 $data 。

Vue 组件学习总结

组件库其实就是一堆组件组成的一个项目，一般项目里会有组件和演示项目。当项目调试时 webpack 打包演示项目的入口文件来进行演示和调试，在发布组件库时 webpack 打包组件库的入口文件。将打包完的组件发布到 npm。

我觉得，组件库的左右只能是一个 —— 提高生产效率。所以，在当前有不少优秀的组件库的情况下，我们能做的应该是帮助那些组件库变得更好。同时基于自己的业务写一些适用于自身业务的前度组件。

关于组件的发布流程， 手把手教你封装 Vue 组件，并使用 npm 发布 这篇文章对组件库从搭建到发布进行了详细的描述，亲测可用。

其实是一些组件库中实现特殊效果所用到的思路。在下面整理了一下用法和应用场景：

DOM 操作

CSS

Vue 功能应用

其他

根据这段时间学习组件库的经验，自己动手写了一个组件库项目 otter-ui 。本项目仅用于交流学习。可以参考着自己写一套组件库玩玩，还是挺酷的！

截止到这篇文章发布，我的 《Vue实验室》 已经有30篇博客了~ 算是对 Vue 相关知识大概学习了一遍了，通过输出的方式学习技术知识让我对这些技术知识学习的非常扎实。 接下来，我会继续维护之前的文章，让那些文章更简单易懂。并且不定期发布一些我觉得有意思的值得深入学习的 Vue 相关知识点。

VUE在前端里面主要是做什么的呢

 Vue是一个js框架。什么叫框架？个人理解是对原生JS ，html,css的功能进行封装之后形成的一个语言。

比如，你需要盖一座房子，你用原生js，html，css写代码相当于你用手一块砖一块砖地垒。而使用Vue，Vue已经给你了一面墙，一根房梁，一扇门，你需要做的是把门墙梁拼成房子。它帮助你提高开发效率。你只需要按照它的规矩来写三段部分：《template》、《script》、《style》就能完成平时html、css、js的功能。页面视图展示，前后数据交互都完成了。

之后使用webpack等工具，会将vue语法转换为html,js,css。

其实使用Vue开发和原生html,css,js开发步骤逻辑是一样的。

除此之外，vue还有动态绑定，数据驱动等等特点，这些都是题外话。我相信我的回答已经解决了你的问题，如果感觉有帮助，请采纳我的答案。

Hexo已经看腻了，来试试VuePress搭建个人博客

先简单介绍一下VuePress，这是尤大在2018年4月份发布的一个新轮子。

一个基于 Vue SSR 的静态站生成器，本来的目的是爽爽的写文档，但是我发现用来撸一个人博客也非常不错。

这是VuePress的官方文档 这是VuePress的中文文档

你可以跟着文档上的例子自己玩一玩，不过由于VuePress的文档也是用VuePress来实现的，所以我取巧直接拿 VuePress仓库 中的 docs 目录拿来玩耍。

当你看到这一行就说明已经成功了：

***隐藏网址*** 发现真的打开了vuepress文档：

下面的工作就是数据的替换了，但我们应该先看一下docs的目录结构：

文档分成了两部分，中文文档在/zh/目录下，英文文档在根目录下。

其实目录里面的东西都挺好看懂的，首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容，从中文文档里也可以看到只有这三个目录被替换了。

默认主题提供了一个主页布局，要使用它，需要在你的根目录 README.md 的 YAML front matter 中指定 home：true ，并加上一些其他的元数据。

我们先看看根目录下的README,md：

实在看不懂， 官网 有比我更详细的配置说明。

导航配置文件在 .vuepress/config.js 中

在导航配置文件中nav是控制导航栏链接的，你可以把它改成自己的博客目录。

剩下的默认主题配置官方文档都有很详细的文档说明这里就不在啰嗦了。

你可以在 .vuepress/ 目录下创建一个 override.styl 文件。 vuepress提供四个可更改的颜色：

我把它改成了这样：

由于评论区里问的人较多，所以在这里更新一下，其实我就算在这里写的再详细也不如大家去看官方文档。 侧边栏的配置也在 .vuepress/config.js 中：

对应的文档结构：

我的博客： brownhu

在配置好你博客之后，命令行执行：

当你看到这一行就说明成功了：

将打包好的vuepress目录上传到你的github仓库，和github page配合，就可以配置好你的博客网站了。

vue禁止横屏

1、style 中设置竖屏时的屏幕处理 @media screen and (orientation:portrait)@media screen and (orientation: portrait) { /*竖屏样式*/ body { transform-origin: 0 0; transform: rotateZ(90deg) translateY(-100%); }}2、在页面加载的时候，进行必要的页面宽高处理 forceLandscapeScreenHandle() { const body = document.getElementsByTagName(’body’); const html = document.getElementsByTagName(’html’); const width = html.clientWidth; const height = html.clientHeight; const max = width 》 height ? width : height; const min = width 》 height ? height : width; body.style.width = max + "px"; body.style.height = min + "px"; }三、注意事项1、添加窗口变化的重新 宽高处理onWindowSizeChanged() { window.addEventListener("resize", this.forceLandscapeScreenHandle) }2、为了页面的变化太多，可以设置屏幕的最大最小比例《!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面--》《!-- 目的是 让界面显示 更加适应 手机屏幕--》 《meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"》四、效果预览五、实现步骤这里构建 Vue 工程，可参见Web 前端 之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）_仙魁XAN的博客-CSDN博客1、打开 Vue 工程，在 public/index.html 中添加如下 meta 标签处理，屏幕比例的限制处理《!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面--》《!-- 目的是 让界面显示 更加适应 手机屏幕--》 《meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"》2、在 src/App.vue 中添加测试的内容3、添加 style 样式，关键处理竖屏时的页面，相关如下4、在页面加载进行 宽高处理5、最后运行工程，效果如下六、关键代码1、public/Index.html《!DOCTYPE html》《html lang=""》 《head》 《meta charset="utf-8"》***隐藏网址***《!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面--》《!-- 目的是 让界面显示 更加适应 手机屏幕--》 《meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"》 《link rel="icon" href="《%= BASE_URL %》favicon.ico"》 《title》《%= htmlWebpackPlugin.options.title %》《/title》 《/head》 《body》 《noscript》 《strong》We’re sorry but 《%= htmlWebpackPlugin.options.title %》 doesn’t work properly without JavaScript enabled. Please enable it to continue.《/strong》 《/noscript》 《div id="app"》《/div》 《!-- built files will be auto injected --》 《/body》《/html》2、src/App.vue《template》 《div id="container"》 TestForceLandscapeScreen 《/div》《/template》 《script》export default { name: ’ThreeTest’, components: {}, data() { return {} }, mounted() { this.init(); }, methods: { init() { this.forceLandscapeScreenHandle(); // 这里监控 this.onWindowSizeChanged(); }, forceLandscapeScreenHandle() { const body = document.getElementsByTagName(’body’); const html = document.getElementsByTagName(’html’); const width = html.clientWidth; const height = html.clientHeight; const max = width 》 height ? width : height; const min = width 》 height ? height : width; body.style.width = max + "px"; body.style.height = min + "px"; }, onWindowSizeChanged() { window.addEventListener("resize", this.forceLandscapeScreenHandle) } }, // beforeDestroy 废弃，使用 beforeUnmount beforeUnmount() { }} 《/script》 《style》#app { /*文字居中*/ display: flex; justify-content: center; align-items: center; text-align: center; height: 100%;} * { /*初始化样式*/ margin: 0; padding: 0;} html { /*用于 获取 屏幕的可视宽高*/ width: 100%; height: 100%; overflow: hidden;} body { /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/ position: fixed; left: 0; top: 0; width: 100%; height: 100%; } @media screen and (orientation: portrait) { /*竖屏样式*/ body { transform-origin: 0 0; transform: rotateZ(90deg) translateY(-100%); }}《/style》七、其他1、参考博文1）移动端如何让页面强制横屏_Fizz_kai的博客-CSDN博客_html 强制横屏2）h5横屏（以vue为例） - 江峰★ - 博客园2、其他实现强制横屏参考强制横屏展示，这里用到了css3的旋转功能，就是对屏幕 resize 事件进行监听，当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可。代码如下：　　在mounted生命周期中监听resize事件：window.addEventListener(’resize’, this.resize)　　resize方法如下：　resize () { var width = window.innerWidth, height = window.innerHeight, $wrapper = document.getElementById("app"), style = ""; if (width 》= height) { // 横屏 style += "width:" + width + "px;"; // 注意旋转后的宽高切换 style += "height:" + height + "px;"; style += "-webkit-transform: rotate(0); transform: rotate(0);"; style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;"; style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;"; } else { // 竖屏 style += "width:" + height + "px;"; style += "height:" + width + "px;"; style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);"; // 注意旋转中点的处理 style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;"; style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;"; } $wrapper.style.cssText = style; }接下来就是适配的问题了。我采用的是vw跟vh。以前没用过，初次接触，用过之后感觉真的挺好用的。　　假如ios用户开启了屏幕固定或者android用户开启了屏幕自动旋转。这两种情况下，会有一点不一样。这时候使用css判断横竖屏就显得尤其重要了。代码如下：　/* 竖屏 */@media screen and (orientation:portrait) { // 以vw为单位} /* 横屏 */@media screen and (orientation:landscape) {　　// 以vh为单位}在竖屏的时候使用vw来进行适配。即根据屏幕的宽度来适配。这里以375 x 667的设计稿为例。例如：一个元素宽为526，高为314。根据屏幕的宽度来适配的话就是526/375 * 100% vw、314/375 * 100% vw了。　　如果是横屏的话，就是用vh来进行适配。即根据屏幕的高度来适配。同样以375*667的设计稿为例。此时元素宽为526，高为314。就该写成宽为526/375 * 100% vh、高为314/375 * 100% vh了　　tips:最近又重新研究了一下横屏这个，发现其实不管ios用户是否开启了屏幕固定或者android用户是否开启了屏幕自动旋转，，都不需要使用css判断横竖屏来写两套样式了，只需要以正常情况(即竖屏下)的宽度来计算，然后使用vmin作为单位即可，这样写一套样式就全部搞定了。（vmin是相对于视口的宽度或高度中较小的那个来计算的）