1. 首页首页
  2. 编程日记编程日记

vue2关闭父页面（vue关闭窗口浏览器调用方法）

编程日记 • • 阅读 3

vue2关闭父页面（vue关闭窗口浏览器调用方法）一 下载 官网下载 建议下载长期支持版本 二 Vue 项目 创建 三 API 风格 1 注意点 选项式 API 在 Vue 2 和 Vue 3 中都是可用的 而组合式 API 则是 Vue 3 特有的新特性 不过可以通过插件形式让 Vue 2 也能享受到 2 选项式 3 组合式 四 TypeScripe 1 TypeScripe 是 JavaScripe 的超集 2 安装 3 使用 ts 给对象类型抽取用 interface 给其他类型抽取用 type 五



一、下载

官网下载,建议下载长期支持版本

二、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持久化功能
 
  
 
  
九、打包部署
 
  
     
   
  1. VScode执行npm脚本build，打包完成的文件都存在dist文件夹中
    2.  
   
  2. 下载nginx
    3.  
   
  3. 部署：将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下
    4.  
   
  4. 修改nginx.conf文件，配置反向代理
    5.  
   
  5. 启动：双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号。
    6.  
  
 
  
十、相关工具
 
  
 
  
安装参考链接
 
  
十一、项目创建
 
  
     
   
  1. npm创建：提供了一些其他插件，创建方式相对简陋，Vue3参考
    2.  
   
  2. vite创建：模块集中，可以自由选择，vite官网参考
    3.  
   
  3. TDesign模板项目创建：基于PC、移动模板页面，进行二次开发时使用，TDesign官网参考
    4.  
  
今天的文章 
  vue2关闭父页面（vue关闭窗口浏览器调用方法）分享到此就结束了，感谢您的阅读。 
  

                    


                    


                    

                        

                            

                                编程小号
                            

                            

                                

                                    
                                        
                                    
                                

                            

                        

                    

                


                

                    
                    
                    

                        
                        

                             上一篇
                            2025-08-11 10:11
                        

                    

                    
                    


                    
                    
                    

                        
                        

                            下一篇 
                            2026-01-29 22:57
                        

                    

                    
                    
                


                

                    
相关推荐

                    
                

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，
                        请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/37776.html