升级开发环境

Mocha 虚拟机开发环境，可以完成 Node.js 后端开发。下面的安装步骤将使这个开发环境具备前端开发能力。另外，Node.js 后端开发环境也需要进行升级。

在确保自己的虚拟机能上网的前提下，执行以下搭建前端开发环境的步骤：

1. 更新 tools 仓库

cd
cd wd
rm -rf tools
git clone https://github.com/wangding/tools

2. 安装 tools 仓库的 vim 配置文件

cd
cd wd/tools
cp .vimrc ~

3. 安装 vim 插件

注意：安装过程中，不要中途退出。一定要等 vim 提示 Done 后，才能退出。

vim                // 命令行打开 vim 编辑器
:PluginInstall     // vim 的普通模式下，按冒号进入命令模式
                   // 输入 PluginInstall 命令，注意命令的大小写
:q                 // vim 提示 Done 时，:q 退出安装界面
:q                 // 退出 vim

4. 验证安装的 emmet vim 插件

vim  a.html       // 命令行打开 vim 编辑器
i                 // 进入插入模式
!<ctrl>+y,        // 输入感叹号，然后同时按 ctrl 和 y 键，然后按逗号键
                  // vim 窗口中应该出现 HTML5 的页面框架代码
:q!               // 不保存退出

5. 验证安装的 jsdoc vim 插件

vim  a.js            // 命令行打开 vim 编辑器
i                    // 进入插入模式
                     // 写一个 x + y 的 add 加法函数，代码如下
function add(x, y) {
  return x + y;
}
ESC                  // 退出插入模式，进入普通模式，移动光标到第一行
:JsDoc               // 按冒号进入命令模式，输入 JsDoc<回车>，注意命令大小写不要写错
                     // vim 窗口中应该出现函数头注释框架
:q!                  // 不保存退出

6. 验证 CSS 代码补全功能

vim  a.css            // 命令行打开 vim 编辑器
i                     // 进入插入模式
                      // 写一个 body 的 CSS 样式代码，如下：
