Vue 3 + Vite + TypeScript 探索

最新推荐文章于 2024-08-22 16:04:37 发布
最新推荐文章于 2024-08-22 16:04:37 发布
阅读量104 收藏
点赞数
文章标签： typescript vue.js 前端 Electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79326616/article/details/133674429
版权
Electron 专栏收录该内容
84 篇文章 14 订阅 ¥59.90 ¥99.00
订阅专栏
本文详细介绍了如何结合 Vue 3、Vite 和 TypeScript，利用 Electron 构建跨平台桌面应用程序。从准备 Node.js 和 npm 开始，创建 Vue 3 项目，配置 Vite，创建主进程和渲染进程，到构建和运行应用，一步步展示了整个流程。通过此实践，开发者可以体验到 Vue 3 的组件化优势、Vite 的快速构建效率以及 TypeScript 的类型安全特性。
摘要由CSDN通过智能技术生成

Vue 3 是一种流行的 JavaScript 框架，用于构建现代化的单页面应用程序。Vite 是一个快速的构建工具，专为 Vue 3 设计。而 TypeScript 是一种强类型的 JavaScript 超集，提供了更好的开发工具和类型检查。本文将探索如何结合 Electron、Vue 3、Vite 和 TypeScript 来构建跨平台的桌面应用程序。

准备工作

在开始之前，确保已安装 Node.js 和 npm。你可以通过在终端中运行以下命令来检查其版本：

node -v
npm -v

确保你的 Node.js 版本高于 14。

创建项目

首先，我们需要创建一个新的 Vue 3 项目。打开终端并执行以下命令：

mkdir electron-vue-app
cd electron-vue-app
npm init -y

接下来，安装必要的依赖项：


                

                
                
        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        

    

      

        

            

              
                
                  2301_79326616
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip

				
			

			

				

					01-03
				

			

		

		

			
				
Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...

			
		

	



                

              
                



	

		

			

				
					
vue3+vite+antd 后台管理系统基础模板

				
			

			

				

					02-06
				

			

		

		

			
				
Vue3 是一个流行的前端JavaScript框架的最新版本，它提供了许多改进和优化，包括更好的性能、更简洁的API以及对TypeScript的深入支持。Vue3引入了Composition API，这是一个全新的组织组件逻辑的方式，允许开发者更...

			
		

	



                


  
              

                


	

		

			

				
					
Vue3+Vite+TypeScript常用项目模块详解

				
			

			

				

					qq_43649937的博客
				

				

					06-09
					
					7981
					
				

			

		

		

			
				
Vue3 Ts Vite

			
		

	





	

		

			

				
					
Vue3 + Vite + TypeScript 项目搭建总结

				
			

			

				

					weixin_42705100的博客
				

				

					03-08
					
					1280
					
				

			

		

		

			
				
vue3+vite+ts项目搭建经历，记录完整详细的搭建过程，将遇到的问题统统解决

			
		

	



		

			
		



	

		

			

				
					
Vue3+Vite+TypeScript 搭建Vue3项目笔记

				
			

			

				

					qq_30193097的博客
				

				

					12-19
					
					496
					
				

			

		

		

			
				
现在 Vue3+Vite+TypeScript 搭建的项目越来越受到公司的欢迎，今天也来搭建一下，为了兼容老项目，这里只能用现有版本的 node，目前我的node 版本是 v14.19.3。

			
		

	





	

		

			

				
					
vue3+vite+TypeScript打包优化

				
			

			

				

					qq_33440740的博客
				

				

					03-22
					
					689
					
				

			

		

		

			
				
在 Vite 中，可以通过使用 Tree Shaking 来删除项目中未使用的代码，减小打包后的文件体积。在 Vite 中，可以通过使用 gzip 压缩来减小文件体积，提高性能。在 Vite 中，使用 vite build 命令可以进行生产模式的构建。生产模式构建会对代码进行压缩和优化，减小打包后的文件体积，提高性能。在 Vite 中，可以通过使用缓存来提高构建速度。在 Vite 中，使用动态导入（Dynamic Import）可以帮助我们将代码按需加载，减少初始加载时间，提高性能。

			
		

	





	

		

			

				
					
Vue3 + Vite + TypeScript + Element-Plus创建管理系统项目

				
			

			

				

					m0_59778008的博客
				

				

					05-04
					
					792
					
				

			

		

		

			
				
