一、下载
官网下载,建议下载长期支持版本
二、Vue项目-创建
三、API风格
1、注意点
选项式 API 在 Vue 2 和 Vue 3 中都是可用的，而组合式 API 则是 Vue 3 特有的新特性，不过可以通过插件形式让 Vue 2 也能享受到。
2、选项式
3、组合式
四、TypeScripe
1、TypeScripe是JavaScripe的超集
2、安装
3、使用
ts给对象类型抽取用interface、给其他类型抽取用type
五、Element
1、分类
- Element UI: 基于 Vue 2.x 开发，官网
- Element Plus: 基于 Vue 3.x 开发，完全兼容 Vue 3.x 的新特性，官网
- 其他组件库：tdesign，官网
2、安装
参照官方文档，安装Element Plus组件库（在当前工程的目录下）：npm install element-plus --save(局部安装，一个项目只需要做一次即可)
3、引入Element组件库
4、基础使用案例
5、表单校验
6、watch侦听
六、Vue Router
1、Vue的官方路由，Vue中的路由：指的是路径 与 组件 的对应关系
2、Vue Router中的三个核心组成部分
- router实例，维护了应用的路由信息（routes）
- ：路由链接组件
- ：动态视图组件
3、使用
1、安装、导入
2、新建index.ts
3、新建views/layout/index.vue页面
4、在合适位置定义动态视图组件
七、vite实现反向代理、拦截器、提取公共路径
1、vite的反向代理只在VScode本地生效，vue项目放在服务器上时，还需要依靠nginx进行反向代理
2、导入工具类request.ts
3、vite.config.ts配置文件添加反向代理
4、axios请求提取到dept.ts
5、axios请求调用
八、Pinia状态管理工具
1、安装引入
2、自定义stores/counter.ts
3、外部调用
4、Pinia持久化
1、默认情况下，浏览器画面一刷新数据就丢失了
2、安装引用
3、Store中开启pinal持久化功能
九、打包部署
- VScode执行npm脚本build，打包完成的文件都存在dist文件夹中
- 下载nginx
- 部署：将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下
- 修改nginx.conf文件，配置反向代理
- 启动：双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号。
十、相关工具
安装参考链接
十一、项目创建
- npm创建：提供了一些其他插件，创建方式相对简陋，Vue3参考
- vite创建：模块集中，可以自由选择，vite官网参考
- TDesign模板项目创建：基于PC、移动模板页面，进行二次开发时使用，TDesign官网参考
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/47098.html