使用 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. 远程采集服务器指标信息（二）通过telnet执行远程命令

    远程采集服务器信息,比如说磁盘信息.内存信息. 现介绍java通过telnet执行命令采集服务器信息,比如说执行df.ls.top. 这里在linux环境通过root或者其他用户登录执行解析方式有点出 ...

  2. 2023 CCPC 桂林题解

    gym H. Sweet Sugar 一个经典贪心是从下到上,如果子树 \(u\) 剩下的部分(一定包含 \(u\))包含合法连通块,那么这个连通块给答案贡献 \(1\),切断 \(u\) 与 \(f ...

  3. kali常用配置

    用户须知 1.免责声明:本教程作者及相关参与人员对于任何直接或间接使用本教程内容而导致的任何形式的损失或损害,包括但不限于数据丢失.系统损坏.个人隐私泄露或经济损失等,不承担任何责任.所有使用本教程内 ...

  4. 【原创】VSCode 快捷键汇总（已整理成一张 A4 纸大小，方便打印）

    由于经常记不住 VSCode 的快捷键,每次查找不方便,于是乎做了一份 VSCode 快捷键汇总,已整理成一张 A4 纸大小,方便打印,这样查找就直观多了~ 直接保存图片,横向打印即可.

  5. idea下spring切换jdk版本

    1.首先打开项目配置设置 2. 修改project中的配置 3. 修改modules中的配置 这个方法不需要修改pom.xml文件 如果有问题请指正   及时修改 2022年9月10日16:42:16

  6. 在 Mac 上使用 X11

    有时我们需要在服务器上运行一个 GUI 程序,然而我们是通过 SSH 连接到服务器的,看不到图形界面,怎么办呢?我们可以通过 X11 将 GUI 程序的界面转发到本地. 在 Mac 上使用 X11 需 ...

  7. 【YashanDB知识库】yasdb jdbc驱动集成druid连接池，业务(java)日志中有token IDENTIFIER start异常

    问题现象 客户的java日志中有如下异常信息: 问题的风险及影响 对正常的业务流程无影响,但是影响druid的merge sql功能(此功能会将sql语句中的字面量替换为绑定变量,然后将替换以后的sq ...

  8. 生产级Redis 高并发分布式锁实战2：缓存架构设计问题优化

    对于大多数高并发场景,都是读多写少.比如商品信息,医生挂号信息等.提交订单页只有一个操作. 对于一个普通的缓存架构设计,实现商品的增删改查功能,代码如下: Controller 层 @RestCont ...

  9. web前端常用的五种方式搭建本地静态html页面服务器

    方式一:live-server live-server是一款npm工具,可以在项目目录启动一个node服务,然后直接在浏览器中预览,并且自动全局监听实时更新. 两种安装方式: 全局安装 npm i l ...

  10. ASP.NET Core – View Component

    前言 以前写过 Asp.net core 学习笔记 ( ViewComponent 组件 ), 这篇作为翻新版. 参考 Docs – View components in ASP.NET Core D ...