注意：导入组件时提示无法找到模块“…/pages/HomePage/index.vue”的声明文件。src/pages/HomePage/index.vue”隐式拥有 “any” 类型。按需自动导入：（需要先完成上一步对`unplugin-vue-components unplugin-auto-import``两个插件的安装）这样就可以直接使用Element-Plus里面的组件了。// 使用组件时不再需要导入，可以直接使用。

			
		

	





	

		

			

				
					
vue3+vite+ts+vueRouter+vuex+axios+element-plus搭建项目框架

				
			

			

				

					仰望半月
				

				

					02-28
					
					1888
					
				

			

		

		

			
				
本项目框架是基于， 对vite 快速创建的框架做出的二次封装。

			
		

	





	

		

			

				
					
vue3+vite+vant+typescript 的坑

				
			

			

				

					qq_38935512的博客
				

				

					10-21
					
					577
					
				

			

		

		

			
				
vue3

			
		

	





	

		

			

				
					
Vue3 + Vite2 + TypeScript4搭建企业级项目框架

				
			

			

				

					WanFengZhou
				

				

					06-08
					
					1509
					
				

			

		

		

			
				
Vue3 + Vite2 + TypeScript4搭建企业级项目框架

			
		

	





	

		

			

				
					
vue3+vite+typescript 项目创建

				
			

			

				

					wjyxiaocainiao的博客
				

				

					02-16
					
					852
					
				

			

		

		

			
				
用命令行创建:

1:npm init @vitejs/app vite-frontend-template

2:选择 Vue

3：选择vue-ts

4:cd vite-frontend-template

5:npm install

6:npm run dev 结果：



创建完成后，需要安装路由和vuex

然后在根目录下创建路由文件和store文件夹，同时记得要安装插件volar，本来是要求安装插件Vetur的，但是会报错，然后，上网查找案例，volar可以解决问题。




npm i v

			
		

	





	

		

			

				
					
vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本

				
			

			

				

					04-02
				

			

		

		

			
				
综上所述，这个项目结合了 Vue3、Vite5、TypeScript 和 Element-Plus 的优点，提供了一个现代化的后台管理前端模板，适合开发高效、稳定、具有良好用户体验的管理系统。通过学习和使用这个模板，开发者可以深入理解 ...

			
		

	





	

		

			

				
					
Vue3+Vite4+TS 后台模板

				
			

			

				

					06-08
				

			

		

		

			
				
该模板利用了Vue.js的最新版本Vue3，搭配快速构建工具Vite4，以及TypeScript的静态类型检查，提供了强大的功能和优秀的开发体验。  Vue3是Vue.js的第三次重大更新，它引入了许多新特性，如Composition API，使得代码...

			
		

	





	

		

			

				
					
最新完整Vite+Vue3+TypeScript项目实战.zip

				
			

			

				

					05-10
				

			

		

		

			
				
最新完整Vite+Vue3+TypeScript项目实战   最新完整Vite+Vue3+TypeScript项目实战   最新完整Vite+Vue3+TypeScript项目实战   最新完整Vite+Vue3+TypeScript项目实战   最新完整Vite+Vue3+TypeScript项目实战   最新...

			
		

	





	

		

			

				
					
TypeScript 面试题汇总

				
			

			

				

					qq_42072014的博客
				

				

					08-14
					
					1028
					
				

			

		

		

			
				
联合类型：使用符号表示多种类型之一。typescript深色版本交叉类型：使用符号表示多个类型的组合。typescript深色版本3};47};8使用readonly关键字定义不可修改的属性。typescript深色版本4}使用class关键字定义类。typescript深色版本36 }7}

			
		

	





	

		

			

				
					
avue-crud 自定义搜索项 插槽

				
			

			

				

					qq_31683775的博客
				

				

					08-20
					
					292
					
				

			

		

		

			
				
加上 -search 就可以自定义查询项了。

			
		

	





	

		

			

				
					
Vue Styled Components 新版本发布

					
最新发布

				
			

			

				

					As的博客
				

				

					08-22
					
					277
					
				

			

		

		

			
				
Feature

### 自动添加前缀(Auto Prefixing)

vue-styled-components 会在编译 CSS 时自动添加浏览器私有前缀，这可以确保你的 CSS 规则在最常见的浏览器中兼容。

			
		

	





	

		

			

				
					
【前端】VUE动态引入组件 通过字符串动态渲染模板 动态生成组件

				
			

			

				

					我是Superman丶的博客
				

				

					08-19
					
					219
					
				

			

		

		

			
				
【前端】VUE动态引入组件 通过字符串动态渲染模板。

			
		

	





	

		

			

				
					
vue中定义一个url文件,在vue文件中引入

				
			

			

				

					weixin_65767506的博客
				

				

					08-22
					
					173
					
				

			

		

		

			
				
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.

			
		

	





	

		

			

				
					
vue3+vite3+typescript使用wangEditor编辑器

				
			

			

				

					05-17
				

			

		

		

			
				
可以使用以下步骤在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器：

1. 安装 WangEditor。可以使用 npm 或 yarn 安装。

   ```bash
   npm install wangeditor --save
   # 或者
   yarn add wangeditor
   ```

2. 在 `main.ts` 中引入 WangEditor 和 CSS 文件。

   ```typescript
   import WangEditor from 'wangeditor';
   import 'wangeditor/release/wangEditor.css';

   const app = createApp(App);
   app.config.globalProperties.$WangEditor = WangEditor; // 挂载编辑器到全局
   app.mount('#app');
   ```

3. 在组件中使用 WangEditor。

   ```vue
   <template>
     <div class="editor-wrapper">
       <div ref="editorRef"></div>
     </div>
   </template>

   <script lang="ts">
   import { defineComponent, onMounted, ref } from 'vue';

   export default defineComponent({
     name: 'Editor',
     setup() {
       const editorRef = ref<HTMLDivElement>();

       onMounted(() => {
         const editor = new (window as any).$WangEditor(editorRef.value);
         editor.create();
       });

       return {
         editorRef,
       };
     },
   });
   </script>

   <style lang="scss">
   .editor-wrapper {
     height: 400px;
     .w-e-text-container {
       height: 100%;
     }
   }
   </style>
   ```

   在 `onMounted` 钩子函数中，使用 `new (window as any).$WangEditor` 来创建编辑器实例，并传入编辑器容器的 DOM 节点。调用 `editor.create()` 方法来创建编辑器。

   注意：由于 WangEditor 的类型定义文件并不完善，因此可以在 `tsconfig.json` 中添加以下配置来避免类型检查报错。

   ```json
   {
     "compilerOptions": {
       "skipLibCheck": true
     }
   }
   ```

这样，就可以在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器了。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值