首页 > 其他分享 >『手撕Vue-CLI』完善提示信息

『手撕Vue-CLI』完善提示信息

时间:2024-06-16 13:56:04浏览次数:22  
标签:npm 完善 Vue console CLI chalk 提示信息 log

前言

经过『手撕Vue-CLI』自动安装依赖,已经实现了自动安装依赖的功能。

然而,虽然项目已复制并安装依赖,但其提示信息并不够友好,于是我试着去运行了一下vue create,发现其提示信息是这样的:

于是我决定完善提示信息,也借此机会完善一下项目的代码,变量命名等。

完善提示信息

完善变量命名

首先将之前写死的 destPath 删除掉,用 downloadTemplate 函数的返回值代替, 更名为 sourcePath

我打开了 IDEA 的 diff 工具,对比了一下两个版本的代码,让大家看一下变化。

抽取 path.resolve(projectName) 为变量

完善 Creating project 提示信息

接下来的内容就是我会参考官方的提示词来完善提示信息。

当我执行 create 命令时,官方会告诉我们所创建项目最终的路径,那我也来完善一下。

console.log(`✨  Creating project in ${destPath}`)

完善 downloading template 提示信息

接下来是完善下载模板的提示信息,其它的内容没有改变。

console.log(`

标签:npm,完善,Vue,console,CLI,chalk,提示信息,log
From: https://www.cnblogs.com/BNTang/p/18250553

相关文章

  • 077:vue+cesium 显示等高线
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第077个示例文章目录一......
  • clion+msvc+qml demo
    CMake设置-DCMAKE_PREFIX_PATH=C:\Qt\6.6.2\msvc2019_64demo工程结构:├───CMakeLists.txt└───main.cpp└───Main.qml└───MyObject.cpp└───MyObject.h└───MyRectangle.qmlCMakeLists.txtcmake_minimum_required(VERSION3.16)project(qmltest02......
  • vue 使用vite-plugin-svg-icons
    安装npminstallvite-plugin-svg-icons--savenpminstallfast-glob--save在vite.config.js配置 import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{createSvgIconsPlugin}from'vite-plugin-svg-icons......
  • WPF Image Image clip EllipseGeometry
    <Windowx:Class="WpfApp169.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft......
  • Vue3动态组件的基本用法
     和Vue2动态组件写法不同的是,:is传递的内容需要先定义,再给:is使用<template><div><component:is="currentComponent"></component></div></template><scriptsetup>importMyComponentfrom'./MyComponent.vue';......
  • 这个vue3的后台管理系统虽然简洁但不简单
    今天介绍一个新的Vue后台管理框架,相比其他后台功能丰富管理系统,这个后台管理系统可以用干净简洁来形容——Nova-admin Nova-adminNova-admin 是一个基于Vue3、Vite5等最新技术的后台管理平台。用简单的方式实现完整功能,并尽可能的考虑代码规范,易读易理解无过度封装,方便二次......
  • vue3生命周期
    Vue3中有两个注册生命周期的方法,第一个是选项式的API风格,另一个的组合式的API风格。Vue3的生命周期完全兼容Vue2的生命周期。生命周期选项可以和组合式API中的生命周期钩子混合使用,不过最好不要将两者混合使用。生命周期的实现原理其实就是先将用户注册的生命周......
  • 通过Vue3+高德地图的JS API实现市区地图渲染
    效果图:核心代码:<scriptsetup>import{onMounted,onUnmounted}from'vue';importAMapLoaderfrom'@amap/amap-jsapi-loader';import{message}from'ant-design-vue';importschoolfrom'@/assets/icons/school......
  • springboot+vue+mybatis家电系统+PPT+论文+讲解+售后
    随着信息互联网购物的飞速发展,一般企业都去创建属于自己的电商平台以及购物管理系统。本文介绍了家电销售系统的开发全过程。通过分析企业对于家电销售系统的需求,创建了一个计算机管理家电销售系统的方案。文章介绍了家电销售系统的系统分析部分,包括可行性分析等,系统设计部分主......
  • 基于Java+SpringBoot+Vue前后端分离宠物管理系统(源码+万字LW+PPT+部署教程)
    博主介绍:✌全网粉丝10W+csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌一、作品包含源码+数据库+设计文档LW+PPT+全套环境和工具资源+部署教程二、项目......