vue输出语句_更酷的Console，更简单的输出⽅
式，EnjoyitinVue~
Table of content
⽼⽣常谈 Console
不如换种姿势？
vue-pretty-logger 做了什么有关环保的标语
安装⽅式
开始使⽤
使⽤命令输出
Loader Option 配置项
Example
提交 Issues
⽼⽣常谈 Console
提起浏览器的 Console API，相⽐⼤家都觉得是⽼⽣常谈了，在我们刚开始学习前端到使⽤各种框架驰骋在前端界之间，Console 的使⽤频率从来不会很低，不管是通过 Console.log() 打印⼀条信息，还是 () 去输出错误信息，都不免接触到 Console
但是，有时候我会觉得 Console 很⽆趣，不管是原⽣的 API，还是⽹上封装的各种各样的库，都没有什么新意，永远在⼏个 API 之间徘徊，⽽vue-pretty-logger的出现就是打破 Console 的限制，谁指定 Console 就必须这样⽤？
vue-pretty-logger只让你有两点感受，酷，简单
不如换种姿势？
来看看 Console 是怎么使⽤的
let num = 123
console.log(num) // result -> 123
其实不难理解，毕竟 Console 的 API 如此简单，⽹上有很多关于 Console 的具体使⽤⽅式，笔者在这⾥就不赘述了
再来看看 vue-pretty-logger
let num = 123 // {#}
// result -> 123
如果你不理解做了什么，接下来我会详解，但是从表⾯上来讲，我们不必要去多写⼀句输出了，⽽且这种⽅式⽐较倾向于 Hack，所以使⽤起来会很酷
vue-pretty-logger 做了什么
vue-pretty-logger 将你原来需要多写的⼀句 console.log() 简化成了 // {#} 的写法，在 loader 执⾏期间，获得该注释，并转换为相应的console 进⾏输出
简单来讲，vue-pretty-logger 做了你⾃⼰不想做的
有没有觉得突然世界都好玩了许多，OK，程序界惯例，我们来输出⼀只 Hello World
安装⽅式
你可以使⽤ npm or yarn 来安装 vue-pretty-logger，因为 logger 本⾝的性质就处于开发环境，所以你最好加上 -D or --dev 选项，这样在⽣产环境就不会打包此代码
npm install -D vue-pretty-logger
// or
yarn add --dev vue-pretty-logger
请确认你下载的是最新版本，因为新功能的使⽤只在最新版本中存在
⾸先，你得知道⼀点，vue-pretty-logger 其实是⼀个 webpack loader, 也就是说，你只需要将它配置在 webpack 对于 .vue ⽂件的处理loader 之中就可以了
...
module: {
rules: [
{
test: /.vue$/,
鳕鱼的做法u: [
{
'vue-loader'
},
{
'vue-pretty-logger',
options: {
...
}
}
]
}
]
}
...
需要注意的是，vue-pretty-logger 必须在 vue-loader 之前处理 .vue ⽂件, 所以，它必须处于 u 数组的最后⼀位
开始使⽤
接着，你就可以在你的 .vue ⽂件之中使⽤ vue-pretty-logger 了，如下
export default {
mounted () {
欧冠冠军次数排名const str = 'Hello World' // {#} -e
}
}
Perfect，成功输出 Hello World，但是， -e，⼜代表什么意思呢，该命令指定了当前的输出级别是 error 级别，⼀会我们会看到更多的命令
我们来看看 vue-pretty-logger 具体可以应⽤到什么地⽅
变量赋值
let str = 'Hello World' // {#}
// equals: console.log(str)
str = 'Goodbye World' // {#}
// equals: console.log(str)
函数声明
export default {
民族英雄岳飞
mounted () {
}，
methods: {
testFunc (p1, p2) { // {#} -sign
// equals: console.log(p1, p2)
}
}
}
函数调⽤
export default {
mounted () {
// equals: const result = stFunc(1, 'Hello'); console.log(result)
}，
methods: {
testFunc (p1, p2) { // {#} -i -t TestFunc
}
}
}
你可以为你的注释后⾯加上更多的命令来达成你的⽬的，当然前提是你懂得这些命令该怎么⽤
使⽤命令输出
输出级别命令有四个，-e -d -w -i，分别代表 console 的四个输出级别，error debug warn info，你可以在注释语句后⾯加指定的命令来输出指定的级别，如果你添加了多个级别命令，那么优先级为 -e > -d > -w > -i
其他命令如下
-t 你可以指定当前打印的使⽤应⽤什么 Tag ⽅便你去区分繁多的 Console 内容，-t TestFunc 将会为打印结果加上⼀个 TestFunc 的tag，前提是该输出语句拥有级别命令中的任意⼀种，结果如下
// 调⽤该函数
-i -t TestFunc
-sign ⽤来给输出的⽇志信息打上标记，⽐如上⾯的函数使⽤ -sign 之后的结果如下电影勇敢的心
// 调⽤该函数
image
-count ⽤来输出函数被调⽤的次数，同样，我们以 testFunc 来做实验，结果如下
// 调⽤该函数
image
-time ⽤来记录函数执⾏所需要的时间，修改我们的函数调⽤，结果如下
// 调⽤该函数
image尤溪人才网
我们发现，控制台多打印了⼀⾏ undefined，来告诉我们⽅法的返回值，但是我们不需要这个信息，只需要获得⽅法的执⾏时间，那么就需要下⾯的命令
-stop 停⽌默认动作，结果如下
// 调⽤该函数
image
向隅而泣的意思-profile 为你的函数添加⼀个 profile，相当于 console.profile() console.profileEnd()
// 调⽤该函数
如果你不愿意⽤ // {#} 的⽅式来表⽰打印注释，或者想要设定⼀个全局的 tag，那么 Option 就派上⽤场了
Loader Option 配置项
hook 配置项，默认为 #, 修改 hook 就可以达到修改 // {#} 的⽬的，⽐如我想修改为 Log，那么需要指定 hook: 'Log'，结果如下
治学三境界
tag 配置项，则是指定⼀个全局的 Tag，你可以这样修改，tag: 'PrettyLogger'
infoTag 配置项，指定 -i 输出时的前缀，默认为 INFO
infoTagStyle 配置项, 指定输出的样式，样式格式为 css 格式
error warn debug 的配置项与 info ⼀致
Example
提交 Issues
如果你在使⽤过程中碰到了任何的疑问，欢迎提交 Issues，你的建议将让 vue-pretty-logger 越来越完美，不过我们的发展⽅向只有⼀个，酷，简单
