目录
- 概要
- 知识点
- 完整示例图
- 代码与资源文件
- 流程步骤
概要
基于 MVP 最小可行性产品设计理念,我们先完成一个可以使用,并具备基本功能的 Markdown 笔记本应用,再进行逐步完善。
知识点
本文会指导初学者如何一步步运用 Vue 的计算属性、双向绑定、指令、生命周期钩子,还有 localStorage 和异步请求等知识点。
完整示例图

代码与资源文件
https://github.com/liqingwen2015/MarkdownDemo
为了避免网络原因造成的问题,文中所使用的第三方库(可自己去官方下载最新版,文章使用的是当前发布时间最新版本的 js 文件)以及 css 文件都下载好并且已经放入里面。
使用的 index.css 文件
流程步骤
1.先构建一个基本的 html 文件,并引入核心 js 库。
这里需要引入的第三方库为 vue.js、marked.js。
<html><head> <title></title> <!-- 引入样式文件 --> <link rel="stylesheet" href="index.css" /></head><body> <!-- 引入 js 库 --> <script src="/lib/vue.js"></script> <script src="/lib/marked.js"></script> <!-- js 代码 --> <script src="index.js"></script></body></html>
因为考虑到项目主要划分为两块,左边是书写区域,右边为预览区域,<body> 块代码修改为:
<body> <!-- 引入 js 库 -->

