2020-09-27

                               **前端环境**

有的时候，在国内访问 NPM 不太方便，原因你懂得，淘宝在国内架设了一个 CNPM 服务器，帮我们同步 NPM 中的模块，这个 CNPM 的地址为：http://npm.taobao.org，淘宝大法好。具体如何配置 Node.js 和 NPM，我已经整理过一篇 配置 node.js 环境，可以用来参考。地址：http://www.cnblogs.com/haogj/p/3969536.html使用 npm 的 init 命令可以直接交互式创建一个 NodeJS 的项目文件 package.json.复制代码
PS C:\Study\framework> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See npm help json for definitive documentation on these fields
and exactly what they do.Use npm install --save afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
name: (framework)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Study\framework\package.json:{
“name”: “framework”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“dependencies”: {
“grunt”: “^0.4.5”,
“grunt-contrib-jshint”: “^0.11.2”
},
“devDependencies”: {},
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”,
“license”: “ISC”
}Is this ok? (yes)
复制代码
这时候，当前目录下，会出现一个名为 package.json 的 NodeJS ，或者说是 NPM 的项目模板。如果你喜欢简单快捷的话，不喜欢一步一步地回答这些问题，还可以加上一个参数 -y，将所有文件的答案默认为回答 yes。npm init [-f|–force|-y|–yes]详细的 init 命令的使用可以参考这里安装 Bower
注：现在不推荐 Bower了，你可以跳过这一段。NPM 可以管理 node.js 的模块，可以，我们准备做 Web 前端开发，现在的目标不是 node.js 的服务器端开发，所以，我们更加需要在浏览器上使用的 javascript 模块，这就不能全靠 NPM 了，Bower 是一个 Web 前端模块的包管理工具，有了它，我们就不必到各个网站去找各种前端模块，比如 jquery，bootstrap 等等，直接使用这个工具就可以搞定了。按照官方说法：Bower manages all these things for you.Bower 的图标是一只小鸟，很漂亮。查了一下，它叫园丁鸟，鸟类的建筑大师，雄鸟在求偶期会用树枝筑拱门或亭子，鸟中的工匠呀。官网地址：http://bower.io，你也可以在 GitHub 上找到它：https://github.com/bower/bower安装 bower 需要使用 NPM，命令很简单。$ npm install -g bower
安装之后，可以直接使用 bower 命令来管理。下面是使用说明。复制代码
PS C:\Study\framework> bowerUsage:bower [] []
1Commands:cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages - and possible updates
login Authenticate with GitHub and store credentials
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
unregister Remove a package from the registry
version Bump a package version
1234567891011121314151617Options:-f, --force Makes various commands more forceful
-j, --json Output consumable JSON
-l, --log-level What level of logs to report
-o, --offline Do not hit the network
-q, --quiet Only output important information
-s, --silent Do not output anything, besides errors
-V, --verbose Makes output more verbose
–allow-root Allows running commands as root
-v, --version Output Bower version
–no-color Disable colors
12345678910See 'bower help ’ for more information on a specific command.
PS C:\Study\framework>
复制代码
bower 会将管理的包保存到 bower_components/ 目录下面。使用 init 进行初始化。复制代码
PS C:\Study\framework> bower init
? name: framework
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose? amd
? keywords:
? authors:
? license: MIT
? homepage:
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y
? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
{
name: ‘framework’,
version: ‘0.0.0’,
moduleType: [
‘amd’
],
license: ‘MIT’,
ignore: [
‘**/.’,
‘node_modules’,
‘bower_components’,
‘test’,
‘tests’
]
}? Looks good? Yes
复制代码
可以看到帮助创建的 bower.json 配置文件的内容。使用 bower 获取前端库很方便，命令类似与 NPM复制代码
PS C:\Study\framework> bower install jquery
bower jquery# cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#* validate 2.1.4 against git://github.com/jquery/jquery.git#*
bower jquery#~2.1.4 install jquery#2.1.4jquery#2.1.4 bower_components\jquery
PS C:\Study\framework> bower install angularjs
bower angularjs#* cached git://github.com/angular/bower-angular.git#1.4.5
bower angularjs#* validate 1.4.5 against git://github.com/angular/bower-angular.git#*
bower angular#~1.4.5 install angular#1.4.5angular#1.4.5 bower_components\angular
PS C:\Study\framework> bower install bootstrap
bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.3.5
bower bootstrap#* validate 3.3.5 against git://github.com/twbs/bootstrap.git#*
bower bootstrap#~3.3.5 install bootstrap#3.3.5bootstrap#3.3.5 bower_components\bootstrap
└── jquery#2.1.4
复制代码
当前目录下会增加一个 bower_components 文件夹，包含获取的前端包。不过你不能获取 kendoUI 的库，这是一个商业项目。bower 工作的时候需要 node, npm 和 git.还没有 git ？先等一下，我们再来一个工具 git。安装 git
如果你不知道 git ，总该听说过 GitHub 吧，就是这只小黑猫 。不过，我们这里说的是 git ，而不是 GitHub。Git是一个分布式的版本控制系统，最初由 Linus Torvalds 编写，Torvalds 着手开发 Git 是为了作为一种过渡方案来替代 BitKeeper，后者之前一直是 Linux 内核开发人员在全球使用的主要源代码工具。开放源码社区中的有些人觉得 BitKeeper 的许可证并不适合开放源码社区的工作，因此 Torvalds 决定着手研究许可证更为灵活的版本控制系统。后来 Git 在其它项目中也取得了很大成功。GitHub 是使用 git 技术的一个代码托管网站，提供基于 Web 的访问界面。是目前最为流行的源代码管理网站。Git 官网地址：http://www.git-scm.comGit 下载地址：http://www.git-scm.com/downloads安装非常简单，Windows 版本下载之后，会得到一个安装程序，直接安装就可以。在命令行直接执行 git 可以得到帮助说明。复制代码
PS C:\Study\framework> git
usage: git [–version] [–help] [-C ] [-c name=value]
[–exec-path[= ]] [–html-path] [–man-path] [–info-path]
[-p | --paginate | --no-pager] [–no-replace-objects] [–bare]
[–git-dir= ] [–work-tree= ] [–namespace=]
[] These are common Git commands used in various situations:start a working area (see also: git help tutorial)
clone Clone a repository into a new directory
init Create an empty Git repository or reinitialize an existing onework on the current change (see also: git help everyday)
add Add file contents to the index
mv Move or rename a file, a directory, or a symlink
reset Reset current HEAD to the specified state
rm Remove files from the working tree and from the indexexamine the history and state (see also: git help revisions)
bisect Find by binary search the change that introduced a bug
grep Print lines matching a pattern
log Show commit logs
show Show various types of objects
status Show the working tree statusgrow, mark and tweak your common history
branch List, create, or delete branches
checkout Switch branches or restore working tree files
commit Record changes to the repository
diff Show changes between commits, commit and working tree, etc
merge Join two or more development histories together
rebase Forward-port local commits to the updated upstream head
tag Create, list, delete or verify a tag object signed with GPGcollaborate (see also: git help workflows)
fetch Download objects and refs from another repository
pull Fetch from and integrate with another repository or a local branch
push Update remote refs along with associated objects‘git help -a’ and ‘git help -g’ list available subcommands and some
concept guides. See 'git help ’ or 'git help ’
to read about a specific subcommand or concept.
复制代码
在前端开发过程中，我们不用直接使用 git，有的时候 bower 会自动调用 git 来获取代码。安装 Grunt
如果你选择 Webpack 的话，可以跳过这一段。这里是 Webpack 的安装说明。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化 Grunt 工具可以减轻你的劳动，简化你的工作。官网地址：http://gruntjs.com中文地址：http://www.gruntjs.netGrunt和 Grunt 插件是通过 npm 安装并管理的。详细的说明可以从 这里开始。在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。如果你已经安装了 Grunt，现在需要参考一些文档手册，那就请看一看 Gruntfile 实例 和如何 配置任务吧。安装 CLI
在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。npm install -g grunt-cli
上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。显示 Grunt 版本，注意是大写的 V，小写的 v 就是另外一个意思了。grunt -V
grunt-cli v0.1.13
grunt v0.4.5
Grunt 使用的项目文件称为 Gruntfile.js。如果还没有 Gruntfile.js 文件，直接执行 grunt，会看到如下的提示信息。复制代码
PS C:\Study\framework> grunt
grunt-cli: The grunt command line interface. (v0.1.13)Fatal error: Unable to find local grunt.If you’re seeing this message, either a Gruntfile wasn’t found or grunt
hasn’t been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:http://gruntjs.com/getting-started
复制代码
这是说没有在当前目录下找到 grunt 的项目文件。grunt 的项目文件称为 Gruntfile.js，注意第一个字符可是大写的，在跨平台的时候，这就是一个坑了。让我们写一个 Grunt 版的 Hello, world 来完成环境的准备。复制代码
module.exports = function(grunt) {// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
});grunt.registerTask(‘default’, ‘Hello, world task description.’, function() {
grunt.log.writeln(‘Hello, world.’);
});};
复制代码
这里，我们创建了一个自定义的任务，设置名称为 default，实际执行的时候，会输出 Hello, world.PS C:\Study\framework> grunt
Running “default” task
Hello, world.Done, without errors.

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的 KaTeX数学公式 语法；
5. 增加了支持甘特图的mermaid语法¹ 功能；
6. 增加了 多屏幕编辑 Markdown文章功能；
7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. mermaid语法说明 ↩︎

2. 注脚的解释 ↩︎