<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <h4>一、下载</h4> 讯享网
官网下载,建议下载长期支持版本
二、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官网参考
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/156519.html