首页 > 其他分享 >『手撕Vue-CLI』自定义指令

『手撕Vue-CLI』自定义指令

时间:2024-04-17 22:44:52浏览次数:21  
标签:bin Vue CLI 自定义 指令 nue cli

前言

最近一直忙于工作项目上面的事情,精力少了很多,所以一直没更文,很多技术点,都做在我自己的 Notion 笔记库中,今天,我决定要改变一下方式,所以又重新来更文了。

在前面的章节中已经分享了 VueRouter,实现了 VueRouter 之后,到此为止,Vue,Vuex,VueRouter 就都已经搞定了。

到这里,大家应该对 Vue 的使用都已经非常的熟练了,在 Vue 中,除了有 Vuex,VueRouter,在 Vue 全家桶中还有 Vue-CLI(Vue 脚手架)因为我们在企业的开发当中,想要快速生成项目的基础结构,包括配置文件、目录结构和一些基础代码,如果是我们自己去做的话,是不是非常的耗时,而且,这个过程每次都是重复的,只不过里面的一些项目信息是要改变的而已。

关于 Vue-CLI 的使用与概述如果有不懂的小伙伴可以去我之前分享的文章中学习,文章地址:

在这个文章当中深度的介绍了 Vue 技术栈所有知识。

因为前面已经将 Vue 全家桶大部分内容已经手写了一遍,目前就差 Vue-CLI,本篇开始就会陆续将 Vue-CLI 底层实现过程分享出来给大家一起学习。

手写 Vue-CLI,尤其是对于前端开发者来说,可以带来多方面的好处,可以深入地理解框架的工作原理和内部机制,有助于我们提升编程技能,增强问题解决能力,因为在手写 Vue-CLI 的过程中,会遇到各种各样的问题和挑战,解决这些问题可以增强你的调试和问题解决能力,可以帮助我们未来的项目中避免类似的错误。

