记录一下在 Vue.js 项目中使用 vue-prism-editor 进行语法高亮显示代码，并兼具代码编辑功能。JavaScript 中有几个比较典型的语法高亮显示的代码库，例如 SHJS, SyntaxHighlighter, Rainbow, highlight.js。本博客曾经使用过 SyntaxHighlighter 来显示日志中的示例代码，现今所采用的是基于 PHP 的 Crayon Syntax Highlighter。除了只为了高亮显示代码外，有时候还需处理在线编辑代码，许多年前试用过 CodeMirror, 而今天要上手 Prism.js 也能够支持代码编辑。
官方 Demo: prism-editor.netlify.com
Codesandbox: https://codesandbox.io/s/61yrlnlnmn。
为了给 Vue.js 项目提供方便，有人专门做了一个 Vue.js 的插件 vue-prism-editor，本文直接使用该插件，而非直接使用 Prism.js。并且项目蓝本用@vue/cli 4.4.6的命令$ vue create vue-prism-editor-demo
创建的，创建过程可参考 Flask 和 Vue.js 开发及整合部署实例 的 创建 Vue 项目一节，此文简单些，就只选择default (babel, eslint)默认项来创建 Read More
紧接上一篇 Flask 和 Vue.js 开发及整合部署实例，来体验一下它们与 Bootstrap/BootstrapVue 的集成。漂亮的网站少不得一个好的 CSS 框架，现在有许许多的 CSS 框架可选，纯 CSS 的, 轻量级的, 含 JS 的 CSS 框架，如 Pure, Bulma, Spectre, 国产的 Element 等。而我总觉得 Bootstrap 更是五臟俱全，像 Element 专为 Vue.js 打造的一样，Bootstrap 也有 BootstrpVue 那样一个结晶品。
本文准确的内容应该是关于 Vue.js 与 Bootstrap/BootstrapVue 的话题，与 Flask 没什么事，不过这里呢，还是强拉上 Flask, 由 Flask 的 API 来产生一些数据。
同样是阅读 Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】的一个实践品。本篇基于 Flask 和 Vue.js 开发及整合部署实例 中的步骤建立的项目 flask-vue-app，方便起见，用了一个新项目名称 flask-vue-bootstrap。记得我们为 Flask 和 Vue.js 分别建立了 backend 和 frontend 两个子项目。 Read More
想做些简单的 Web 工具，首先想到的是 Flask + Vue.js, 当然可以完全用 Flask 自己的页面模板 Jinja2, 但一个网站项目不能享受到像 Vue.js, React 类似框架的灵活性真是太可惜了。于是 Flask 只专注于 API, 页面逻辑全用 Vue.js 的组合就成了我的首选，Flask 方面还能进一步选择 FlaskRESTful 框架。还需做得更漂亮的话，CSS 框架可选择 Bootstrap 或与 Vue 紧密集成的 BootstrapVue, 这是后话。
本文主要参考 Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】的前部分，英文原文在这里 Developing a Single Page App with Flask and Vue.js。
开发过程中我们可以保持 Flask 和 Vue.js 为单独的两个项目，并启动各自的服务，比如 Flask 是 http://localhost:5000, Vue.js 项目通过npm run serve启动在 http://localhost:8080，借助于 node js 的功能，修改 Vue.js 项目的内容能够自动刷新网页。要是开发中把静态文件全放在 Flask 项目中，那么任何对静态文件的修改都必须重启 Flask 服务。虽然 Debug 模式启动的 Flask 在看到它的目录中有任何修改时也能自动重启，但对静态文件的修改重启 Flask 没这个必要性。
但部署时需进一步整合，最终只需要启动 Flask 服务，而无须两个，方便部署。如果是以 Docker 容器的方式发布，使用 docker-compose 来编排两个容器来发布也还算不错。更专业的部署方式应该是 Vue.js 的静态内容放到专门的 Web 服务器，如 Apache/Nginx 中，Flask 也通过 wsgi 与 Web 服务器集成起来。 Read More