Posted on | Edited on | In

本文承接webpack2教程以及webpack2教程续之自动编译，本文所说的项目目录依旧是webpack2

在上两篇中，我们搭建了基于webpack的vue开发环境，并且启动了监听文件修改自动打包编译

现在我们进入更重要的一环，语法规范，借助于工具ESLint

ESLint

点击这里，前往ESLint官网

点击这里，前往ESLint中文网

下面引用自官网

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具，它是一个以可扩展、每条规则独立、不内置编码风格为理念编写的一个lint工具

点击这里，查看所有规则列表

所有的规则默认都是禁用的。在配置文件中，使用"extends": "eslint:recommended"来启用推荐的规则

安装和配置

安装eslint以及对应的加载器

eslint-loader

1
npm i eslint eslint-loader -S

安装eslint预定义配置规则

代码规范(eslint-config-standard)

Read more »

Posted on | Edited on | In

本文列举的是常见规范

原文地址，点击这里

细则

  • 使用两个空格 进行缩进

eslint: indent

1
2
3
function hello (name) {
  console.log('hi', name)
}
  • 除需要转义的情况外，字符串统一使用单引号

eslint: quotes

1
2
console.log('hello there')
$("<div class='box'>")
  • 不要留下未使用的变量

eslint: no-unused-vars

1
2
3
function myFunction () {
  var result = something()   // ✗ avoid
}
Read more »

Posted on | Edited on | In

本文承接上一篇webpack2教程，本文所说的项目目录依旧是webpack2

在上一篇中，我们搭建了基于webpack的vue开发环境，但是有一个问题是，每次编译代码都需要手动输入命令，是不是可以自动完成呢。

这里将借助pm2和gulp

pm2

pm2，不是pm2.5，是一个node.js的进程管理器

安装

1
npm i -g pm2

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 显示所有进程状态
pm2 list
# 启动一个进程，别名是app
pm2 start app.js --name app
# 监控所有进程
pm2 monit
# 显示所有进程日志
pm2 logs
# 停止所有进程
pm2 stop all
# 重启所有进程
pm2 restart all        
# 停止指定的进程
pm2 stop name/pid
# 重启指定进程
pm2 restart name/pid
Read more »

Posted on | Edited on | In

本文基于webpack2.x介绍基于webpack的vue开发环境搭建
请恕本文无耻的省略了vue的知识点讲解

webpack是什么

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

点击这里 前往官网

点击这里 前往官方中文站

下面一个是最近发现的webpack2中文文档，非常详细，感谢作者！

http://www.css88.com/doc/webpack2/ 前往webpack2详细介绍(非常感谢作者的翻译)

安装webpack

由于webpack是一个基于node.js的项目，所以首先需要确保你的电脑里面已经安装了node.js，以及npm

为了丝滑的安装npm包，请安装npm的淘宝源

1
npm config set registry https://registry.npm.taobao.org

全局安装

1
npm i webpack -g
Read more »

Posted on | Edited on | In

这里仅介绍linux环境下nodejs环境的搭建

NVM

nvm全称Node Version Manage，通过shell脚本实现对node版本控制

安装

当前nvm版本是0.33.1，安装方式有俩种

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

或者

1
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

安装完成之后会在家目录下多一个.nvm目录，由于是隐藏的，需要ll -a才能看到

我的登录用户是root，故nvm的位置是/root/.nvm/

配置

配置终端启动时自动执行

在~/.bashrc文件中添加以下命令：

1
2
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
source /root/.nvm/nvm.sh
Read more »