手写 Vue-CLI 是一个从零开始的,需要考虑如何组织代码、如何划分模块,帮助你学习软件架构设计的基本原则和最佳实践(架构设计

这些好处呢还没完,如果你将我后续分享的内容全部阅读完,你还会收获到,新工具和新知识点方法的使用与理解,提高创新思维,提高个人影响力这几点。

回顾 Vue-CLI

先来简单的看看 Vue-CLI 是如何使用的,先到官网:

进入之后,我们首先得要安装 Vue-CLI:

好,看到这,我的问题来了,需要安装 Vue-CLI,怎么安装的,是不是在终端中输入 npm install -g @vue/cli 这个是什么?是不是指令。

所以说我们是不是可以根据这点开始撕 Vue-CLI,也正是本文首先要介绍的内容。

到这里有的人可能就会问了,怎么在控制台输入 npm install xxx 就会去执行和帮我们干一些事情呢?这个问题的答案可以在我之前分享的 NodeJS 文章中寻找答案,文章地址:

在这个系列中,有一个手写Node模块系统,在里面就有详细的介绍:

好的就指引到这里(后续的步骤我都是直接实战写代码,多多少少还是会带一点解释吧),我们开始撕 Vue-CLI 第一步,完善我们的自定义指令。

官方叫 Vue-CLI 那我的就给它命名为 nue-cli !,这个名字是我自己随便取的,大家可以随意取名。

到这里,我已经讲了我最近在干嘛,然后又回顾了一下 Vue-CLI 的使用,发现了 Vue-CLI 是一个指令,然后就到了现在这一步,自定义指令 (nue-cli)。

初始化项目

首先,需要初始化一个项目,这个项目是一个 Node 项目,所以我们需要使用 npm init -y 命令来初始化一个项目。

npm init -y

编写自定义指令

到这里项目初始化完成,接下来创建一个 JS 文件,在项目根目录下,新建一个 bin 文件夹,然后在 bin 文件夹下新建一个 index.js 文件。

index.js 文件中,我编写了一段代码,在头部通过 #! /usr/bin/env node 告诉系统将来这个文件需要在 NodeJS 环境下执行。

#! /usr/bin/env node

然后在 package.json 文件中,新增一个名为 bin 的 key,这个 Key 的作用是告诉系统,当我执行 nue-cli 这个指令的时候,系统应该去执行哪个文件。

"bin": {
  "nue-cli": "./bin/index.js"
},

到这里,我们的自定义指令已经完成了,接下来我们就可以在终端中输入 nue-cli 来执行我们的指令了。

nue-cli

再执行 nue-cli 之前我这里说一个注意点就是我们的项目的包名不能是你指令的名字,否则会报错:

这里是我的问题,所以我们需要修改一下:

看到了打印内容了,是因为我在 index.js 文件中写了一行打印语句代码,如果我不加这行代码,那么执行 nue-cli 指令的时候,终端中是不会有任何内容的。

所以需要在 index.js 文件中写一些内容,这样我们执行 nue-cli 指令的时候,终端中就会有内容了。

添加一行打印语句代码:

console.log('Hello Nue-CLI')

将指令链接到全局

Key 新增好了之后再通过 npm link 命令将这个指令链接到全局:

这样我们就可以在随意的地方使用这个指令了,调出终端,输入 nue-cli

可以看到,我们的指令已经生效了。

好了到这里吧这篇文章就到这里了,下一篇继续往下,总结一下总体流程其实就几步:

  1. 初始化一个 Node 项目
  2. 在项目中新建一个 bin 文件夹
  3. bin 文件夹下新建一个 index.js 文件
  4. index.js 文件中写入代码,通过 #! /usr/bin/env node 告诉系统这个文件需要在 NodeJS 环境下执行
  5. package.json 文件中新增一个 bin 的 key,告诉系统当执行 nue-cli 指令的时候,系统应该去执行哪个文件
  6. 通过 npm link 命令将这个指令链接到全局

还有一个注意点就是我们的项目的包名不能是你指令的名字,否则会报错。

标签:bin,Vue,CLI,自定义,指令,nue,cli
From: https://www.cnblogs.com/BNTang/p/18141984

相关文章

  • vue3 快速入门系列 —— 组件通信
    vue3快速入门系列-组件通信组件通信在开发中非常重要,通信就是你给我一点东西,我给你一点东西。本篇将分析vue3中组件间的通信方式。Tip:下文提到的绝大多数通信方式在vue2中都有,但是在写法上有一些差异。准备环境在vue3基础上进行。新建三个组件:爷爷、父亲、孩子A、......
  • .net 通过特性及继承IValidatableObject完成自定义表单验证
    Model:publicclassPartAItem:IValidatableObject{[Required]publicstringTOKEN{get;set;}[Required]publicstringPROJECT_ID{get;set;}publicstringPART{get;set;}[Required]publicstringFORM_ID{get;set;......
  • 通过innerHTML vue不起作用
    innerHTML 在Vue中直接使用可能不会如预期工作,因为Vue是数据驱动的,它期望你通过操作数据来更新视图,而不是直接操作DOM。当你使用 v-html 指令时,Vue会将内容作为HTML解析,但如果你直接修改DOM的 innerHTML,Vue就无法追踪变动了。解决方法:使用Vue的数据绑定功能......
  • vue中websocket的使用---详解
    一、什么是webscoketWebSockets 是一种先进的技术,它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API,可以向服务器发送消息并接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应。 WebSockets这种技术中有一个接口名为WebSocket,它是一个用于连接WebSoc......
  • 点击菜单生成tabs(vue3.0)
    1.安装vuex npminstallvuex@next--save在main.js中引用vuex2.在main.js同级目录新建store/store.js文件 代码:import{createStore}from'vuex'exportdefaultcreateStore({ state:{ tabsList:[] }, mutations:{ addTab(state,tab){ //判断是否......
  • 08 Vue3项目搭建后台管理系统
    项目配置elementPlus1.下载安装npminstallelement-plus@element-plus/icons-vue2.main.ts全局注册import{createApp}from'vue';import{createPinia}from'pinia';//1.引入elementPlusimportElementPlusfrom'element-plus';//......
  • vue页面表格组件高度控制
    //浏览器窗口内部高度console.log("window.innerHeight",window.innerHeight);console.log("document.clientHeight",document.documentElement.clientHeight);console.log("body.clientHeight",document.body.clientHeight);//获取vue组件元素的高度console.l......
  • vue代理问题设置
    proxy:{'/api':{target:"http://192.168.10.253:8082",//跨域地址changeOrigin:true,//支持跨域rewrite:(path)=>path.replace(/^\/api/,"")//重写路径,替换/api}} c......
  • vue3 + vant4 checkbox多选弹框
    实现效果代码如下多选组件DictSelect.vue<template><van-popup:show="showPicker"position="bottom":style="{height:'34vh'}"><divclass="con"><divclass="confirmBtns"&......
  • ContextMenu【自定义】
    ContextMenu样式对应的xaml代码: <ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><StyleTargetType="{x:Type......