一、初识 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库安装)
网友评论