【完美实现】VITE + VUE3 + SVG图片解析+element-plus开发环境初始化（基于macos）

一、最终效果

废话少说，直接上效果

这是我的初始化程序提供的页面，在这个页面上实现了一下几个功能：

1、vite初始化之后的路由安装和初始化；

2、标准SVG的解析，并可调整大小、颜色；

3、element-plus的安装和使用

二、背景介绍

1、我是后端开发者，对前端一知半解，能写一些vue文件，但是vue的环境搭建总是难倒我，按照上面写的实践总是不成功，每次新开个项目都要重复经历一个痛苦的过程，于是痛定思痛搞了个脚本一劳永逸的解决vite vue基础环境的问题。

2、vue-cli的官方脚手架安装后的解释程序默认是js的，但目前网上的示例或包都是支持ts的，虽然对于前端人员明白如何协调，但是我总是搞得一团糟，于是我就果断放弃官方脚手架，而选用了vite，vite默认激活后就是ts的环境，相当于在解释器这块一劳永逸了。但是vite没有router ，这个对于前端老手而言依旧没有难度，但是对于我，还要找demo进行移植，中间各种波折，算了搞个脚本吧。

3、每次装一个包总是想先看看效果，以验证包安装正确，如果没有实现也不知道是安装过程不正确还是我在移植过程中出现了问题，总之，由于每个步骤都可能出现问题，那就都固定下来，不知道有没有新手和我的想法是一样的。

4、由于macos系统每次运行个什么命令就要加sudo，有时候命令是正确的，但是没有加sudo系统会报错，弱鸡的我以为命令错了，于是开始各种找问题，简直就是又菜还爱玩。

三、直接上代码

1、官方初始化流程

vite的初始化流程是不能放在脚本中实现的，因为有交互的过程，这块我懒得研究了，直接写在上面手动操作就好。此处可参照vite中文官网

由于我是macos 电脑，所以后面的命令都有sudo。

sudo npm init vite@latest

这一步是项目初始化会问3个简单问题，截图如下

这个没什么可说的，继续...

系统提供3条命令，进入目录，安装必须的包，运行项目，于是大家得到一个初始化页面。

这一步很简单，不赘述

2、安装基础库

这里要安装的基础库是 router 、element-plus、 svg图片解释器

1、router难度不大，只要把官方示例中的包装上，在main.ts里调用即可，另在app.vue能看到效果；

2、emement-plus难度也不大，主要是把官方的多语言识别加上，不然开发到中间发现按钮内容是英文，还要找半天，另在app.vue能看到效果；

3、也是最麻烦且必须做的，就是加载一个能用的svg图片解释器