Cooler Console, более простой вывод, наслаждайтесь во Vue

внешний интерфейс GitHub Vue.js Perfect

Github: GitHub.com/tar ox in/v UE…

Table of content

  • клише Консоль
  • Почему бы тебе не изменить свою позу?
  • vue-pretty-loggerЧто вы наделали
  • Способ установки
  • начать использовать
  • Использовать вывод команды
  • Элемент конфигурации Loader Option
  • Example
  • Отправить проблемы
  • Change Log

Пожалуйста, обратите внимание на последние функцииChange Log, добавлено много поддержки, для получения дополнительной поддержки, пожалуйста, отправьтеIssues

клише Консоль

Когда дело доходит до API консоли браузера, все думают, что это клише.От начала изучения фронтенда до использования различных фреймворков для скачки в мире фронтенда частота использования консоли никогда не была очень низкий, будь то через Console.log() для печати сообщения или Console.error() для вывода сообщения об ошибке, неизбежно касание консоли

Однако иногда мне кажется, что Консоль очень скучна, будь то нативный API или различные библиотеки, расфасованные в Интернете, в этом нет ничего нового, и она всегда бродит между несколькими API, иvue-pretty-loggerВнешний вид консоли должен сломать ограничение Консоли.Кто указывает, что Консоль должна использоваться таким образом?

vue-pretty-loggerПросто позволь тебе иметь два чувства,Круто, просто

Почему бы тебе не изменить свою позу?

Давайте посмотрим, как используется консоль

let num = 123
console.log(num) // result -> 123

На самом деле это не сложно понять.Ведь API Консоли такой простой.В интернете много специфических способов использования Консоли.Автор не будет их здесь повторять.

посмотри сноваvue-pretty-logger

let num = 123 // {#}
// result -> 123

Если вы не понимаете, что делается, я объясню это подробно далее, но на первый взгляд, нам не нужно писать лишнее предложение вывода, и этот метод больше склонен к взлому, так что это будет круто использовать

vue-pretty-loggerЧто вы наделали

vue-pretty-loggerПоставьте предложение, которое вам изначально нужно было написать большеconsole.log()упрощено до// {#}Способ написания, при выполнении загрузчика аннотация получается и преобразуется в соответствующийconsoleсделать вывод

просто говоря,vue-pretty-loggerделай то, что ты не хочешь делать

Вы думаете, что вдруг, нас много, ОК, процедур, а давайте выведем одну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>

Идеальный, успешный результат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')

-i -t TestFunc

-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/tar ox in/v UE…, если ты чувствуешьvue-pretty-loggerЕсли это соответствует вашему вкусу, пожалуйста, нажмитеstar, ведь поддержка - это мотивация

Отправить вопросы

Если у вас возникнут какие-либо вопросы во время использования, пожалуйста, отправьтеIssues, ваше предложение позволитvue-pretty-loggerВсе совершеннее, но наше направление развития только одно,круто и просто

Change Log

Материалы приветствуютсяIssues, ваши потребности и проблемы будут постепенно завершены и исправлены

// 添加对于 js 文件的支持，如下配置

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

// 添加 -from 参数，如下使用

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

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

// 添加对于 await 语句的支持，处理方式与函数调用一致

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

// 支持回调函数的调用，输出回调函数参数

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}`)
})


fix bug: Can not read property 'content' of null
Категории