body {
  background:         // 注意在输入冒号和空格之后，应该弹出代码补全窗口
ESC                   // 回到普通模式
:q!                   // 不保存退出

7. 验证代码注释工具

vi a.js               // 命令行打开 vim 编辑器
i                     // 进入插入模式，接下来，写六行代码
var name = 'wangding',
    qq   = '408542507',
    log  = console.log;

log(`name: ${name}`);
log(`qq  : ${qq}`);
ESC                   // 回到普通模式
                      // 上下移动光标到任意一行代码
<space>cc             // 按空格和两个 c 键，对当前行注释
<space>c<space>       // 按空格和 c 键以及空格键，取消当前行注释
<space>V              // 块选当前行
jj                    // 向下选中两行
<space>cc             // 对选中多行进行注释。取消注释，选中多行，按<space>c<space>

8. 安装开发辅助工具

su                    // 切换到 root 账户
yum install -y tree   // 安装 Linux 命令行 tree 工具和语法高亮工具
npm i -g htmlhint     // 安装 HTMLHint 静态代码检查工具
npm i -g csslint      // 安装 CSSLint 静态代码检查工具
npm i -g eslint       // 安装 ESLint 静态代码检查工具
npm i -g browser-sync // 安装热加载工具
exit                  // 切换到开发者账户 wangding

9. 验证 JavaScript 前端代码自动补全和后端代码补全

cd
mkdir spa
cd ~/spa
wget https://sample.wangding.co/nodejs/tern-project
mv tern-project .tern-project
vim  a.js             // 命令行打开 vim 编辑器
i                     // 进入插入模式
window.               // 输入 window 和点之后看到浏览器窗口对象 window 的方法提示
ESC                   // 回到普通模式
:q!                   // 不保存退出
vim  a.js             // 命令行打开 vim 编辑器
i                     // 进入插入模式
$.                    // 输入 $ 和点之后看到 jQuery 全局对象 $ 的方法提示
ESC                   // 回到普通模式
:q!                   // 不保存退出
vim  a.js             // 命令行打开 vim 编辑器
i                     // 进入插入模式
process.              // 输入 process 和点之后看到 node.js 全局对象 process 的方法提示
ESC                   // 回到普通模式
:q!                   // 不保存退出

10. 安装 nvm 并升级 node.js 版本

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

上面的安装步骤结束后，编辑 .zshrc 文件，执行命令：vi ~/.zshrc。在 zshrc 文件的最后增加下面两行代码：

alias lrd="browser-sync start --server --port 8080 --no-open --files ."
alias pl="sudo firewall-cmd --zone=public --list-ports"
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh"   ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

保存 .zshrc 文件的修改，退出 vim。执行 linux bash 命令 exit 退出控制台，XShell 重新连接虚拟机。

升级 Node.js 版本到 10.16.3，执行下面的命令：

node -v               // 当前的 Node.js 版本应该是 6
nvm install 10
node -v               // 升级后 Node.js 版本应该是 10

11. 验证开发辅助工具

tree ~/wd               // 应该看到 wd 目录的树状结构
htmlhint --version      // 应该看到版本号不低于：0.9.13
csslint --version       // 应该看到版本号不低于：v1.0.4
eslint --version        // 应该看到版本号不低于：v4.17.0
browser-sync --version  // 应该看到版本号不低于：2.23.6

掌握工具用法

1. Vim 代码编辑器

阅读 Vim 笔记

执行下列命令

cd                     // 回到家目录
git clone https://github.com/wangding/jsnotepad
tree jsnotepad         // 查看 jsnotepad 项目下的代码文件

用 vim 打开 jsnotepad 项目中自己感兴趣的代码文件 html, css 或 js
win 10 浏览器窗口（查看 vim 笔记）和 XShell 终端窗口平铺，左边是笔记，右边是终端窗口
对照左边文档，在终端窗口中练习 vim 的用法

2. Emmet 工具

安装 Emmet vim 插件，上面的开发环境搭建已经介绍过了
Emmet 工具在 vim 编辑器中的快捷键：+y,
Emmet 语法，请参考：https://docs.emmet.io/abbreviations/syntax/
Emmet vim 插件用法，请参考：https://github.com/mattn/emmet-vim/blob/master/TUTORIAL
掌握 Emmet vim 常用的快捷键，+y，逗号，d，a，m，k，/，n
创建一个 emmet.html 文件，在 vim 中打开此文件，练习 Emmet 插件的用法

3. 静态代码检查工具

安装静态代码检查工具，上面的开发环境搭建已经介绍过了
HTML 静态代码检查的规则，请参考：https://segmentfault.com/a/1190000013276858
CSS 静态代码检查的规则，请参考：https://github.com/CSSLint/csslint/wiki/Rules
JavaScript 静态代码检查的规则，请参考：http://eslint.cn/docs/rules/
创建 HTML、CSS 和 JavaScript 三个代码文件，在 vim 中编辑代码，体验静态代码检查插件的用法

4. 热加载工具

安装热加载工具，上面的开发环境搭建已经介绍过了
执行如下操作，掌握热加载工具的用法：

cd ~/spa        // 进入前端页面所在的目录  
lrd             // 运行热加载程序，热加载程序会启动一个 Web 静态文件服务  
                // 在 XShell 另一个控制台窗口编写代码
vi index.html
i               // 进入插入模式
!  ctrl + y,    // 产生 H5 页面框架代码
ESC             // 从插入模式回到普通模式
<space>w        // 同时按下空格和 w 键，保存代码

打开 win10 的 chrome 浏览器
输入热加载程序提示的 URL 地址
chrome 浏览器中应该能看到刚才编写的页面代码
修改网页代码，保存，chrome 浏览器会自动刷新
通过热加载，浏览器能实时反映出页面的最新变化
不用手动刷新，提高开发效率
退出热加载按 Ctrl + C

升级开发环境

升级开发环境

1. 更新 tools 仓库

2. 安装 tools 仓库的 vim 配置文件

3. 安装 vim 插件

4. 验证安装的 emmet vim 插件

5. 验证安装的 jsdoc vim 插件

6. 验证 CSS 代码补全功能

7. 验证代码注释工具

8. 安装开发辅助工具

9. 验证 JavaScript 前端代码自动补全和后端代码补全

10. 安装 nvm 并升级 node.js 版本

11. 验证开发辅助工具

掌握工具用法

1. Vim 代码编辑器

2. Emmet 工具

3. 静态代码检查工具

4. 热加载工具

results matching ""

No results matching ""