更酷的Console，更簡單的輸出方式，Enjoy it in Vue

Github: github.com/TaroXin/vue…

Table of content

• 老生常談 Console
• 不如換種姿式？
• vue-pretty-logger 作了什麼
• 安裝方式
• 開始使用
• 使用命令輸出
• Loader Option 配置項
• Example
• 提交 Issues
• Change Log

最新特性請關注 Change Log，添加了諸多支持，如需更多支持，請提交 Issues

老生常談 Console

提起瀏覽器的 Console API，相比你們都以爲是老生常談了，在咱們剛開始學習前端到使用各類框架馳騁在前端界之間，Console 的使用頻率歷來不會很低，不論是經過 Console.log() 打印一條信息，仍是 Console.error() 去輸出錯誤信息，都難免接觸到 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$/,
            use: [
                {
                    'vue-loader'
                },
                {
                    'vue-pretty-logger',
                    options: {
                        ...
                    }
                }
            ]
        }
    
    ]
}
...
複製代碼

須要注意的是，vue-pretty-logger 必須在 vue-loader 以前處理 .vue 文件, 因此，它必須處於 use 數組的最後一位

開始使用

接着，你就能夠在你的 .vue 文件之中使用 vue-pretty-logger 了，以下

<template>
    <div></div>
</template>

<script> export default { mounted () { const str = 'Hello World' // {#} -e  } } </script>
複製代碼

Perfect，成功輸出 Hello World，可是， -e，又表明什麼意思呢，該命令指定了當前的輸出級別是 error 級別，一會咱們會看到更多的命令

咱們來看看 vue-pretty-logger 具體能夠應用到什麼地方

變量賦值

let str = 'Hello World' // {#}
// equals: console.log(str)
str = 'Goodbye World' // {#}
// equals: console.log(str)
複製代碼

函數聲明

<script> export default { mounted () { }， methods: { testFunc (p1, p2) { // {#} -sign // equals: console.log(p1, p2) } } } </script>
複製代碼

函數調用

<script> export default { mounted () { this.testFunc(1, 'Hello') // {#} -stop -time // equals: const result = this.testFunc(1, 'Hello'); console.log(result) }， methods: { testFunc (p1, p2) { // {#} -i -t TestFunc } } } </script>
複製代碼

你能夠爲你的註釋後面加上更多的命令來達成你的目的，固然前提是你懂得這些命令該怎麼用

使用命令輸出

輸出級別命令有四個，-e -d -w -i，分別表明 console 的四個輸出級別，error debug warn info，你能夠在註釋語句後面加指定的命令來輸出指定的級別，若是你添加了多個級別命令，那麼優先級爲 -e > -d > -w > -i

其餘命令以下

-t 你能夠指定當前打印的使用應用什麼 Tag 方便你去區分繁多的 Console 內容，-t TestFunc 將會爲打印結果加上一個 TestFunc 的 tag，前提是該輸出語句擁有級別命令中的任意一種，結果以下

// 調用該函數
this.testFunc('Hello', 'World')
複製代碼

-sign 用來給輸出的日誌信息打上標記，好比上面的函數使用 -sign 以後的結果以下

// 調用該函數
this.testFunc('Hello', 'World') // {#} -sign
複製代碼

-count 用來輸出函數被調用的次數，一樣，咱們以 testFunc 來作實驗，結果以下

// 調用該函數
this.testFunc('Hello', 'World') // {#} -count
複製代碼

-time 用來記錄函數執行所須要的時間，修改咱們的函數調用，結果以下

// 調用該函數
this.testFunc('Hello', 'World') // {#} -time
複製代碼

咱們發現，控制檯多打印了一行 undefined，來告訴咱們方法的返回值，可是咱們不須要這個信息，只須要得到方法的執行時間，那麼就須要下面的命令

-stop 中止默認動做，結果以下

// 調用該函數
this.testFunc('Hello', 'World') // {#} -time -stop
複製代碼

-profile 爲你的函數添加一個 profile，至關於 console.profile() console.profileEnd()

// 調用該函數
this.testFunc('Hello', 'World') // {#} -time -stop -profile
複製代碼

若是你不肯意用 // {#} 的方式來表示打印註釋，或者想要設定一個全局的 tag，那麼 Option 就派上用場了

Loader Option 配置項

hook 配置項，默認爲 #, 修改 hook 就能夠達到修改 // {#} 的目的，好比我想修改成 Log，那麼須要指定 hook: 'Log'，結果以下

this.testFunc('Hello', 'World') // {Log} -time -stop
複製代碼

tag 配置項，則是指定一個全局的 Tag，你能夠這樣修改，tag: 'PrettyLogger'

infoTag 配置項，指定 -i 輸出時的前綴，默認爲 INFO

infoTagStyle 配置項, 指定輸出的樣式，樣式格式爲 css 格式

error warn debug 的配置項與 info 一致

Example

你能夠在 Github 倉庫找到 example/，倉庫地址爲 github.com/TaroXin/vue…，若是你以爲vue-pretty-logger符合你的口味，那不妨點擊一下 star，畢竟支持就是動力

提交 Issues

若是你在使用過程當中碰到了任何的疑問，歡迎提交 Issues，你的建議將讓 vue-pretty-logger 愈來愈完美，不過咱們的發展方向只有一個，酷，簡單

Change Log

歡迎提交 Issues，你的需求與問題都會逐步獲得完成與修復

• V0.9.0 查看Issues

// 添加對於 js 文件的支持，以下配置

{
    test: /\.js$/,
    use: ['babel-loader', 'vue-pretty-logger/lib/in-js'],
    exclude: /node_modules/
}
複製代碼

• V0.8.8 查看Issues

// 添加 -from 參數，以下使用

this.testFuncCall(p1, p2) // {#} -sign -from

// equals:
console.log(`p1: ${p1}, p2: ${p2}`)
const result = this.testFuncCall(p1, p2)
console.log(`result: ${result}`)
複製代碼

• V0.8.7 查看Issues

// 添加對於 await 語句的支持，處理方式與函數調用一致

await test() // {#} -e -sign -time
// equals: const result = await test(); console.error(`result: ${result}`)
複製代碼

• V0.8.6 查看Issues

// 支持回調函數的調用，輸出回調函數參數

this.$bus.$on('gotData', (data) => { // {#} -i -sign
    // equals: console.info(`data: ${data}`)
})

this.$bus.$on('gotData', function (data) { // {#} -i -sign
    // equals: console.info(`data: ${data}`)
})

複製代碼

• V0.8.5 查看Issues

fix bug: Can not read property 'content' of null
複製代碼