做项目做烦了就想找点乐子。

比如,我们可以自定义脚手架提示。

 webpack.dev.conf.js 

54-78 行

  1. module.exports = new Promise((resolve, reject) => {
  2. portfinder.basePort = process.env.PORT || config.dev.port
  3. portfinder.getPort((err, port) => {
  4. if (err) {
  5. reject(err)
  6. } else {
  7. // publish the new Port, necessary for e2e tests
  8. process.env.PORT = port
  9. // add port to devServer config
  10. devWebpackConfig.devServer.port = port
  11.  
  12. // Add FriendlyErrorsPlugin
  13. devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
  14. compilationSuccessInfo: {
  15. messages: [`万物皆虚,万事皆允。 \nYour application is running here: http://${config.dev.host}:${port}`],
  16. },
  17. onErrors: config.dev.notifyOnErrors
  18. ? utils.createNotifierCallback()
  19. : undefined
  20. }))
  21.  
  22. resolve(devWebpackConfig)
  23. }
  24. })
  25. })

最后效果是这样的:

vue : 自定义脚手架提示的更多相关文章

  1. WebStorm开发Vue自定义标签提示是未知标签解决办法

    打开 File -> Settings -> File Types 在右侧的窗口中找到Vue.js Template 并选中,在下面的窗口中添加 *.vue 即可解决问题. 修改后

  2. 基于Yeoman实现自定义脚手架

    什么是脚手架? Yeoman是什么? 实现自定义脚手架 基于Yeoman实现Vue-cli 一.什么是脚手架? 手脚架从功能上来讲就是创建项目初始文件,这其中包括生成功能模块配置.自动安装依赖.自动生 ...

  3. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  4. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  5. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  6. 分享一个vue项目“脚手架”项目的实现步骤

    搭建缘由 源于公司每次新启动一个由多人协同开发的项目都由负责人初始化项目之后,每个人再去从私服pull一下项目才开始开发.但是每次初始化工程都是一步步的造轮子,一个个依赖去安装,新建一个个不同功能的文 ...

  7. Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件

    基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航 最近一直在倒腾Nuxt项目,由于Nuxt.js是基于Vue.js的服务端渲染框架,只要是会vue,基本能很快上手了. 一般 ...

  8. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  9. vue自定义插件封装,实现简易的elementUi的Message和MessageBox

    vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template>     <transition  ...

随机推荐

  1. Beta冲刺--冲刺总结

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 Beta冲刺--冲刺总结 作业正文 如下 其他参考文献 ... Beta冲刺 ...

  2. 入门大数据---Kafka深入理解分区副本机制

    一.Kafka集群 Kafka 使用 Zookeeper 来维护集群成员 (brokers) 的信息.每个 broker 都有一个唯一标识 broker.id,用于标识自己在集群中的身份,可以在配置文 ...

  3. git和github入门指南(2.1)

    2.git常用命令 2.1.git的三个区 1.工作区 工作区就是你项目所在目录,这个目录是可以非常直观的看到的,编写代码主要在这个目录进行,例如: 2.暂存区 暂存区从字面上去理解就是用来暂时保存项 ...

  4. 【MyBtis】获取数据插入postgresql后返回的自增id

    问题描述 数据库采用的是postgresql,以下面的rule表为例,该表的id设置为自增,那么经常有这样的需求,在执行insert操作后,紧接着需要获取该记录的自增id往中间表中插入数据,或者是再根 ...

  5. mycat增加开机自启

    一.安装及配置: 见https://github.com/MyCATApache/Mycat-Server 二.增加开机自启: 1.添加开机自启脚本:vim /etc/init.d/mycat.sh, ...

  6. 问题记录--jekyll serve 启动的时候如何指定80端口

    jekyll serve --host 0.0.0.0 --port 80 启动失败

  7. PHP用PHPExcel导出有多个工作表的Excel表格(thinkPHP3.2.3)

    直接上代码: //导出excel public function excel() { //引入相关文件 import("Org.Util.PHPExcel"); import(&q ...

  8. JVM源码分析之JVM启动流程

      原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 “365篇原创计划”第十四篇. 今天呢!灯塔君跟大家讲: JVM源码分析之JVM启动流程 前言: 执行Java类的main方法,程序就能运 ...

  9. directive 实例讲解

    http://my.oschina.net/ilivebox/blog/289670 gulp-nodemon http://www.zhihu.com/question/32123388?sort= ...

  10. redo log 与 binlog

    redo log 与 binlog   redo log redo log (重做日志)是处于存储引擎层的,是InnoDB引擎特有的 redo log 存储的是物理日志 --- 即,"在某个 ...