一、初识 Vite+vue3+Ts+pinia

先初识吧，先献上官网：
Vite中文网
Vue3中文网
pinia官网 / pinia中文文档
element-plus官网（PC UI库）
Vant4官网 （MB UI库）

二、相关环境安装

基础环境Node 16.8.0，这个就不说了吧。 没有的可以去这里下载：阿里NODE下载镜像地址

node -v // v16.8.0
npm -v // 7.21.0

// 安装 vite
npm install vite -g
...
vite -v // vite/3.0.2 win32-x64 node-v16.8.0

// ----------------------------------------------------
// 安装 vue/cli
npm install -g @vue/cli
...
vue -V // (注意这里是大V)@vue/cli 5.0.8

至此，基础环境完毕。下面开始构建项目。

三、创建项目

没啥好说的，跟着官方文档走：

npm init vite@latest
Project name: cq-function
Select a framework: vue
Select a variant: vue-ts


Scaffolding project in ****\cq-function...

Done. Now run:

  cd cq-function
  npm install
  npm run dev

到这里，项目安装完毕，然后就让你进入了。

cd cq-function
npm install
......// 经过10来秒的等待
npm run dev

  VITE v3.0.2  ready in 360 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

页面就出来了，至此、初始+创建完事

image.png

PS：此时可以直接npm run build打包

踩坑：
如遇：'HelloWorld' is declared but its value is never read.Vetur(6133)
打开编辑器 设置-> 搜索vetur 找到下图：取消打钩就可以了

image.png

完成上面就可以进行第二步开发了：
Vite+vue3+Ts+pinia实战（二：路由、pinia、UI库安装）