Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用

 

目录

  • 概要
  • 知识点
  • 完整示例图
  • 代码与资源文件
  • 流程步骤

 

概要

  基于 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 库 -->    
                        
关键字:
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信