vite-element 一个快速创建vite与elementUI项目代码的工具

vite-element 一个快速创建vite与elementUI项目代码的工具

起因

我在开发Vue项目的时候，经常会写一些重复的代码。比如导入ElementUI和vue-router，以及二次封装axios，甚至在编写表单的时候需要用到一些校验。

所以我就在想能不能编写一个工具，只需npm安装之后在命令行中执行一串命令就能够快速创建包含这些代码的项目，所以就有了vite-element。

模板

该工具使用之前需要安装git，因为它会从我的Github仓库中去拉去代码。这样今后如果想再去修改生成的代码，只需要更新模板仓库，而无需更新vite-element这个工具本身。

Github模板仓库：CairBin/ViteElementTemplate: This template should help get you started developing with vue 3, elementUI, vue-router and axios in Vite. (github.com)

该模板除了vite默认生成的那些代码外，还引入了vue-router和ElementUI，以及实现了axios的简单封装等。详情查看仓库说明文件。

使用

首先给出npm仓库地址：vite-element - npm (npmjs.com)

详细的配置已经在里面说明了，本文只介绍基本的安装和使用。

该工具非常简单，只需两步即可快速创建一个项目。

首先是安装。执行以下命令，在全局安装vite-element

npm install -g vite-element

然后执行项目创建命令，在执行此命令之前请确保git已经安装。

vite-element create ProgramName

在这个过程中会提示你是否使用镜像、配置生成模板的package.json文件和安装项目所需依赖。

如果你选择否，后面两者可以在创建项目后手动进行:

• 进入目录安装依赖

cd ProgramName
npm install

• 项目相关信息（例如关键字、许可证等）直接对package.json进行编辑

vite-element工具的Github仓库：CairBin/Vite-Element: This tool should help get you started developing with vue 3, elementUI, vue-router and axios in Vite. (github.com)

其他

此外我还开源了一个用于生成脚手架的工具，使用它可以构建一个属于你自己的简单的代码生成器，你只需要提供模板仓库和npm仓库及其镜像URL，然后publish到npm即可。

CairBin/ScaffoldMaker: This is a tool for generating scaffolding (github.com)