使用 NodeJS 搭建 Vue + TypeScipt 快速构建工具

前言: 为保证使用 Typescript 开发 Vue 的规范性和开发效率，添加组件、页面、路由、store 的时候尽量使用工具添加，添加组件或页面之后，请参照注释位置实现对应的方法和逻辑。

目录

环境搭建

  • 安装 NodeJS
  • 安装 TypeScipt
  • 安装 Vue-cli

创建项目

  • 使用 Vue-cli 创建一个 TypeScipt 项目

    笔者使用的 Vue 配置，可根据自己的需求增加

配置工具

  • 创建 tools 根目录文件

  • 创建 command 文件 (用于添加组件或者页面)

      add.ts (根据tpl模版生成组件或页面)
    
  router.ts (根据tpl模版生成路由)
    
  store.ts  (根据tpl模版生成store)

  • 创建 tpl 文件 (模版文件)

  • 创建 util 文件 (工具集)

  • 创建 cli.ts 文件 (命令配置)

完成的快速构建工具 文件目录

源代码地址

使用NodeJS 搭建 Vue + TypeScipt 快速构建工具的更多相关文章

  1. VUE项目快速构建

    IDE  :VScode 1.新建项目文件夹 ctrl+~   调出命令板,/IDE找到当前文件夹右键 点击‘在命令提示符中打开’ 安装 node:官网(https://nodejs.org/en/d ...

  2. NPM、nodeJS安装，grunt自动化构建工具学习总结

    一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...

  3. 转载： 我如何使用 Django + Vue.js 快速构建项目

    原文链接: https://www.ctolib.com/topics-109796.html 正文引用如下 引言 大U的技术课堂 的新年第一课,祝大家新的一年好好学习,天天向上:) 本篇将手把手教你 ...

  4. vue项目自动构建工具1.0，支持多页面构建

    该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处.对于多页面开发,也是相当便利,不用手动撸entry和plugin. git: ...

  5. 1. mac 手动安装nodejs搭建vue环境

    为什么选择手动安装nodejs呢? 因为使用mac自动安装还要更新homebrew,还要安装xcode tool, 太费劲了,不如手动安装, 卸载起来也方便 再一个, 我是后台开发者, 对前端页面, ...

  6. Mac搭建Vue开发环境

    1.安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ ...

  7. 前端开发构建工具gulp的安装使用

    曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...

  8. SpringBoot：使用IDEA快速构建项目

    西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! SpringBoot ...

  9. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  10. 【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具

    前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...

随机推荐

  1. 23 暑假友谊赛 No.4(UKIEPC 2017)

    23 暑假友谊赛 No.4(UKIEPC 2017) Problem A Alien Sunset hh,开始一眼差分,但是写寄了qwq,后来换枚举过了(Orz,但是看学长差分是能做的,我就说嘛,差分 ...

  2. CH04_程序流程结构

    CH04_程序流程结构 程序流程结构 C/C++支持最基本的三种程序运行结构: 顺序结构:程序按顺序执行,不发生挑战 选择结构:依据条件是否满足,有选择的执行相应的功能 循环结构:依据条件是否满足,循 ...

  3. CentOS 进入救援模式

    因某些修改操作,导致系统重启后无法正常启动,此时需要进入救援模式,修复错误配置即可. 1.重启系统后,进入grup引导页面,选中第一项然后按"e" 进入编辑模式: 2.通过↓键找到 ...

  4. Docker高级：Redis集群实战！4主4从缩容到3主3从，怎么处理？

    在上一篇,我们学会了redis集群的扩容.从3主3从扩容到4主4从. 那么,接着,活动过去了.流量没有那么大了.需要缩容了.从4主4从缩容到3主3从了.那么这个时候又该怎么处理呢? PS本系列:< ...

  5. 【YashanDB知识库】主备延迟故障分析方法

    [标题]主备延迟故障分析方法 [问题分类]故障分析 [关键字]Yashandb.主备延迟 [问题描述]当数据库备机出现回放延迟时,需要通过一些手段分析延迟的原因.通过数据库的系统视图或操作系统监控数据 ...

  6. Openharmony 跑 CV 应用

    最近有个项目,老同学让帮忙验证一个在ARM 板上跑 OpenHarmony,然后再集成一个CV算法上去,写这个文章主要是整理一下思路.如果有思路不对的地方,也烦请指出. 1. 个人做纯软件比较多,所以 ...

  7. EF Core报错“Format of the initialization string does not conform to specification starting at index 0.”

    问题分析: 今天在EF Core数据库迁移的过程中无意中发现此错误,我的项目仅仅复制黏贴了配置文件而已,自此发现是数据库配置文件json在作祟. 对比了下发现是.json文件没有被设置"复制 ...

  8. JS实现树形结构数据的模糊搜索查询

    简单示例: 需求:输入 "题2" 字,希望树形结构中带有 "题2" 字的项显示,即使父节点没有,但子节点含有,父节点仍要返回. let arr = [ { ti ...

  9. Go runtime 调度器精讲（三）：main goroutine 创建

    原创文章,欢迎转载,转载请注明出处,谢谢. 0. 前言 回顾下 上一讲 的内容.主线程 m0 蓄势待发,准备干活.g0 为 m0 提供了执行环境,P 和 m0 绑定,为 m0 提供活,也就是 goro ...

  10. Angular 18+ 高级教程 – NgModule

    前言 NgModule 在 Angular v14 以前是一门必修课.然而,自 Angular v14 推出 Standalone Component 以后,它的地位变得越来越边缘化了. 本教程从开篇 ...